微信小程序——音频播放器
发布时间：2020-12-14 19:12:28 所属栏目：资源 来源：网络整理
导读：先来个效果图韵下味： ? 需求： 音频的播放，暂停，中间按钮状态的变化，播放时实时更新播放进度； 前进15s，后退15s； 进度条拖动。 一开始想着这3个功能应该挺简单的。不就是播放，暂停，前进，后退么~呵~写的时候发现自己还是太年轻。当然，这跟自己的技
|
先来个效果图韵下味：
? 需求：
一开始想着这3个功能应该挺简单的。不就是播放，暂停，前进，后退么~呵~写的时候发现自己还是太年轻。当然，这跟自己的技术功底有关系。现在把我遇到的难点及要注意的点说一下~
完整代码： wxml:
<view class=" audio-content"> image src="{{logo640x360}}" class="bg-blur"></image> ="bg-gray"view="container-cover"> ="cover"> ="cover-image"="cover-tip">词不达意.mp3</> ="audio-inner row item-center"="audio-desc">{{currentProcess}}="audio-progress-wrap"van-slider value="{{sliderValue}}" step="{{sliderStep}}" active-color="#09bb07" use-button-slot bind:change="onSliderChange" bind:drag="onSliderDrag"> ="slider-button" slot="button"van-slider>{{productDetail.duration}}<!-- 播放器控制条 --> section ="speech-player js_control_bar"="player-bar row justify-center item-center"="backward js_audio_backward" title="后退15s"ss-icon name="back-15" size="32px" color="#fff" block="{{true}}" bind:click="backward" /> ="play"="播放/暂停"="circle-loading" wx:if="{{loading}}"="play-outline"="50px"="{{pause}}"="audioPlay" /> ="pause-outline"="{{playing}}"="audioPause" ="forward js_audio_forward"="前进15s"="forward-15"="forward" section> >
如果你要用的话把上面的 <ss-icon>?换成<van-icon>，并且需要自己找阿里矢量图标库查找对应的图标。 js: ,sliderStep:1
},0); line-height: 1.5 !important;">*
* 组件的方法列表
*/
methods: {
音频播放
audioPlay(e) {
const _this = this;
let audioDuration = _this.data.audioDuration;
if (audioUrl) {
if (seekPosition) {
如果有指定位置，则跳转到指定位置
audioContext.seek(seekPosition);
}
audioContext.play();
_this.setData({
pause: else {
getJSON是我自己封装的
ss.getJSON('获取音频如果需要发送请求，这里面放请求地址',{
放你自己的参数
},res => {
audioUrl = res.t;
audioContext.src = audioUrl;
if (seekPosition) {
audioContext.seek(seekPosition);
}
audioContext.play();
audioContext.onPlay(() => {
console.log('onPlay')
})
audioContext.onWaiting(() => {
console.log('onWaiting')
_this.setData({
pause: {
console.log('onCanplay')
_this.setData({
pause: false
})
setTimeout(() => {
audioContext.duration
},500)
_this.audioStatus();
})
audioContext.onError((res) => {
console.log(res.errMsg)
})
})
}
},0); line-height: 1.5 !important;">播放暂停
audioPause: function() {
const _this = this;
audioContext.pause();
_this.setData({
pause: false
})
},0); line-height: 1.5 !important;">记录播放状态
audioStatus: this;
音频播放进度更新事件
audioContext.onTimeUpdate(() => {
seekPosition = audioContext.currentTime;
_this.setData({
currentProcess: ss.formatSecToMin(audioContext.currentTime),sliderValue: audioContext.currentTime / _this.data.audioDuration * 100,})
})
音频播放结束
audioContext.onEnded(() => {
seekPosition = 0;
_this.setData({
sliderValue: 0,pause: true
})
})
},0); line-height: 1.5 !important;">开始拖动
onSliderDrag(e) {
const _this = if (_this.data.playing) {
_this.audioPause()
}
let sliderValue = e.detail.value;
seekPosition = _this.data.audioDuration / 100 * sliderValue;
_this.setData({
currentProcess: ss.formatSecToMin(seekPosition)
})
},0); line-height: 1.5 !important;">拖动结束
onSliderChange(e) {
const _this = this;
_this.audioPlay()
},0); line-height: 1.5 !important;">前进15s
forward() {
const _this = this,audioDuration = _this.data.audioDuration;
let currentTime;
if (_this.data.playing) {
currentTime = audioContext.currentTime;
}
if (_this.data.pause) {
currentTime = seekPosition;
}
if (audioDuration - currentTime > 15) {
seekPosition = currentTime + 15;
_this.setData({
sliderValue: seekPosition / audioDuration * 100,currentProcess: ss.formatSecToMin(seekPosition)
});
} else {
seekPosition = audioDuration;
_this.setData({
sliderValue: 0,currentProcess: '00:00'
});
}
if (audioUrl && _this.data.playing) {
audioContext.seek(seekPosition);
}
},0); line-height: 1.5 !important;">后退15s
backward() {
const _this = if (currentTime > 15) {
seekPosition = currentTime - 15;
} else {
seekPosition = 0;
}
_this.setData({
sliderValue: seekPosition / audioDuration * 100,currentProcess: ss.formatSecToMin(seekPosition)
});
if (audioUrl && _this.data.playing) {
audioContext.seek(seekPosition);
}
}
}
})
|
