⼀个⼩程序⾳频列表播放的页⾯遇到的坑及实现代码不说别的，先上效果图。表⽰⼩程序createAudioContext的坑真的是成堆成堆的。
坑⼀：ios动态更换⾳频播放地址后 onCanplay 不执⾏
这个bug⾄今⽆解，当然这⾥也就不累赘onCanplay不加timeout获取不到⾳频总时长了，事实是就算加了ios也获取不到第⼆条⾳频的总时
长，但是安卓没问题。直接说解决⽅案吧。
楼主⽐较幸运，展⽰的⾳频有限，本来也是指望onCanplay动态获取⾳频总长的，后来没办法直接提前获取到写死代码⾥了。⾄于切换⾳频
之后更改右下⾓显⽰的总时长，这部分代码写到了onplay⾥
坑⼆：onxxx 事件需要取消监听
不取消的后果是什么呢？就是下次点击的时候前⼏次监听的事件⼀起触发。
htmlborder下⾯是代码：
wxss:
/* inner/pages/sleep/sleep.wxss */
@import "../../../templates/loading/loading.wxss";
page{background: #efeff4;}
.container{width: 750rpx;}
/* fullBg */
.fullBg{padding: 50rpx 30rpx 150rpx;}
.fullBg .eachFull{width: 330rpx;position: relative;margin: 15rpx 0;}
.fullBg .eachFull:nth-child(2n-1){float: left;}
.fullBg .eachFull:nth-child(2n){float: right;}
.sleepBg{display:block;width: 100%;height: 350rpx;border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;position: relative;}
.sleepBg image{width: 100%;height: 100%;display: block;border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;}
.sleepBg .sleepCover{width: 100%;height: 100%;position: absolute;background: rgba(255, 255, 255, .15);border-top-left-radius: 20rpx;border-top-right-radius: 20r .sleepCont{width: 100%;padding: 30rpx 20rpx;border-bottom-left-radius: 20rpx;border-bottom-right-radius: 20rpx;box-sizing: border-box;background: #fff;}
.sleepCont text{display: block;float: left;line-height: 50rpx;width: 220rpx;}
.sleepCont image{display: block;float: right;width: 50rpx;height: 50rpx;}
/* player */
.player{width: 750rpx;position: fixed;bottom: 0;left: 0;height: 120rpx;border-top: 1rpx solid #ccc;text-align: center;box-sizing: border-box;background: #fff;}
.musicBg{width: 750rpx;height: 120rpx;display: block;}
.musicBg image{width: 750rpx;height: 120rpx;display: block;}
.playerBtns{width: 750rpx;height: 120rpx;position: absolute;top: 0;left: 0;padding-top: 10rpx;}
.leftAdjust{margin-left: 20rpx;}
.leftAdjust.lastAdjust{margin-right: 10rpx;margin-left: 10rpx;}
.playerAdjust{width: 80rpx;height: 80rpx;float: left;margin-top: 10rpx;}
.playerHandler{float: left;}
.playerHandler image{width: 100rpx;height: 100rpx;display: block;}
.progressBar{float: right;width: 250rpx;height: 10rpx;border-radius: 10rpx;background: #ccc;margin-top: 40rpx;margin-right: 20rpx;position: relative;}
.progressBarInner{position: absolute;height: 10rpx;background: #d74518;top: 0;left: 0;border-radius: 10rpx;}
.progressTime{float: right;line-height: 80rpx;margin-top: 5rpx;font-size: 24rpx;width: 180rpx;text-align: left;}
wxml:
<view class='container'>
<view class='fullBg clearfix'>
<view class='eachFull' wx:for="{{ audioArr }}" wx:key="{{ index }}" data-index='{{ index }}' bindtap="playSong">
<view class="sleepBg">
<image src='{{ item.poster }}'></image>
<view class="sleepCover"></view>
</view>
<view class='sleepCont page_normal clearfix'>
<text>{{ item.name }}</text>
<image class="fullPlayer" src="../images/audio-play-gray.png" wx:if="{{ currentIndex != index }}"></image>
<image class="fullPlayer" src="../images/play-blue.gif" wx:if="{{ currentIndex == index }}"></image>
</view>
</view>
</view>
<view class='player'>
<view class="playerBtns">
<image class='playerAdjust leftAdjust' src='../images/song-before.png' bindtap='playFront'></image>
<view class='playerHandler'>
<image class='playerBefore' src='../images/audio-play-gray.png' wx:if="{{ !playing }}" bindtap='playNow'></image>
<image class='playerBefore' src='../images/audio-pause-gray.png' wx:if="{{ playing }}" bindtap='pauseNow'></image>      </view>
<image class='playerAdjust lastAdjust' src='../images/song-next.png' bindtap='playNext'></image>
<view class="progressTime">{{ currentTime }} / {{ totalTime }}</view>
<view class="progressBar">
<view class="progressBarInner" ></view>
</view>
</view>
</view>
</view>
js:
// inner/pages/sleep/sleep.js
const mta = require('../../../utils/mta_analysis.js')
const dataset = require('../../../utils/data.js');
const { backend_url, wx_token } = require('../../../constants.js')
const app = getApp()
Page({
/**
* 页⾯的初始数据
*/
data: {
songDetail : [
{ name: '晨渐', total: 400.039184},
{ name: '穿过森林', total: 372.68898},
{ name: '⽔彩的素描', total: 367.725714},
{ name: '春风微风',  total: 229.093878 },
{ name: '回想', total: 369.632653 },
{ name: '⽔纹', total: 358.739592 },
{ name: '薰⾐草⾹时', total: 458.475102 },
{ name: '森之树', total: 413.23102 },
{ name: '⼩春⽓息', total: 365.087347 },
{ name: '⽔蓝的梦', total: 377.443265}
],
audioArr:[],
currentIndex:null,
playing:false,
font:{},
stay_start_time: null,
audioTotal:0,
audioDuration:0,
currentTime:'00:00',
totalTime:'00:00',
playInterval:null,
playRate:0,
loading: {
isLoading: true,  //加载
},
},
update(){
const that = this
clearInterval(that.data.playInterval)
that.data.playInterval = setInterval(function(){
let audioDuration = that.data.audioDuration - 1
if (audioDuration > 0){
var min = parseInt(audioDuration / 60);
var sec = parseInt(audioDuration % 60);
if (String().length == 1) {
min = `0${min}`;
}
if (String().length == 1) {
sec = `0${sec}`;
}
let rate = (that.data.audioTotal - audioDuration) / that.data.audioTotal * 100
that.setData({
audioDuration: audioDuration,
currentTime: `${min}:${sec}`,
playRate: rate
})
}
}.bind(that),1000)
},
onEnd(){
let that = this
clearInterval(that.data.playInterval)
that.setData({
audioDuration: 0,
totalTime: '00:00',
currentTime: '00:00',
playRate: 0,
playing:false
});
},
play(index, start){
const that = this
console.log(start)
if (that.data.currentIndex != null){
that.innerAudio.offPlay()
that.innerAudio.offWaiting()
that.innerAudio.offCanplay()
that.innerAudio.offEnded()
}
that.setData({
audioArr: that.data.audioArr,
currentIndex: index,
playing: true
})
that.innerAudio.play()
Play(() => {
if (start){
let total = that.data.audioArr[index].total        console.log(total)
var min = parseInt(total / 60);
var sec = parseInt(total % 60);
if (String().length == 1) {
min = `0${min}`;
}
if (String().length == 1) {
sec = `0${sec}`;
}
console.log(min, sec)
that.setData({
audioTotal: total,
audioDuration: total,
totalTime: `${min}:${sec}`,
currentTime: `${min}:${sec}`
});
}
that.update()
})
Waiting(() => {
console.log('wait')
})
Canplay(() => {
console.log('canplay')
})

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。