微信小程序音乐播放器 - 歌曲详情页

微信小程序音乐播放器 - 歌曲详情页

本页面展示了微信小程序音乐播放器歌曲详情页的功能实现，包括歌曲播放、上一首、下一首、歌词显示、进度条跟随、播放进度展示等功能。

代码示例

// 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: `https://music.163.com/api/song/lyric?os=pc&id=${songId}&lv=-1&kv=-1&tv=-1`,
      success:(res)=>{         
        var str = res.data.lrc.lyric;
        var lyrics = [];
        //将歌词数组分割成一行一行
        var lines = str.split('\n');
        for(var i=0;i<lines.length-1;i++){
          var line = lines[i];
          //将时间与歌词分割开
          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]?timeLyric[1].trim():'';
          if(lyric===''){
            continue; //跳过该行歌词
          }
          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);
  },
  // 在页面卸载时停止播放
  onUnload() {
    player.stop();
  }
});

页面返回时停止播放

在页面卸载时停止播放，可以在页面的 onUnload 生命周期函数中停止播放。

// 在页面卸载时停止播放
onUnload() {
  player.stop();
}

代码说明

1. 使用 wx.createInnerAudioContext() 创建音频实例 player。
2. 在 data 中定义页面初始数据，包括播放状态、歌曲数组、当前歌曲索引、歌词数组、滚动条位置、当前播放时间、当前歌词索引等。
3. 通过 prev() 和 next() 函数实现上一首和下一首歌曲的切换。
4. 通过 clickPlay() 函数实现播放和暂停功能。
5. 通过 lrc() 函数解析歌词并更新 lyrics 数据。
6. 通过 follow() 函数实现进度条跟随功能。
7. 通过 play() 函数开始播放歌曲，并设置定时器更新播放进度和歌词显示。
8. 使用 player.onError() 和 player.onEnded() 处理播放错误和播放结束事件。
9. 在 onLoad() 生命周期函数中获取歌曲信息并开始播放。
10. 在 onUnload() 生命周期函数中停止播放。

小结

本页面展示了微信小程序音乐播放器歌曲详情页的基本功能实现，并讲解了如何处理页面返回时的播放停止问题。开发者可以根据需要进行扩展和修改，实现更多功能。

注意事项

• 由于网易云音乐 API 的限制，需要使用用户授权才能获取歌词数据。
• 为了保护用户隐私，不要直接在页面中显示歌曲的 URL，建议使用网易云音乐提供的歌曲播放地址。
• 代码中使用了 replaceAll() 方法，需要在微信小程序开发工具中开启 es6 功能。
• 歌词解析逻辑较为简单，开发者可以根据需要进行优化。