微信小程序把玩(三十四)Audio API

這裏寫圖片描述

沒啥可值得太注意的地方

重要屬性:

1. wx.getBackgroundAudioPlayerState(object) 獲取播放狀態

這裏寫圖片描述

2.wx.playBackgroundAudio(object)播放音樂

這裏寫圖片描述

3.wx.pauseBackgroundAudio()暫停音樂

4.wx.seekBackgroundAudio(object) 設置播放進度

這裏寫圖片描述

5.wx.stopBackgroundAudio()停止播放音樂

三個監聽器:

這裏寫圖片描述

wxml

<button type="primary" bindtap="listenerButtonPlay">播放</button>
<button type="primary" bindtap="listenerButtonPause">暫停</button>
<button type="primary" bindtap="listenerButtonSeek">設置播放進度</button>
<button type="primary" bindtap="listenerButtonStop">停止播放</button>
<button type="primary" bindtap="listenerButtonGetPlayState">獲取播放狀態</button>

js

Page({
  data:{
    // text:"這是一個頁面"
  },

  listenerButtonPlay: function() {
      wx.playBackgroundAudio({
          //播放地址
          dataUrl: 'http://sc1.111ttt.com/2016/1/09/28/202280605509.mp3',
          //title 音樂名字
          title: '青雲志',
          //圖片地址
          coverImgUrl: 'http://r1.ykimg.com/050E0000576B75F667BC3C136B06E4E7'

      })
  },

  /**
   * 播放狀態
   */
  listenerButtonGetPlayState: function() {
      wx.getBackgroundAudioPlayerState({
          success: function(res) {
              console.log(res)
              //duration 總時長
              //currentPosition 當前播放位置
              //status 播放狀態
              //downloadPercent 下載狀況 100 即爲100%
              //dataUrl 當前播放音樂地址
          }
      })
  },
  /**
   * 監聽button暫停按鈕
   */
  listenerButtonPause: function() {
      wx.pauseBackgroundAudio();
  },
  /**
   * 設置進度
   */
  listenerButtonSeek: function() {
      wx.seekBackgroundAudio({
          position: 30
      })
  },
  /**
   *停止播放 
   */
  listenerButtonStop: function() {
      wx.stopBackgroundAudio()
  },

  onLoad:function(options){
    // 頁面初始化 options爲頁面跳轉所帶來的參數
    /**
     * 監聽音樂播放
     */
    wx.onBackgroundAudioPlay(function() {
        console.log('onBackgroundAudioPlay')
    })

    /**
     * 監聽音樂暫停
     */
    wx.onBackgroundAudioPause(function() {
        console.log('onBackgroundAudioPause')
    })

    /**
     * 監聽音樂停止
     */
    wx.onBackgroundAudioStop(function() {
        console.log('onBackgroundAudioStop')
    })

  },
  onReady:function(){
    // 頁面渲染完成
  },
  onShow:function(){
    // 頁面顯示
  },
  onHide:function(){
    // 頁面隱藏
  },
  onUnload:function(){
    // 頁面關閉
  }
})
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章