那些年，看看微信小程序仿网易云音乐的相关播放

1.前言

随着智能手机普及和移动网络覆盖的加强，人们对音乐的需求变得越来越高。在这样的背景下，网易云音乐以其丰富的曲库、个性化的推荐等特点吸引了大量用户，成为国内最受欢迎的音乐应用之一。而微信小程序则以其方便快捷的特点，成功地入驻了人们的生活日常中。各种仿网易云音乐的小程序也不断涌现，让用户可以在微信中便捷地体验音乐。

2.微信小程序仿网易云音乐的相关播放

2.1 仿网易云音乐的需求

网易云音乐作为知名的音乐应用，其界面、功能等部分得到了用户的喜爱。前端开发者们也积极针对其特点进行模仿和创新。微信小程序开发中，不少小程序以仿网易云音乐为目标而诞生。主要包含的功能有热门推荐、歌单推荐、搜索、播放音乐等。

2.2 功能实现及代码片段

主要功能实现包括播放音乐、歌词滚动、进度条控制等部分。以下是其中一个小程序的代码片段，实现了音乐播放的功能：

//点击音乐播放
playMusic: function (e) {
  var that = this;
  var musicUrl = e.currentTarget.dataset.musicurl;//获取音乐链接
  var musicName = e.currentTarget.dataset.musicname;//获取音乐名称
  var musicImg = e.currentTarget.dataset.musicimg;//获取音乐封面
  var musicSinger = e.currentTarget.dataset.musicsinger;//获取音乐歌手
  var musicId = e.currentTarget.dataset.musicid;//获取音乐id
  wx.playBackgroundAudio({
    dataUrl: musicUrl,
    title: musicName,
    coverImgUrl: musicImg,
    success: function () {
      var recentMusic = [{
        musicName: musicName,
        musicImg: musicImg,
        musicSinger: musicSinger,
        musicId: musicId
      }]//创建最近播放列表
      var recentMusics = wx.getStorageSync('recentMusics') || [];//读取最近播放列表
      if (recentMusics.length) {
        //如果最近播放列表中已经包含此歌曲，则将该歌曲提到列表首位
        for (var i = 0; i < recentMusics.length; i++) {
          if (recentMusics[i].musicId == musicId) {
            recentMusics.splice(i, 1);
            break;
          }
        }
      }
      recentMusics.unshift(recentMusic[0]);
      wx.setStorageSync('recentMusics', recentMusics);
      that.setData({
        musicName: musicName,//音乐名称
        musicImg: musicImg,//音乐封面
        musicSinger: musicSinger,//音乐歌手
        musicId: musicId,//音乐id
        playing: true//修改播放状态
      })
    }
  })
},

以上代码中，首先通过获取对应的音乐链接、名称、封面、歌手和id等信息，进行播放。同时，代码通过常用的本地存储方式，创建了最近播放列表，记录用户已经播放过的音乐。

2.3 注意事项

在开发仿网易云音乐小程序过程中，需要注意以下几点：

- 保证界面简洁、美观；

- 音乐来源是否合法；

- 歌单信息库的更新和维护。

3.总结

以上是微信小程序仿网易云音乐的相关播放的相关内容。通过模仿和创新，开发者们成功地将网易云音乐的特点带入微信小程序中，满足用户快捷方便的听歌需求。随着微信小程序的不断发展，对音乐应用的愈发需求，相关仿网易云音乐的小程序也将不断涌现，改善用户体验，提高市场竞争力。