uni.createInnerAudioContext
今天项目用到uni的音频播放功能 我脑海里第一印象就是audio 标签 有标签啊 然后我就看到了这样的一段话,
抱着学习的态度 我开始了万恶的旅程
需要的样式是这样的
给我的数据是这样的
一看就是v-for来进行展示的让我们看下官方文档 看一眼示例看一眼说明
ps:没有截全,建议官方文档仔细的看
创建实例设置url就可以播放了通过play方法开始使用了
但是想象和现实十分的不同 列表确实是被生成了 开始出现坑
我一开始写出来代码是这样的
audio(e){ //e为传入音频src
const innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.src = e;
innerAudioContext.play();
}
此时出现的问题
一、没有暂停
二、当点击多条时会有多条音频同时播放
开始解决问题
首先多条音频开始解决
多条音频同时播放是因为每次点击的时候都会去创建一次示例
所以我们只需要把这段代码放在 onl oad 中或者 放在 export default 上面就可以了
const innerAudioContext = uni.createInnerAudioContext();
再解决暂停问题当时我的代码是这样的
audio(e){
innerAudioContext.src = e;
if(innerAudioContext.paused){
/*paused 判断音频当前的播放状态 true 表示暂停或停止,
*false 表示正在播放
*/
innerAudioContext.play()
}else{
innerAudioContext.pause() //暂停
innerAudioContext.onPause(()=>{//暂停时调用的方法
innerAudioContext.startTime = innerAudioContext.currentTime
//startTime 设置开始时间 currentTime 暂停时的秒数 官方文档都有写
})
}
}
暂停实现了 但时每次继续播放都是从头开始播放
原因就出在了innerAudioContext.src = e;原因好像时因为每次都会加载一次src 所以才会这样
最后代码
audio(e){
let _this = this
if(_this.music == e){
if(innerAudioContext.paused){
innerAudioContext.play()
}else{
innerAudioContext.pause()
innerAudioContext.onPause(()=>{
innerAudioContext.startTime = innerAudioContext.currentTime
})
}
}else{
innerAudioContext.src = e
if(innerAudioContext.paused){
innerAudioContext.play()
}else{
innerAudioContext.pause()
innerAudioContext.onPause(()=>{
innerAudioContext.startTime = innerAudioContext.currentTime
})
}
}
_this.music =e
},
我也百度了近一上午实在时网上案例太少,冥思苦想大半天终于悟出来了 如果有不对之处请指正,希望可以帮到你