let innerAudioContext = null
let backgroundAudioManager = null
let isPlay = false
page之上定义,不用随时setData会有延迟。注意:页面上用到的要在data里面写,不在页面上展示js直接用的可以在上面定义全局
判断是否支持基础库
isCanUseBgAudio = wx.canIUse('getBackgroundAudioManager')
需要兼容不支持的基础库使用-createInnerAudioContext(不支持播放速度)
背景悬浮框直接使用- getBackgroundAudioManager(支持播放速度)
<view class="slider"><slider bindchange="sliderChange" bindchanging="sliderChange" value="{{sliderValue}}" min="0" max="{{maxSliderValue}}" block-size="12"/>
</view><span bind:tap="prePlay">上一段</span><span bind:tap="palyAudio">{{textPlay}}</span><span bind:tap="nextPlay">下一段</span>
if (isCanUseBgAudio){innerAudioContext = wx.createInnerAudioContext({useWebAudioImplement: true})backgroundAudioManager = wx.getBackgroundAudioManager()backgroundAudioManager.onEnded(() => {console.log("音乐播放结束");if (this.data.currentIndex != (this.data.currentList.length -1)){this.nextPlay()} else {console.log('最后结束')}})backgroundAudioManager.onTimeUpdate(() => {if (backgroundAudioManager.paused) {return;}const duration = backgroundAudioManager.duration; // 音频总时长const currentTime = backgroundAudioManager.currentTime; // 当前播放时长const currentSecond = util.formatSeconds(backgroundAudioManager.currentTime)this.setData({sliderValue: currentTime,maxSliderValue: duration,currentSecond: currentSecond})})backgroundAudioManager.onPause(() => {isPlay = falsethis.setData({textPlay: '播放',})})backgroundAudioManager.onPlay(() => {isPlay = truethis.setData({textPlay: '暂停',})})backgroundAudioManager.onNext(() => {// 监听用户在系统音乐播放面板点击下一曲事件this.nextPlay()})backgroundAudioManager.onPrev(() => {// 监听用户在系统音乐播放面板点击上一曲事件this.prePlay()})} else {innerAudioContext = wx.createInnerAudioContext({// useWebAudioImplement: true})innerAudioContext.src = urlconsole.log('2222', url)// this.playType(item, url)innerAudioContext.play() // 播放innerAudioContext.onError((ee) => {// 监听音频播放错误事件console.log('errr',ee)})innerAudioContext.onEnded(() => {console.log("音乐播放结束");if (this.data.currentIndex != (this.data.currentList.length -1)){this.nextPlay()} else {console.log('最后结束')}})innerAudioContext.onTimeUpdate(() => {if (innerAudioContext.paused) {return;}const duration = innerAudioContext.duration; // 音频总时长const currentTime = innerAudioContext.currentTime; // 当前播放时长const currentSecond = util.formatSeconds(innerAudioContext.currentTime)// console.log('duration---', duration, currentTime, currentSecond)// sliderValue = currentTimethis.setData({sliderValue: currentTime,maxSliderValue: duration,currentSecond: currentSecond})})innerAudioContext.onPause(() => {isPlay = falsethis.setData({textPlay: '播放',})})innerAudioContext.onPlay(() => {isPlay = truethis.setData({textPlay: '暂停',})})}
暂停播放
palyAudio(){if(isPlay){isPlay = falseif (isCanUseBgAudio) {backgroundAudioManager.pause()}innerAudioContext.pause()this.setData({textPlay: '播放'})} else {isPlay = trueif (isCanUseBgAudio) {backgroundAudioManager.play()} else {innerAudioContext.play()}this.setData({textPlay: '暂停'})}
playType(item, url){if(isCanUseBgAudio){//backgroundAudioManager给src附完值不需要play自动播放backgroundAudioManager.src = url backgroundAudioManager.title = item.titlebackgroundAudioManager.coverImgUrl = poster} else {// innerAudioContext附完值需要play播放,另没有titleinnerAudioContext.src = url// innerAudioContext.title = item.titleinnerAudioContext.play() console.log('innerAudioContext', innerAudioContext) }},
util.js里面的formatSeconds
function formatSeconds (value) {var secondTime = parseInt(value)var minuteTime = 0var hourTime = 0if(secondTime < 10) {return `00:0${secondTime}`}if (secondTime < 60) {return `00:${secondTime}`}minuteTime = parseInt(secondTime / 60)secondTime = parseInt(secondTime % 60)if (minuteTime > 60) {hourTime = parseInt(minuteTime / 60)minuteTime = parseInt(minuteTime % 60)}var result = formatNumber(parseInt(secondTime))if (minuteTime > 0) {result = '' + formatNumber(parseInt(minuteTime)) + ':' + result}if (hourTime > 0) {result = '' + formatNumber(parseInt(hourTime)) + ':' + result}return result
}
另附加参考:https://blog.csdn.net/xingchen_xc/article/details/139067665