您的位置:首页 > 科技 > IT业 > 小程序音频播放相关

小程序音频播放相关

2024/10/12 11:09:29 来源:https://blog.csdn.net/u013195452/article/details/141362624  浏览:    关键词:小程序音频播放相关
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

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com