관련 학습 추천: WeChat 미니 프로그램 튜토리얼
작가는 프론트엔드 군인입니다. 한동안 미니 프로그램을 공부한 후, 개인적으로 모바일 소프트웨어를 만들기로 결심했습니다. 기술을 연습하기 위해 휴대폰 소프트웨어를 모방합니다. , 저도 음악을 좋아하고 다양한 음악 플랫폼의 작은 프로그램이 상대적으로 단순하다는 것을 알게 되었기 때문에 모방하고 배우기 위해 이 방향을 선택했습니다. 이러한 문제를 해결한 후에 나에게도 약간의 이득이 있습니다. 오늘은 이 작은 프로그램에서 음악 재생의 가장 어려운 부분에 대한 다양한 문제와 솔루션을 여러분과 공유하겠습니다.
먼저 백엔드 API는 큰 회사에서 제공하기 때문에 이 프로젝트를 선택해준 이 프로젝트의 API 제공업체인 Binaryify
에게 감사의 말씀을 전하고 싶습니다. 데이터가 필요할 때 일부 인터페이스만 시작하면 됩니다. 나 같은 초보자에게는 간단한 프런트 엔드 로직을 작성하는 것이 더 적합합니다.
재생 페이지에서는 많은 작업(가사 처리 및 표시, 진행률 표시줄 빨리 감기 및 되감기 등)을 처리해야 하고 함정도 많기 때문에 최대한 명확하게 설명하려면 , 이번 글은 주로 소개와 음악 재생에 초점을 맞췄습니다. 이 프로젝트와 관련된 다양한 작업은 이 프로젝트의 다른 페이지에서 자세히 설명하겠습니다. 독자 여러분의 양해 부탁드립니다.
github.com/shengliangg…
Yuncun 및 비디오 모듈은 아직 개발되지 않았습니다. 이 프로젝트는 수시로 업데이트될 예정입니다. 나중에 시간이 나면 업데이트하겠습니다. 프로젝트 사용 문서 작성
음악 재생에 대한 여러 인터페이스 요청에는 거의 모든 페이지에 노래 ID가 있어야 합니다. 이 프로젝트에서는 재생 페이지가 독립된 페이지로 존재합니다. 다른 페이지가 재생 페이지로 이동할 때 노래 ID
이 프로젝트는 편의상 많은 인터페이스 요청을 사용합니다. utils에 캡슐화했습니다. 폴더에 있는 api.js 파일에서 페이지에 있는 인터페이스 관리 파일을 참조하세요. utils文件夹中的api.js文件中，再在页面中引用接口管理文件。
// method(HTTP 请求方法)，网易云API提供get和post两种请求方式
const GET = 'GET';
const POST = 'POST';
// 定义全局常量baseUrl用来存储前缀
const baseURL = 'http://neteasecloudmusicapi.zhaoboy.com';
function request(method, url, data) {
return new Promise(function (resolve, reject) {
let header = { //定义请求头
'content-type': 'application/json',
};
wx.request({
url: baseURL + url,
method: method,
data: method === POST ? JSON.stringify(data) : data,
header: header,
success(res) {
//请求成功
//判断状态码---errCode状态根据后端定义来判断
if (res.data.code == 200) { //请求成功
resolve(res);
} else {
//其他异常
reject('运行时错误,请稍后再试');
}
},
fail(err) {
//请求失败
reject(err)
}
})
})
}
const API = {
getSongDetail: (data) => request(GET, `/song/detail`, data), //获取歌曲详情
getSongUrl:(data) => request(GET, `/song/url`, data), //获取歌曲路径
};
module.exports = {
API: API
}复制代码这里只展示了两个在本页面用到的请求API，在需要接口请求的页面引入就可以使用了
const $api = require('../../utils/api.js').API;
本页面的使用到的data数据源
data: {
musicId: -1,//音乐id
hidden: false, //加载动画是否隐藏
isPlay: true, //歌曲是否播放
song: [], //歌曲信息
hiddenLyric: true, //是否隐藏歌词
backgroundAudioManager: {}, //背景音频对象
duration: '', //总音乐时间（00:00格式）
currentTime: '00:00', //当前音乐时间（00:00格式）
totalProcessNum: 0, //总音乐时间 （秒）
currentProcessNum: 0, //当前音乐时间（秒）
storyContent: [], //歌词文稿数组，转化完成用来在页面中使用
marginTop: 0, //文稿滚动距离
currentIndex: 0, //当前正在第几行
noLyric: false, //是否有歌词
slide: false //进度条是否在滑动
},复制代码其他页面跳转举例：其他页面跳转到play页面，携带musicId参数
//播放音乐
playMusic: function (e) {
let musicId = e.currentTarget.dataset.in.id // 获取音乐id
// 跳转到播放页面
wx.navigateTo({
url: `../play/play?musicId=${musicId}`
})
},复制代码在play.js的onLoad生命周期函数中，通过options拿到其他页面传过来的musicId这个参数，并且调用play()函数
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
const musicId = options.musicId //获取到其他页面传来的musicId
this.play(musicId) //调用play方法
},复制代码
play()函数需要一个形参：musicId
//播放音乐
play(musicId) {
const that = this;//将this对象复制给that
that.setData({
hidden: false,
musicId
})
app.globalData.musicId = musicId // 将当前音乐id传到全局
// 通过musicId发起接口请求，请求歌曲详细信息
//获取到歌曲音频，则显示出歌曲的名字，歌手的信息，即获取歌曲详情；如果失败，则播放出错。
$api.getSongDetail({ ids: musicId }).then(res => {
// console.log('api获取成功，歌曲详情：', res);
if (res.data.songs.length === 0) {
that.tips('服务器正忙~~', '确定', false)
} else { //获取成功
app.globalData.songName = res.data.songs[0].name
that.setData({
song: res.data.songs[0], //获取到歌曲的详细内容，传给song
})
wx.request({ // 获取歌词
url: 'http://47.98.159.95/m-api/lyric',
data: {
id: musicId
},
success: res => {
if (res.data.nolyric || res.data.uncollected) { //该歌无歌词,或者歌词未收集
// console.log("无歌词")
that.setData({
noLyric: true
})
}
else { //如果有歌词，先调用sliceNull()去除空行，再调用parseLyric()格式化歌词
that.setData({
storyContent: that.sliceNull(that.parseLyric(res.data.lrc.lyric))
})
}
}
})
// 通过音乐id获取音乐的地址，请求歌曲音频的地址，失败则播放出错，成功则传值给createBackgroundAudioManager(后台播放管理器，让其后台播放)
$api.getSongUrl({ id: musicId }).then(res => {
//请求成功
if (res.data.data[0].url === null) { //获取出现错误出错
that.tips('音乐播放出了点状况~~', '确定', false)
} else {
// 调用createBackgroundAudioManager方法将歌曲url传入backgroundAudioManager
that.createBackgroundAudioManager(res.data.data[0]);
}
})
.catch(err => {
//请求失败
that.tips('服务器正忙~~', '确定', false)
})
}
})
.catch(err => {
//请求失败
that.tips('服务器正忙~~', '确定', false)
})
},复制代码const $api = require('../../utils/api .js').API;🎜data 데이터 소스🎜 showLyric() {
this.setData({
hiddenLyric: !this.data.hiddenLyric
})
},复制代码//格式化歌词
parseLyric: function (text) {
let result = [];
let lines = text.split('\n'), //切割每一行
pattern = /\[\d{2}:\d{2}.\d+\]/g;//用于匹配时间的正则表达式，匹配的结果类似[xx:xx.xx]
// console.log(lines);
//去掉不含时间的行
while (!pattern.test(lines[0])) {
lines = lines.slice(1);
};
//上面用'\n'生成数组时，结果中最后一个为空元素，这里将去掉
lines[lines.length - 1].length === 0 && lines.pop();
lines.forEach(function (v /*数组元素值*/, i /*元素索引*/, a /*数组本身*/) {
//提取出时间[xx:xx.xx]
var time = v.match(pattern),
//提取歌词
value = v.replace(pattern, '');
// 因为一行里面可能有多个时间，所以time有可能是[xx:xx.xx][xx:xx.xx][xx:xx.xx]的形式，需要进一步分隔
time.forEach(function (v1, i1, a1) {
//去掉时间里的中括号得到xx:xx.xx
var t = v1.slice(1, -1).split(':');
//将结果压入最终数组
result.push([parseInt(t[0], 10) * 60 + parseFloat(t[1]), value]);
});
});
// 最后将结果数组中的元素按时间大小排序，以便保存之后正常显示歌词
result.sort(function (a, b) {
return a[0] - b[0];
});
return result;
},复制代码play.js의 onLoad 라이프 사이클 함수에서 옵션을 통해 다른 페이지에서 전달된 musicId 이 매개변수를 지정하고 play() 함수🎜 sliceNull: function (lrc) {
var result = []
for (var i = 0; i < lrc.length; i++) {
if (lrc[i][1] !== "") {
result.push(lrc[i]);
}
}
return result
},复制代码
play()이 함수에는 형식 매개변수인 musicId가 필요합니다. 이 형식 매개변수는 후속 인터페이스 요청에 사용됩니다.🎜tips(content, confirmText, isShowCancel) {
wx.showModal({
content: content,
confirmText: confirmText,
cancelColor: '#DE655C',
confirmColor: '#DE655C',
showCancel: isShowCancel,
cancelText: '取消',
success(res) {
if (res.confirm) {
// console.log('用户点击确定')
wx.navigateTo({
url: '/pages/find/find'
})
} else if (res.cancel) {
// console.log('用户点击取消')
}
}
})
},复制代码wx.request做的请求)，请求结果如果有歌词，就将请求回来的歌词数据设置到数据源中的storyContent中，这时的歌词还没有经过处理，之后还要处理一下歌词，先调用parseLyric()格式化歌词，再调用sliceNull()去除空行。
如果该歌没有歌词（情况比如：钢琴曲这种纯音乐无歌词的、或者一些非常小众的个人歌曲没有上传歌词的），就设置数据源中的noLyric为true,设置了之后，页面就会显示：纯音乐，无歌词。
showLyric() {
this.setData({
hiddenLyric: !this.data.hiddenLyric
})
},复制代码在请求回歌词之后，还需要对歌词进行分行处理
//格式化歌词
parseLyric: function (text) {
let result = [];
let lines = text.split('\n'), //切割每一行
pattern = /\[\d{2}:\d{2}.\d+\]/g;//用于匹配时间的正则表达式，匹配的结果类似[xx:xx.xx]
// console.log(lines);
//去掉不含时间的行
while (!pattern.test(lines[0])) {
lines = lines.slice(1);
};
//上面用'\n'生成数组时，结果中最后一个为空元素，这里将去掉
lines[lines.length - 1].length === 0 && lines.pop();
lines.forEach(function (v /*数组元素值*/, i /*元素索引*/, a /*数组本身*/) {
//提取出时间[xx:xx.xx]
var time = v.match(pattern),
//提取歌词
value = v.replace(pattern, '');
// 因为一行里面可能有多个时间，所以time有可能是[xx:xx.xx][xx:xx.xx][xx:xx.xx]的形式，需要进一步分隔
time.forEach(function (v1, i1, a1) {
//去掉时间里的中括号得到xx:xx.xx
var t = v1.slice(1, -1).split(':');
//将结果压入最终数组
result.push([parseInt(t[0], 10) * 60 + parseFloat(t[1]), value]);
});
});
// 最后将结果数组中的元素按时间大小排序，以便保存之后正常显示歌词
result.sort(function (a, b) {
return a[0] - b[0];
});
return result;
},复制代码 sliceNull: function (lrc) {
var result = []
for (var i = 0; i < lrc.length; i++) {
if (lrc[i][1] !== "") {
result.push(lrc[i]);
}
}
return result
},复制代码再接着通过id去获取歌曲的播放路径，获取到音频的数据源后，则调用createBackgroundAudioManager()函数，传入刚刚获取到的音频数据源。（下文详细介绍）
如果其中的任意一个环节出现了问题，则会弹出提示信息，调用tips()函数,并返回主页
wx.showModal,写成了一个tips()函数，在想给提示对话框的时候，直接调用tips()函数就可以，在出现错误之后，用户点击确定会触发回调函数中的res.confirm判断，然后回到首页，这里因为网易云手机app的导航在头部，所以我是用的自定义组件做的导航，没有使用 tabBar,页面跳转用的wx.navigateTo(),如果大家使用了tabBar,那么跳转就应该换成wx.switchTab()tips(content, confirmText, isShowCancel) {
wx.showModal({
content: content,
confirmText: confirmText,
cancelColor: '#DE655C',
confirmColor: '#DE655C',
showCancel: isShowCancel,
cancelText: '取消',
success(res) {
if (res.confirm) {
// console.log('用户点击确定')
wx.navigateTo({
url: '/pages/find/find'
})
} else if (res.cancel) {
// console.log('用户点击取消')
}
}
})
},复制代码loading标签，通过数据源中的hidden,来控制loading动画是否显示，一开始设置为false，，然后在数据请求完成后，将其更改为true。wxml中：
<loading hidden="{{hidden}}">
拼命加载中...
</loading>复制代码上面提到，在接口请求回音频路径之后，就会调用这个函数，把请求会的数据作为参数传过来，那现在就来剖析这个函数吧。
// 背景音频播放方法
createBackgroundAudioManager(res) {
const that = this;//将this对象复制给that
const backgroundAudioManager = wx.getBackgroundAudioManager(); //调用官方API获取全局唯一的背景音频管理器。
console.log(backgroundAudioManager.src);
if (res.url != null) {
if (backgroundAudioManager.src != res.url) { //首次放歌或者切歌
that.setData({ //重设一下进度，避免切歌部分数据更新过慢
currentTime: '00:00', //当前音乐时间（00:00格式）
currentProcessNum: 0, //当前音乐时间（秒）
marginTop: 0, //文稿滚动距离
currentIndex: 0, //当前正在第几行
})
backgroundAudioManager.title = that.data.song.name; //把title音频标题给实例
backgroundAudioManager.singer = that.data.song.ar[0].name; //音频歌手给实例
backgroundAudioManager.coverImgUrl = that.data.song.al.picUrl; //音频图片 给实例
backgroundAudioManager.src = res.url; // 设置backgroundAudioManager的src属性，音频会立即播放
let musicId = that.data.musicId
app.globalData.history_songId = that.unique(app.globalData.history_songId, musicId) //去除重复历史
}
that.setData({
isPlay: true, //是否播放设置为true
hidden: true, //隐藏加载动画
backgroundAudioManager
})
}
app.globalData.backgroundAudioManager = backgroundAudioManager
//监听背景音乐进度更新事件
backgroundAudioManager.onTimeUpdate(() => {
that.setData({
totalProcessNum: backgroundAudioManager.duration,
currentTime: that.formatSecond(backgroundAudioManager.currentTime),
duration: that.formatSecond(backgroundAudioManager.duration)
})
if (!that.data.slide) { //如果进度条在滑动，就暂停更新进度条进度，否则会出现进度条进度来回闪动
that.setData({
currentProcessNum: backgroundAudioManager.currentTime,
})
}
if (!that.data.noLyric) { //如果没有歌词，就不需要调整歌词位置
that.lyricsRolling(backgroundAudioManager)
}
})
backgroundAudioManager.onEnded(() => { //监听背景音乐自然结束事件，结束后自动播放下一首。自然结束，调用go_lastSong()函数，即歌曲结束自动播放下一首歌
that.nextSong();
})
},复制代码音频播放函数里面的逻辑相对比较复杂，大致思路如下：
BackgroundAudioManager 实例，通过 wx.getBackgroundAudioManager 获取。
然后这里就需要做一个判断，因为当调用本方法有几种情况，一是首次放歌或切换歌曲、二是进来没切换歌曲，所以要判断当前音乐id获取url地址是否等于backgroundAudioManager.src，如果不相等，那就是第一种情况，需要将歌曲的musicId调用unique()去重方法，存入全局的history_songId[]，这个历史歌单主要用来给用户切换上一首歌曲用的，后面会详细讲
然后给实例设置title、singer、coverImgURL、src、当设置了新的 src 时，音乐会自动开始播放，设置这些属性，主要用于原生音频播放器的显示以及分享，（注意title必须设置），设置之后，在手机上使用小程序播放音乐，就会出现一个原生音频播放器，如图：
感觉还不错，可惜的是，好像一直目前为止，这个原生的音频播放器都不能设置歌词，只能设置一下基本属性，这也是一个小遗憾，希望微信团队日后能够完善它。
作用：用户每播放一首歌，就将其存入历史列表中，在存入之前，先判断这首歌是否已经存在，如果不存在，直接存入到历史歌单数组后面，如果这首歌已经存在，那就先去除老记录，存入新纪录。
// 历史歌单去重
unique(arr, musicId) {
let index = arr.indexOf(musicId) //使用indexOf方法，判断当前musicId是否已经存在，如果存在，得到其下标
if (index != -1) { //如果已经存在在历史播放中，则删除老记录，存入新记录
arr.splice(index, 1)
arr.push(musicId)
} else {
arr.push(musicId) //如果不存在，则直接存入历史歌单
}
return arr //返回新的数组
},复制代码backgroundAudioManager.onTimeUpdate()监听背景音乐的进度更新，页面进度条的秒数更新就和这有关!
<view class="page-slider">
<view>
{{currentTime}}
</view>
<slider class="slider_middle" bindchange="end" bindtouchstart="start" max="{{totalProcessNum}}" min="0" backgroundColor="rgba(255,255,255,.3)"
activeColor="rgba(255,255,255,.8)" value="{{currentProcessNum}}" block-size="12"></slider>
<view>
{{duration}}
</view>
</view>复制代码backgroundAudioManager.currentTime和backgroundAudioManager.currentTime分别会返回音频播放位置和音频长度，单位为秒，而进度条左边的当前时间和右边的歌曲总时长需要显示成00:00的格式，所以使用formatSecond()来格式化秒数
// 格式化时间
formatSecond(second) {
var secondType = typeof second;
if (secondType === "number" || secondType === "string") {
second = parseInt(second);
var minute = Math.floor(second / 60);
second = second - minute * 60;
return ("0" + minute).slice(-2) + ":" + ("0" + second).slice(-2);
} else {
return "00:00";
}
},复制代码
wxml:
<!-- 歌词 -->
<!-- 需要设置高度，否则scroll-top可能失效 -->
<scroll-view
hidden="{{hiddenLyric}}"
scroll-y="true"
scroll-with-animation='true'
scroll-top='{{marginTop}}'
class="body-scroll"
>
<view class='contentText'>
<view class="contentText-noLyric" wx:if="{{noLyric==true}}">纯音乐，无歌词 </view>
<block wx:for='{{storyContent}}' wx:key="index">
<view class="lyric">
<view class="lyric-text {{currentIndex == index ? 'currentTime' : ''}}">{{item[1]}}</view>
</view>
</block>
</view>
</scroll-view>复制代码marginTop,这个值作用于scroll-view的scroll-top,实现自动滚动的，需要注意的是，scroll-view需要设置高度，否则scroll-top可能失效currentIndex是否和页面for循环中的index值是否相等，来给当前唱的歌词加上类名，使其高亮显示。 // 歌词滚动方法
lyricsRolling(backgroundAudioManager) {
const that = this
// 歌词滚动
that.setData({
marginTop: (that.data.currentIndex - 3) * 39
})
// 当前歌词对应行颜色改变
if (that.data.currentIndex != that.data.storyContent.length - 1) {//不是最后一行
// var j = 0;
for (let j = that.data.currentIndex; j < that.data.storyContent.length; j++) {
// 当前时间与前一行，后一行时间作比较， j:代表当前行数
if (that.data.currentIndex == that.data.storyContent.length - 2) { //倒数第二行
//最后一行只能与前一行时间比较
if (parseFloat(backgroundAudioManager.currentTime) > parseFloat(that.data.storyContent[that.data.storyContent.length - 1][0])) {
that.setData({
currentIndex: that.data.storyContent.length - 1
})
return;
}
} else {
if (parseFloat(backgroundAudioManager.currentTime) > parseFloat(that.data.storyContent[j][0]) && parseFloat(backgroundAudioManager.currentTime) < parseFloat(that.data.storyContent[j + 1][0])) {
that.setData({
currentIndex: j
})
return;
}
}
}
}
},复制代码在进度条开始滑动的时候将数据源中的slide设置为true，这时backgroundAudioManager.onTimeUpdate()中的更新数据源currentProcessNum就不会再进行，这样就缓解了进度条抖动的问题。
抖动问题：如图，在拖动进度条想快进或者快退音乐的时候，可以看到小滑块非常明显的抖动，这是由于onTimeUpdate()在不停的监听并更改数据源中的currentProcessNum，导致拖动过程中的小滑块不停的前后跳动。
//进度条开始滑动触发
start: function (e) {
// 控制进度条停，防止出现进度条抖动
this.setData({
slide: true
})
},复制代码结束滑动的时候，通过backgroundAudioManager.seek(position)来让音频跳到指定位置，然后判断当前歌词到了多少行，立马设置数据源中的currentIndex,让歌词就会在上面的歌词跳转方法中改变marginTop的值，歌词就会跳转到相应的位置。
//结束滑动触发
end: function (e) {
const position = e.detail.value
let backgroundAudioManager = this.data.backgroundAudioManager //获取背景音频实例
// console.log(position)
backgroundAudioManager.seek(position) //改变歌曲进度
this.setData({
currentProcessNum: position,
slide: false
})
// 判断当前是多少行
for (let j = 0; j < this.data.storyContent.length; j++) {
// console.log('当前行数', this.data.currentIndex)
// console.log(parseFloat(backgroundAudioManager.currentTime))
// console.log(parseFloat(this.data.storyContent[j][0]))
// 当前时间与前一行，后一行时间作比较， j:代表当前行数
if (position < parseFloat(this.data.storyContent[j][0])) {
this.setData({
currentIndex: j - 1
})
return;
}
}
}复制代码backgroundAudioManager.onEnded()监听背景音乐的自然结束，结束就调用nextSong()函数,这个函数用来播放待放列表里面的歌。
播放前一首歌，那么现在这首歌就变成了下一首要放的歌，因为每一首当前播放的歌曲都会放到被push()到历史列表，那么将当前歌曲（把历史列表数组里面的最后一项从数组删除，并将其头插加入到待播放列表）放入待放歌单，然后调用play()方法就好了(传入删除了最后一项之后新的历史列表数组的最后一项，即原历史列表的倒数第二项)
// 播放上一首歌曲
beforeSong() {
if (app.globalData.history_songId.length > 1) { //前面有歌
app.globalData.waitForPlaying.unshift(app.globalData.history_songId.pop())//将当前播放歌曲从前插入待放列表
this.play(app.globalData.history_songId[app.globalData.history_songId.length - 1]) //播放历史歌单歌曲
} else {
this.tips('前面没有歌曲了哦', '去选歌', true)
}
},复制代码播放下一首歌曲，如果待播放列表数组长度大于0，那就把数组第一个元素删除并返回传入到play()方法中
// 下一首歌曲
nextSong() {
if (app.globalData.waitForPlaying.length > 0) {
this.play(app.globalData.waitForPlaying.shift())//删除待放列表第一个元素并返回播放
} else {
this.tips('后面没有歌曲了哦', '去选歌', true)
}
},复制代码比较简单，拿到数据原中的backgroundAudioManager,通过其自带的pause()、play()的方法就可以实现播放和暂停
// 播放和暂停
handleToggleBGAudio() {
const backgroundAudioManager = this.data.backgroundAudioManager
//如果当前在播放的话
if (this.data.isPlay) {
backgroundAudioManager.pause();//暂停
} else { //如果当前处于暂停状态
backgroundAudioManager.play();//播放
}
this.setData({
isPlay: !this.data.isPlay
})
},复制代码本项目并不复杂，适合初学者上手，因为免去了写复杂的后端，只用写好js逻辑就可以，并且在听到自己仿的小程序可以放出音乐的时候会有很大的成就感，但是同时还是存在一些小坑等待大家处理的，在写本小程序的时候，我也是遇到了挺多问题的，遇到问题先思考，想不出来，就去看看别的大佬写的经验分享，由于本人经验不是特别丰富，只是浅浅入门，很多问题的解决思考的并不到位，如果个位发现我在代码中有什么bug，欢迎个位读者大大指出，期待我们的共同成长。
相关学习推荐：javascript视频教程
위 내용은 그 당시 NetEase Cloud Music을 모방한 WeChat 애플릿의 관련 재생을 살펴보십시오.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
