微信小程序音频播放

今天做微信小程序涉及到播放音频文件：



使用audio标签来绑定音频路径

<audio id='audioid' src='{{vidioUrl}}' binderror="audioError" bindplay="audioPlay" bindeneded="playEnd" bindtimeupdate="timeUpdate"> </audio>

目前没有做到播放下一首的功能，只有暂停和播放。
最上面的播放条是通过progress的percent来实现的，

<progress percent="{{currtRate}}" stroke-width="2" activeColor="#ffd200" backgroundColor="#bcbcbc" />通过currtRate来实现播放条的已播放长度
界面：

<view class="ub-ver info-container" style="height:5em;">
<!-- 音频播放 -->
<view class='ub fonts12 align-items-center' >
<view>{{currentTime}}</view>
<view class="umw-6"></view>
<view class='ub-f1'>
<progress percent="{{currtRate}}" stroke-width="2" activeColor="#ffd200" backgroundColor="#bcbcbc" />
<!-- {{vidioUrl}} -->
</view>
<view class="umw-6"></view>
<view>{{duration}}</view>
</view>
<audio id='audioid' src='{{vidioUrl}}' binderror="audioError" bindplay="audioPlay" bindeneded="playEnd" bindtimeupdate="timeUpdate"> </audio>

<view class='ub ub-f1 align-items-center' style="justify-content:center">

<view class="icon-bofanglist align-items-center" style="background:url('http://inheater-bbs.oss-cn-shenzhen.aliyuncs.com/xcx/icons/bofanglist.png') no-repeat;background-size: contain" bindtap="listClick">
</view>
<view class="umw1-5"></view>
<view wx:if="{{flags}}" class="icon-play align-items-center" style="background:url('http://inheater-bbs.oss-cn-shenzhen.aliyuncs.com/xcx/icons/pause.png') no-repeat;background-size: contain" bindtap="pause">
</view>
<view wx:if="{{flagp}}" class="icon-next align-items-center" style="background:url('../../images/zanting@3x.png') no-repeat;background-size: contain" bindtap="play">
</view>
<view class="umw1-5"></view>
<view class="icon-next align-items-center" style="background:url('http://inheater-bbs.oss-cn-shenzhen.aliyuncs.com/xcx/icons/next.png') no-repeat;background-size: contain">
</view>
</view>
</view>

js文件：
onLoad: function (options) {
var that = this;
console.log("topicID" + options.infoId);
wx.request({
url: 'https://***********/' + *******,
header: {
'content-type': 'application/json'
},
success: function (res) {
that.setData({
vidioUrl: res.data.data.videoUrl
})

}
})
//时间戳转换为时间日期格式
function transDate(mescStr) {
var n = mescStr;
var date = new Date(n);
var Y = date.getFullYear() + '-';
var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
return (Y + M + D)
}
},
//以下是状态监听
audioError: function (resp) {
console.log(resp);
},
audioPlay: function (resp) {
console.log(resp);
console.log('开始播放');
},
playEnd: function (resp) {
console.log(resp);
console.log('播放结束');
},
timeUpdate: function (resp) {
this.setData({
currtRate: (100 * resp.detail.currentTime / resp.detail.duration),
duration: (resp.detail.duration / 60).toPrecision(2),//总时长 保留两位
currentTime: (resp.detail.currentTime / 60).toFixed(2)//toPrecision和toFixed的区别
});
// this.currentTime = resp.detail.currentTime;//当前时长
// console.log(resp);
},
//以下是操作
play: function () {
this.audioContext.play();
this.setData({
flags:true,
flagp:false
})
},
pause: function () {
this.audioContext.pause();
this.setData({
flags: false,
flagp: true
})
},
audioStart: function () {
this.audioCtx.seek(0)//重新播放
},

实现了音频的播放，对于下一首播放，目前没有头绪，刚接触两天，明天继续做