需求描述：
1.正常播放音频
2.可以滑动进度条
3.可以切换上一条，下一条音频
4.退出当前页或关闭小程序之后仍然可以正常播放
5.试听功能进入该播放页不可以播放上一条，下一条
6.退出该页面或小程序之后，再次回到该页面，播放条自动到当前播放进度
图二图三是关闭小程序之后微信页面的展示，可以通过悬浮关闭该音频。
⚠️ 使用小程序 BackgroundAudioManager，需要在 app.json配置相关参数
"requiredBackgroundModes": [
"audio"
]
代码
{{music.start}}
{{music.leave}}
// pages/audioPlayer/audioPlayer.js
const api = require('../../service/http.js');
const util = require('../../utils/util.js')
var App = getApp()
const bgMusic = App.bgMusic //创建背景音乐
Page({
/**
* 页面的初始数据
*/
data: {
isTry: null, // 是否是试听状态
idx: 0, // 当前音频(第一个-上一条按钮不能点击，最后一条，下一条按钮不能点击)
albumCode: '', // 当前音频标识
opusName: '', // 当前专辑名字
musicSrc: '',
singler: '', // 当前作者
audioMsg: {}, // 音频信息(作者，封面，名字--仅展示)
opusSalt: '', // 当前音频id
isEnd: false, // 最后一条音频结束时控制
endVideoTime: '', // 最后一条音频时长
isPlay: true, // 是否暂停音乐
isStop: false, // 是否停止音乐
slideLen: 0, // 进度条初始值
music: { // 音频信息--用来处理数据
start: '00:00',
leave:'',
long: '',
length: ''
},
hasPre: true, // 是否有上一条音频
hasNxt: true, // 是否有下一条音频
musicList: [], // 用来存储音频列表，存储到本地，点击上一条、下一条音频时，不调用接口
perMusicMsg: {}, // 进入页面之后，就将上一条音频，下一条音频信息提取出来，方便直接点击按钮
nxtMusicMsg: {}, // 同上
isStopSlider: false // 是否停止滚动条随着音频播放改变长度 -- 防止拖动滚动条时发生回退现象！！！
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
let book
try {
let value = wx.getStorageSync('ai_cloud_book')
if (value) {
book = JSON.parse(value)
}
} catch (e) {
// Do something when catch error
}
this.setData({
albumCode: decodeURIComponent(options.albumCode),
musicSrc: decodeURIComponent(options.playerUrl),
opusName: decodeURIComponent(options.playerName),
singler: decodeURIComponent(options.playerSinger),
isTry: Boolean(Number(options.isTry)),
audioMsg: book,
opusSalt: options.opusSalt,
idx: Number(options.idx),
'music.long': util.formatM(options.playerLong),
'music.length': options.playerLong,
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
// 正在播放-进入(重新进入当前页面时)
// this.data.opusSalt === App.globalData.opusSalt 判断从列表进入时，想要播放的和正在播放的是否为同一条音频
if(bgMusic.src && this.data.opusSalt === App.globalData.opusSalt) {
this.audioInitAgain()
} else {
// 进入的和之前播放的不是同一条音频 存储将要播放的音频id，并获取将要播放的音频数据，然后播放
App.globalData.opusSalt = this.data.opusSalt
this.getAudioSrc()
}
// 试听只能听第一条，上一条，下一条按钮不可点击
if(this.data.isTry) {
this.setData({
hasPre: false,
hasNxt: false
})
} else {
this.musicListHandle()
}
},
// 跳转专辑列表-- 返回上一页面
jumpAudioList: function() {
wx.navigateBack()
},
// 获取音频信息
getAudioSrc: function() {
bgMusic.src = this.properties.musicSrc
bgMusic.title = this.data.opusName
bgMusic.epname = this.data.opusName
bgMusic.singer = this.data.singer
// 最后一条音乐存储一下音乐时长--- 播放结束后，不自动跳转下一条音频，播放按钮变为暂停，滚动条置0，endVideoTime展示该音频时长
this.setData({
endVideoTime: this.data.music.long
})
this.audioInitPlay()
},
// 音频-暂停/播放
// isPlay： true： 播放状态 false：暂停状态
// isStop：true ：当不在播放页面时，点击关闭悬浮框的关闭按钮 false： 悬浮框未关闭 --- 实际监听时，监听不到悬浮框关闭，但依然保留了该字段
ppAudio: function (e) {
let _isPlay = this.data.isPlay
let _isStop = this.data.isStop
if(_isStop) {
this.getAudioSrc()
this.setData({
isPlay: true,
isStop: false
})
return
}
if(_isPlay) {
this.pauseAudio()
} else if(this.data.isEnd){
// 最后一条音频 - 再次播放需要重新初始化
this.setData({
isEnd: false
})
this.getAudioSrc()
} else {
this.playAudio()
}
this.setData({
isPlay: !_isPlay
})
},
// 音频实时信息 -->
audioTimeUpdated: function (e) {
const startTime = e.currentTime
const leaveTime = e.duration - startTime
this.setData({
"music.start": util.formatM(startTime),
"music.leave": util.formatM(leaveTime)
})
if(!this.data.isStopSlider) {
const proLen = (e.currentTime / e.duration * 100).toFixed(2)
this.setData({
slideLen: proLen
})
}
},
/**
* !!! 解决滑动播放条时的卡顿问题 !!! --- start
*/
// 禁止播放条随着音乐播放滚动
stopSlider: function () {
this.setData({
isStopSlider: true
})
},
// 音频播放条改变 - 手动滑动滚动条停止
timeSliderChanged: function (e) {
this.setData({
isStopSlider: false
})
if (!this.data.music.length)
return;
var time = this.data.music.length * e.detail.value / 100;
// 音频跳转到指定位置
bgMusic.seek(time)
},
/**
* !!! 解决滑动播放条时的卡顿问题 --- end
*/
// 开始播放-首次进入
audioInitPlay: function () {
App.globalData.opusSalt = this.data.opusSalt
//监听音乐自然播放结束
bgMusic.onEnded(() => {
// 如果没有下一个直接赋值并禁止播放
if(!this.data.hasNxt) {
let _endTime = this.data.endVideoTime
let idx = 0
let _timer = setInterval(()=>{
if(idx > 1) {
clearInterval(_timer)
}
this.setData({
isPlay: false,
isEnd: true,
"music.start": "00:00",
"music.leave": _endTime
})
console.log(this.data.music)
idx ++
}, 50)
} else {
this.playNxt()
}
})
//监听音乐播放
bgMusic.onPlay(() => {
console.log('onPlay')
if(this.data.music.start == "00:00") {
this.setData({
"music.leave": util.formatM(bgMusic.duration),
isPlay: true
})
}
this.playAudio()
})
// 监听背景音频暂停事件
bgMusic.onPause(() => {
this.setData({
isPlay: false
})
// App.globalData.opusSalt = 0
})
//监听背景音频停止事件 --- 实际监听时，监听不到悬浮框关闭，但依然保留了该字段
bgMusic.onStop(() => {
this.stopAudio()
App.globalData.opusSalt = 0
})
},
// 开始播放-重复进入
audioInitAgain: function() {
// true - 暂停中 false - 播放中
this.setData({
endVideoTime: util.formatM(bgMusic.duration)
})
console.log(this.data.endVideoTime)
if(bgMusic.paused) {
bgMusic.play()
let timer = setTimeout(() => {
clearTimeout(timer)
//监听音乐播放
bgMusic.onPlay(() => {
this.playAudio()
})
}, 30)
} else {
bgMusic.onTimeUpdate(() => {
this.audioTimeUpdated(bgMusic)
})
}
},
//暂停
pauseAudio: function () {
bgMusic.pause();
},
// 继续播放
playAudio: function () {
// 监听音频播放进度
bgMusic.onTimeUpdate(() => {
this.audioTimeUpdated(bgMusic)
})
bgMusic.play() //播放音乐
},
// 背景音乐浮窗关闭，重置数据 -- 实际监听不到悬浮框关闭事件
stopAudio: function() {
this.setData({
isStop: true,
isPlay: false,
"music.start": "00:00",
"music.leave": this.data.music.long,
slideLen: 0
})
},
// 上一首
playPer() {
if(!this.data.hasPre) return
wx.redirectTo({
url: `XX/audioPlayer?albumCode=${encodeURIComponent(this.data.albumCode)}&playerUrl=${encodeURIComponent(this.data.perMusicMsg.opusUrl)}&playerName=${encodeURIComponent(this.data.perMusicMsg.opusName)}&playerSinger=${encodeURIComponent(this.data.singer)}&playerLong=${this.data.perMusicMsg.opusLength}&opusSalt=${this.data.perMusicMsg.opusSalt}&idx=${this.data.idx - 1}&isTry=0`
})
},
// 下一首
playNxt() {
if(!this.data.hasNxt) return
wx.redirectTo({
url: `XXX/audioPlayer?albumCode=${encodeURIComponent(this.data.albumCode)}&playerUrl=${encodeURIComponent(this.data.nxtMusicMsg.opusUrl)}&playerName=${encodeURIComponent(this.data.nxtMusicMsg.opusName)}&playerSinger=${encodeURIComponent(this.data.singer)}&playerLong=${this.data.nxtMusicMsg.opusLength}&opusSalt=${this.data.nxtMusicMsg.opusSalt}&idx=${this.data.idx + 1}&isTry=0`
})
},
// 音乐数据处理
musicListHandle() {
try {
let value = wx.getStorageSync('ai_cloud_book_album')
if (value) {
let _book = JSON.parse(value)
let _hasPer = Boolean(this.data.idx)
let _hasNxt = this.data.idx === _book.length - 1 ? 0 : 1
let _perMusicMsg = {}
let _nxtMusicMsg = {}
if(_hasPer) _perMusicMsg = _book[this.data.idx - 1]
if(Boolean(_hasNxt)) _nxtMusicMsg = _book[this.data.idx + 1]
this.setData({
musicList: _book,
hasPre: _hasPer,
hasNxt: Boolean(_hasNxt),
perMusicMsg: _perMusicMsg,
nxtMusicMsg: _nxtMusicMsg
})
}
} catch (e) {
// Do something when catch error
}
// wx.setStorageSync("ai_cloud_book_album", JSON.stringify(this.data.listenList))
}
})
音频-暂停/播放(信息配置) ppAudio()
音频实时信息 audioTimeUpdated()
音频播放条改变 timeSliderChanged()
开始播放-首次进入 audioInitPlay()
开始播放-重复进入 audioInitAgain()
暂停 pauseAudio()
继续播放 playAudio()
函数作用都已经在注释里标注了，有疑问的地方欢迎留言~~
