发表于2022 年 6 月 13 日
作者 admin 最近在写一个艾美食艾音乐的微信小程序，其中有用到音乐播放的功能，基本播放切换功能已经实现，但是在反复切换歌曲、重新进入歌曲以及单曲循环、列表循环的测试过程中还是发生了bug，特此写一篇文章，捋一下思路.(功能写到后面小程序官方文档将音频这一块全都更新了…) 坑点：由于小程序主体部分没有app.wxml，这就导致小程序不能写一些公共的页面结构，如果有相同的部分，只能封装成组件再引入. 在我们点击歌曲列表中的某首歌的时候，会进入音乐播放界面，当我们退出音乐播放界面，歌曲仍然继续播放，但此时由于退出当前路由，页面data中的数据也已被销毁，当我们再次进入播放界面相当于重新进行页面加载，所以需要我们进行分情况判断，播放歌曲变的较为复杂. 一.存放公共数据 在我们进入音乐播放界面之前要存一下： 当前专辑信息：album(Object) 当前播放列表：playList(Array) 当前播放歌曲的index：playIndex(Number) 播放模式：mode(String) 封面旋转的角度：imgRotate(Number)// app.jsglobalData: {
album: null, // 当前专辑信息
playList: [], // 当前播放列表
playIndex: 0, // 当前播放歌曲index
mode: 'multiple', // 循环模式 multiple: 循环播放, single: 单曲循环
imgRotate: 0, // 封面旋转角度} 二.专辑列表 在专辑列表中点击某个专辑，进入该专辑的歌曲列表，同时将 该专辑的信息 存入globalData.// music.jsgotoSongList(e) {
let item = e.currentTarget.dataset.type
app.globalData.album = item // 将专辑信息存入globalData
wx.navigateTo({
url: '../songlist/songlist'
})
} 三.歌曲列表 在歌曲列表中点击播放某首歌时，进入歌曲播放界面，同时将 该专辑的歌曲列表、当前播放歌曲的index 存入globalData.// songlist.js
// 播放歌曲
play(e) {
app.globalData.playList = this.data.songList
let index = e.currentTarget.dataset.index
app.globalData.playIndex = index
let url = '../player/player'
wx.navigateTo({
url: url
})
} 四.歌曲播放页面 需要在data中存放一下信息： 当前歌曲信息：item(Object) 歌曲解析后的歌词：parseLyric(String) 当前播放进度点的歌词：lineLyric(String) 播放模式：mode(String) 封面旋转的角度：imgRotate(Number) 进度条的值：SliderValue(Number) 音频的长度：duration(Number) 音频的播放位置：currentPosition(Number) 播放状态：playStatus(Boolean)const app = getApp();
var Base64 = require('../../utils/base64.js').Base64
var Lyric = require('../../utils/lyric-parse.js')
Page({
data: {
item: {}, // 当前歌曲信息
parseLyric: '', // 歌曲解析后的歌词
lineLyric: '', // 当前播放进度点的歌词
mode: '', // 播放模式
imgRotate: 0, // 封面旋转的角度
sliderValue: 0, // 进度条的值
duration: 0, // 音频的长度（单位：s）
currentPosition: 0, // 音频的播放位置（单位：s）
playStatus: 0, // 播放状态
timee: 0, // 定时器 根据歌曲进度改变slider进度
coverImg: '', // 封面图片
isDel: false, // 当前列表是否只有一首歌曲
},
onLoad() {
let item = app.globalData.playList[app.globalData.playIndex]
let album = app.globalData.album
// 获取背景音频信息
const backgroundAudioManager = wx.getBackgroundAudioManager()
console.log(backgroundAudioManager, 'backgroundAudioManager')
if (backgroundAudioManager.src == item.src) { // 继续听歌
console.log('继续听歌')
} else { // 播放新歌
app.globalData.imgRotate = 0
console.log('播放新歌')
backgroundAudioManager.title = item.name
backgroundAudioManager.epname = album.name
backgroundAudioManager.singer = item.author
backgroundAudioManager.coverImgUrl = album.poster
// 设置了 src 之后会自动播放
backgroundAudioManager.src = item.src
}
let lyric = Base64.decode(item.lyric)
this.setData({
item: item,
coverImg: album.poster,
playStatus: !backgroundAudioManager.paused,
duration: this.stotime(backgroundAudioManager.duration),
currentPosition: this.stotime(backgroundAudioManager.currentTime),
parseLyric: new Lyric(lyric, this.handleLyric),
mode: app.globalData.mode,
imgRotate: app.globalData.imgRotate
})
this.data.parseLyric.seek(backgroundAudioManager.currentTime*1000)
console.log(this.data.playStatus, 'playStatus')
if (backgroundAudioManager.paused) {
this.data.parseLyric.togglePlay()
} else if (!this.data.timee) {
this.toRotate()
}
backgroundAudioManager.onPlay(this.onPlay) // 监听背景音频播放事件
backgroundAudioManager.onPause(this.onPause) // 监听背景音频暂停事件
backgroundAudioManager.onTimeUpdate(this.onTimeUpdate) // 监听背景音频播放进度更新事件
backgroundAudioManager.onEnded(this.onEnded) // 监听背景音频自然播放结束事件
wx.setNavigationBarTitle({
title: item.name
})
console.log(app.globalData.playList.length, 'app.globalData.playList.length')
if (app.globalData.playList.length == 1) {
this.setData({
isDel: true
})
}
},
handleLyric({lineNum, txt}) { // 歌词回调
console.log(lineNum, txt, 'txt')
this.setData({
lineLyric: txt
})
},
onPlay() {
const backgroundAudioManager = wx.getBackgroundAudioManager()
console.log('onPlay')
console.log(backgroundAudioManager.duration, 'backgroundAudioManager.duration')
this.setData({
playStatus: true
})
this.data.parseLyric.seek(backgroundAudioManager.currentTime*1000)
this.toRotate()
},
onPause() {
clearInterval(this.data.timee)
this.data.parseLyric.stop()
console.log('onPause')
this.setData({
playStatus: false
})
},
switch() { // 切换歌曲播放状态
if (this.data.playStatus) { // 切换为暂停状态
const backgroundAudioManager = wx.getBackgroundAudioManager()
backgroundAudioManager.pause()
} else { // 切换为播放状态
const backgroundAudioManager = wx.getBackgroundAudioManager()
backgroundAudioManager.play()
}
},
onTimeUpdate() {
const backgroundAudioManager = wx.getBackgroundAudioManager()
let sliderValue = backgroundAudioManager.currentTime / backgroundAudioManager.duration * 100
this.setData({
currentPosition: this.stotime(backgroundAudioManager.currentTime),
sliderValue: sliderValue,
duration: this.stotime(backgroundAudioManager.duration)
})
// this.data.parseLyric.seek(backgroundAudioManager.currentTime*1000)
},
toRotate() {
this.data.timee clearInterval(this.data.timee)
this.data.timee = setInterval(() = {
app.globalData.imgRotate = app.globalData.imgRotate + 0.8
this.setData({
imgRotate: app.globalData.imgRotate
})
}, 35)
},
onEnded() {
console.log('onEnded')
this.setData({
playStatus: false
})
if (this.data.mode == 'multiple') {
this.cutNext()
} else {
const backgroundAudioManager = wx.getBackgroundAudioManager()
// 设置了 src 之后会自动播放
backgroundAudioManager.src = this.data.item.src
}
},
slideChange(e) { // 拖动滑块
let value = e.detail.value
this.setData({
sliderValue: value
})
const backgroundAudioManager = wx.getBackgroundAudioManager()
let currentTime = (value / 100) * backgroundAudioManager.duration
backgroundAudioManager.seek(currentTime)
this.data.parseLyric.seek(currentTime*1000)
},
cutPrev() { // 上一首
this.delSongChange('prev')
},
cutNext() { // 下一首
this.delSongChange('next')
},
delSongChange(type) { // 切换歌曲
if (this.data.duration !== 0 !this.data.isDel) {
if (app.globalData.playList.length 1) {
clearInterval(this.data.timee)
}
this.data.duration = 0
this.data.parseLyric.stop()
if (type == 'prev') {
if (app.globalData.playIndex 0) {
app.globalData.playIndex --
} else {
app.globalData.playIndex = app.globalData.playList.length - 1
}
} else {
if (app.globalData.playIndex app.globalData.playList.length - 1) {
app.globalData.playIndex ++
} else {
app.globalData.playIndex = 0
}
}
let item = app.globalData.playList[app.globalData.playIndex]
wx.setNavigationBarTitle({
title: item.name
})
const backgroundAudioManager = wx.getBackgroundAudioManager()
backgroundAudioManager.title = item.name
backgroundAudioManager.singer = item.author
// 设置了 src 之后会自动播放
backgroundAudioManager.src = item.src
let lyric = Base64.decode(item.lyric)
this.setData({
item: item,
playStatus: !backgroundAudioManager.paused,
parseLyric: new Lyric(lyric, this.handleLyric)
})
this.data.parseLyric.seek(backgroundAudioManager.currentTime*1000)
console.log(this.data.playStatus, 'playStatus')
if (backgroundAudioManager.paused) {
this.data.parseLyric.togglePlay()
}
}
},
// 改变播放模式
changeMode() {
if (this.data.mode == 'multiple') {
this.setData({
mode: 'single'
})
} else {
this.setData({
mode: 'multiple'
})
}
app.globalData.mode = this.data.mode
},
// 时间格式转换
stotime(s) {
let t = ''
if (s -1) {
let min = Math.floor(s / 60) % 60;
let sec = Math.floor(s) % 60
if (min 10) { t += '0' }
t += min + ':'
if (sec 10) { t += '0' }
t += sec
}
return t
},
onUnload() { // 页面卸载
const backgroundAudioManager = wx.getBackgroundAudioManager()
backgroundAudioManager.onTimeUpdate()
backgroundAudioManager.onPlay()
backgroundAudioManager.onPause()
this.data.parseLyric.stop()
clearInterval(this.data.timee)
},
})
分类：
博客转载

