InnerAudioContex组件实现一个简单的小程序音频播放器
API 参考:https://developers.weixin.qq.com/miniprogram/dev/api/media/audio/InnerAudioContext.html
wxml部分
进度条使用slider控件
btn使用iview的小程序组件
<view class="music-player">
<view class="mp-btns">
<view wx:if="{{isplay==false}}" class="mp-cover "></view>
<view wx:if="{{isplay==true}}" class="mp-cover mp-cover-rotate"></view>
<view class="mp-btn-play" wx:if="{{isplay==false}}" bindtap='play'>
<i-icon class="" type="play_fill" size="40" color="#80848f" />
</view>
<view class="mp-btn-stop" wx:if="{{isplay==true}}" bindtap='stop'>
<i-icon class="" type="suspend" size="40" color="#80848f" />
</view>
</view>
<view class="mp-slider">
<slider class="mp-slider-bar" block-size="16" value="{{myAudioPos}}" bindchange="hanle_slider_change"></slider>
<view class="current-time">{{myAudioCurrent}}</view>
<view class="duration-time">{{myAudioDuration}}</view>
<view wx:if="{{error}}">音频播放出错!</view>
</view>
</view>
js部分
// pages/score/score.js
const myAudio = wx.createInnerAudioContext();
Page({
data: {
isplay: false, //是否默认播放,
myAudioDuration: '', // 视频时间
myAudioCurrent: '', // 当前播放进度
error: ''
},
onReady: function() {
// src来自qq音乐,一天即失效,测试请使用新的音乐地址
myAudio.src = 'http://isure.stream.qqmusic.qq.com/C4000003i7jD333cc8.m4a?guid=7277519600&vkey=AED6394F93ADC00BB18CEC261755ACB2D5DACE068904DCC0FA69C466F5DAD8DDAE8403150DE18FDC93C7200D4B37371A0E28EBDB59714EFE&uin=4624&fromtag=66';
myAudio.title = 'Cannon';
// 在onCanplay里获取并设置音频时长和播放进度
myAudio.onCanplay(() => {
myAudio.duration; //必须写,不然获取不到。。。
setTimeout(() => {
console.log(myAudio.duration);
this.setData({
myAudioDuration: format(myAudio.duration),
myAudioCurrent: format(myAudio.currentTime)
});
}, 1000);
});
// 播放完成处理,按钮变一下
myAudio.onEnded((res) => {
this.setData({
isplay: false
})
});
//错误处理
myAudio.onError((res) => {
this.setData({
error: res.errMsg
})
});
},
//播放
play: function() {
myAudio.startTime = this.data.myAudioCurrent; //考虑到进度条被拖动,不一定从00:00:00开始
myAudio.play();
this.setData({
isplay: true
});
//进度条变化
myAudio.onTimeUpdate(() => {
this.setData({
myAudioPos: myAudio.currentTime / myAudio.duration * 100,
myAudioCurrent: format(myAudio.currentTime)
});
})
},
// 停止
stop: function() {
myAudio.pause();
this.setData({
isplay: false
});
},
// 拖动进度条,到指定位置
hanle_slider_change(e) {
const position = e.detail.value;
var currentTime = position / 100 * myAudio.duration;
myAudio.seek(currentTime);
this.setData({
myAudioPos: position,
myAudioCurrent: format(currentTime)
})
}
})
// 时间格式化
function format(t) {
let time = Math.floor(t / 60) >= 10 ? Math.floor(t / 60) : '0' + Math.floor(t / 60);
t = time + ':' + ((t % 60) / 100).toFixed(2).slice(-2);
return t;
}
目前还有一小bug,进度条拖动不是很流畅。。。