话不多说，做出来的效果图是这样的
image.png
从上个页面直接返回了40条语音课程的列表（本地缓存），跳转页面时拿下标利用下标去拿音频对象。这是wxml的代码
<view class="container">
<view class="audio">
<!-- 课程的banner图片 -->
<image class="poster" src="{{ imgUrl + poster }}"></image>
<text class="name">{{media.name}}</text>
<!-- 播放进度条 -->
<view class="progress">
<view class="controls">
<text class="current">{{currentSecond}}</text>
<view class="section section_gap">
<view class="body-view">
<slider disabled="true" min="0" max="{{duration}}" value="{{curSecond}}" activeColor="#F91C55" block-size="18"/>
</view>
</view>
<text class="total">{{media.timeLong}}</text>
</view>
</view>
<!-- 播放控件 -->
<view class="btns">
<image class="previous" src="/images/emotion/previous.png" bindtap="previousFun"></image>
<label class="play">
<image src="{{ playing == true ? '/images/emotion/playing.png' : '/images/emotion/stop.png'}}" bindtap="playClick"></image>
</label>
<image class="next" src="/images/emotion/next.png" bindtap="nextFun"></image>
</view>
</view>
</view>
踩坑：
1.slider里面的 value / min / max 都必须是整数！！！(在innerAudioContext.onTimeUpdate()里面拿到innerAudioContext.currentTime和innerAudioContext.duration都是小数，需Math.ceil()向上取整再赋值)
2.如果把 innerAudioContext.onPlay、onStop、onPause、onTimeUpdate、onEnded、onError监听音频的事件写在onLoad里面只执行一次，在我点击上一首、下一首时再点击播放时，因为监听不到导致curSecond不变，slider的value不变进度条不动(解决方法：封装innerAudioContext部分监听，每次点击调用)
js部分
const app = getApp();
// 创建内部 audio 上下文 InnerAudioContext 对象
var innerAudioContext = wx.createInnerAudioContext()
// 时间格式化
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
}
// 音频对象
function audio(media) {
innerAudioContext = wx.createInnerAudioContext()
innerAudioContext.src = app.globalData.globalUrl + media.url;
innerAudioContext.obeyMuteSwitch = false;
innerAudioContext.autoplay = false;
}
Page({
/**
* 页面的初始数据
*/
data: {
rId: null, //课程的id--添加记录时需要
curIndex: null, //音频当前下标
media: null, //音频信息对象
poster: '', //音频海报
imgUrl: app.globalData.globalUrl, //多媒体公共路径
currentSecond: '00:00', //页面所需当前播放的时间
curSecond: 0, // 当前播放的秒数
duration: null, //音频总时长
playing: false //是否正在播放
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// 从本地存储拿到文件信息、slider滑块的当前/总时长的换算
this.data.poster = options.url;
this.data.rId = options.rId;
this.data.curIndex = Number(options.index);
this.data.media = wx.getStorageSync('catalogList')[this.data.curIndex];
this.setData({
rId: this.data.rId,
media: this.data.media,
poster: this.data.poster,
curIndex: this.data.curIndex
})
this.watchAudio(); //初始化调用一次
},
// 点击控件中间按键---播放/暂停
playClick: function () {
if (this.data.playing) {
this.data.playing = false;
this.setData({
playing: this.data.playing
})
innerAudioContext.pause();
return;
} else {
this.data.playing = true;
this.setData({
playing: this.data.playing
})
innerAudioContext.play();
return;
}
},
// 上一首
previousFun: function () {
if (this.data.curIndex == 0) {
wx.showToast({
title: '这就是第一课哟~',
icon: "none"
})
return;
} else {
this.data.curIndex -= 1;
this.data.playing = false;
this.data.media = wx.getStorageSync('catalogList')[this.data.curIndex];
this.data.curSecond = 0;
this.data.currentSecond = format(0);
this.setData({
media: this.data.media,
playing: this.data.playing,
curIndex: this.data.curIndex,
curSecond: this.data.curSecond,
currentSecond: this.data.currentSecond
})
//重新调用音频
innerAudioContext.stop();
this.watchAudio();
}
},
// 下一首
nextFun: function () {
if (this.data.curIndex == wx.getStorageSync('catalogList').length - 1) {
wx.showToast({
title: '这就是最后一课哟~',
icon: "none"
})
return;
} else {
this.data.curIndex += 1;
this.data.playing = false;
this.data.media = wx.getStorageSync('catalogList')[this.data.curIndex];
this.data.curSecond = 0;
this.data.currentSecond = format(0);
this.setData({
media: this.data.media,
playing: this.data.playing,
curIndex: this.data.curIndex,
curSecond: this.data.curSecond,
currentSecond: this.data.currentSecond
})
//重新调用音频
innerAudioContext.stop();
this.watchAudio();
}
},
// 监听audio
watchAudio: function () {
let that = this;
audio(that.data.media); //重新赋值音频对象
//开始
innerAudioContext.onPlay(() => {
that.setData({
playing: true
})
})
//停止
innerAudioContext.onStop(() => {
that.setData({
playing: false
})
})
//暂停
innerAudioContext.onPause(() => {
that.setData({
playing: false
})
})
//播放进度
innerAudioContext.onTimeUpdate(() => {
that.data.duration = Math.ceil(innerAudioContext.duration);
that.data.curSecond = Math.ceil(innerAudioContext.currentTime);
that.data.currentSecond = format(innerAudioContext.currentTime);
that.setData({
duration: that.data.duration,
curSecond: that.data.curSecond,
currentSecond: that.data.currentSecond
})
})
//播放结束
innerAudioContext.onEnded(() => {
that.setData({
playing: false
})
that.nextFun(); //调用下一首
})
//播放错误
innerAudioContext.onError((res) => {
wx.showToast({
title: '错误:' + res.errMsg,
icon: "none"
})
})
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
// 停止音频播放
innerAudioContext.stop();
this.setData({
playing: false
})
},
}
以上代码仅供参考，入行不到两年，请多指教共同进步哟~
