微信小程序音乐播放器：实现歌曲播放、歌词同步和进度控制
// pages/detail/detail.js var player = wx.createInnerAudioContext(); Page({ /**
- 页面的初始数据
- isPlay: true, 播放状态
- songs: [], 上个页面通过全局变量传过来的歌曲数组
- index: 0, 操作界面歌曲所在数组中的编号
- lyrics: [], 每次解析到的歌词和时间数组
- scrollTop: 0, 竖向滚动条的位置
- currentTime: 0, 当前播放时间
- currentLyric: 0 目前被选中歌词是第几条
/
data: {
isPlay: true,
songs: [],
index: 0,
lyrics: [],
scrollTop: 0,
currentTime: 0,
currentLyric: 0
},
//上一首
prev() {
var index = this.data.index;
if (index == 0) {
index = this.data.songs.length - 1;
} else {
index--;
}
this.data.index = index;
this.play(this.data.songs[index].id);
//更改歌曲名与歌手
this.setData({
song: this.data.songs[index],
index: index
});
},
//下一首
next() {
var index = this.data.index;
if (index == this.data.songs.length - 1) {
index = 0;
} else {
index++;
}
this.data.index = index;
this.play(this.data.songs[index].id);
//更改歌曲名与歌手
this.setData({
song: this.data.songs[index],
index: index
});
},
clickPlay() {
var isPlay = this.data.isPlay;
if (isPlay == true) { //处于播放点击就暂停
player.pause();
} else { //处于暂停点击就播放
player.play();
}
this.setData({
isPlay: !isPlay
});
},
//歌词
lrc(songId) {
wx.request({
url:
httpss://music.163.com/api/song/lyric?os=pc&id=${songId}&lv=-1&kv=-1&tv=-1, success: (res) => { console.log(res); var str = res.data.lrc.lyric; var lyrics = []; console.log(str); //将歌词数组分割成一行一行 var lines = str.split("\n"); for (var i = 0; i < lines.length - 1; i++) { var line = lines[i]; console.log(line); //将时间与歌词分割开 var timeLyric = line.split("]"); //取出时间并转成毫秒数 var time = timeLyric[0].trim().replaceAll("[", ""); var minute = parseInt(time.split(":")[0]); var second = parseFloat(time.split(":")[1]); var seconds = minute * 60 * 1000 + second * 1000; //取出歌词 var lyric = timeLyric[1].trim(); // console.log(time,lyric); var gqc = {}; gqc.time = seconds; gqc.lyric = lyric; lyrics.push(gqc); } this.setData({ lyrics: lyrics, }); console.log(lyrics); } }) }, //进度条跟随 follow(e) { console.log(e.detail.value); var value = e.detail.value; player.seek(value / 1000); }, //播放 play(songId) { this.lrc(songId); var src =https://music.163.com/song/media/outer/url?id=${songId}.mp3; player.src = src; console.log(src); player.play(); //设置定时器 var task = setInterval(() => { var playTime = parseInt(player.currentTime) * 1000; this.setData({ //转换成毫秒 currentTime: playTime }); //歌词动起来，用for循环 var lyrics = this.data.lyrics; for (var i = 0; i < lyrics.length - 1; i++) { if (playTime > lyrics[i].time && playTime < lyrics[i + 1].time) { this.setData({ currentLyric: i }); break; } //歌词向下滚动，根据行号数来移动 if (this.data.currentLyric >= 6) { this.setData({ scrollTop: (this.data.currentLyric - 3) * 20 }); } } }, 100); //播放错误时提示 player.onError(() => { wx.showToast({ title: '出现错误', icon: 'error', duration: 2000 }) }); //播放结束 player.onEnded(() => { clearInterval(task); this.setData({ isPlay: false, scrollTop: 0, currentTime: 0, currentLyric: 0 }); }); }, /* - 生命周期函数--监听页面加载 / onLoad(options) { //从全局变量中取出来 this.data.songs = getApp().globalData.songs; var index = options.index; this.data.index = index; console.log(options); //获取歌手歌曲名 this.setData({ song: this.data.songs[index], index: index }); this.play(this.data.songs[index].id); }, /*
- 生命周期函数--监听页面初次渲染完成 / onReady() { }, /*
- 生命周期函数--监听页面显示 / onShow() { }, /*
- 生命周期函数--监听页面隐藏 / onHide() { }, /*
- 生命周期函数--监听页面卸载 / onUnload() { }, /*
- 页面相关事件处理函数--监听用户下拉动作 / onPullDownRefresh() { }, /*
- 页面上拉触底事件的处理函数 / onReachBottom() { }, /*
- 用户点击右上角分享 */ onShareAppMessage() { } })
// index怎么一直传过来的数据为0 这可能是因为在传递参数时出现了问题，导致传递的参数值为0。建议检查传递参数的代码，确保正确地传递了参数，并且参数值正确。另外，可以在接收参数的页面中使用console.log()函数来打印传递的参数值，以确认它是否正确传递。
原文地址: https://www.cveoy.top/t/topic/oRcL 著作权归作者所有。请勿转载和采集!