1个回答
关注
咨询记录 · 回答于2023-05-24微信小程序上面的音乐和音频怎么删除
您好亲，是这样子的可以通过:1.打开微信小程序，进入需要删除音乐或音频的页面。2. 找到需要删除的音乐或音频，长按该音乐或音频。3. 在弹出的菜单中选择“删除”选项。4. 确认删除操作后，该音乐或音频将被永久删除。需要注意的是，删除后的音乐或音频将无法恢复，因此请谨慎操作。除了删除，微信小程序还提供了其他音乐和音频管理功能，例如上传、下载、收藏等，您可以根据需要进行使用。希望我的回答能够帮助到您，感谢已赞过你对这个回答的评价是？评论
收起
下载百度知道APP，抢鲜体验使用百度知道APP，立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。扫描二维码下载

1个回答
关注
咨询记录 · 回答于2023-06-05怎么关闭小程序音乐和音频你可以尝试以下方法来关闭小程序音乐和音频：1.直接关闭小程序：在小程序的主界面上向下滑动，即可关闭小程序。2.在小程序管理后台中删除音乐或音频资源。如果你是小程序的开发者，你可以登录小程序管理后台，在“开发”->“开发设置”->“代码上传”页面找到相关的音乐或音频资源，并删除它们。3.在小程序代码中删除音乐或音频资源。如果你有小程序的开发权限，你可以通过修改小程序代码来删除音乐或音频资源。具体实现方法可以参考小程序框架（如微信小程序、支付宝小程序等）的开发文档。4.禁用小程序的自动播放功能。不同的小程序可能拥有不同的音乐或音频播放器，在其中查找设置或关闭按钮，尝试禁用自动播放功能。如果没有相关设置或关闭按钮，可以通过下面的方法来禁用自动播放功能。5.取消对小程序的自动播放授权。在微信中，你可以在“设置”->“隐私”->“自动播放授权管理”中，找到小程序并取消其自动播放授权。这样，你再次进入该小程序时，它将不会自动播放音乐或音频。希望以上信息能够帮助你关闭小程序音乐和音频。已赞过你对这个回答的评价是？评论
收起
下载百度知道APP，抢鲜体验使用百度知道APP，立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。扫描二维码下载