微信小程式之音樂控制播放(audio的API)
阿新 • • 發佈:2019-01-05
一.小知識
1.wx.getBackgroundAudioPlayerState(OBJECT):獲取後臺音樂播放狀態。
wx.getBackgroundAudioPlayerState({
success: function(res) {
var status = res.status
var dataUrl = res.dataUrl
var currentPosition = res.currentPosition
var duration = res.duration
var downloadPercent = res.downloadPercent
}
})
2.wx.playBackgroundAudio(OBJECT)
wx.playBackgroundAudio({
dataUrl: '',
title: '',
coverImgUrl: ''
})
3.wx.pauseBackgroundAudio()暫停播放音樂。
4.wx.seekBackgroundAudio(OBJECT)控制音樂播放進度。
wx.seekBackgroundAudio({
position: 30
})
5.wx.stopBackgroundAudio()停止播放音樂。
6.wx.onBackgroundAudioPlay(CALLBACK)
7.wx.onBackgroundAudioPause(CALLBACK)監聽音樂暫停。
8.wx.onBackgroundAudioStop(CALLBACK)監聽音樂停止。
二.案例
<view class="zn-uploadimg">
<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>
</view>
.zn-uploadimg{
padding:1rem;
}
.zn-uploadimg button{
margin:10px;
}
//record.js
//獲取應用例項
Page({
data:{
// text:"這是一個頁面"
},
onLoad:function(options){
// 頁面初始化 options為頁面跳轉所帶來的引數
/**
* 監聽音樂播放
*/
wx.onBackgroundAudioPlay(function() {
console.log('onBackgroundAudioPlay')
})
/**
* 監聽音樂暫停
*/
wx.onBackgroundAudioPause(function() {
console.log('onBackgroundAudioPause')
})
/**
* 監聽音樂停止
*/
wx.onBackgroundAudioStop(function() {
console.log('onBackgroundAudioStop')
})
},//播放音樂
listenerButtonPlay: function() {
wx.playBackgroundAudio({
//播放地址
dataUrl: 'http://sc1.111ttt.com/2016/1/09/28/202280605509.mp3',
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()
}
})