微信小程式-網易雲音樂

一個微信小程式版的網易雲音樂播放器練習demo

Github 地址

主要功能

• 推薦音樂
• 雲音樂熱歌榜
• 搜尋
• 歌曲播放頁面
  • 歌詞滾動
  • 播放進度條
  • 點選跳轉進度
  • 拖動跳轉進度

搭建過程記錄

• 還是用mpvue來初始化，vue的寫法，比較順手。

  
  vue init mpvue/mpvue-quickstart mp-music
  
  cd mp-music
  npm install
  
  複製程式碼

• HTTP請求，用的flyio。
• 相關的API，使用的是大佬整理維護的Nodejs版本，戳Github可檢視，自己簡單部署了一下，Nginx配置如下：

  
    server{
      listen  80;
      server_name example.com;
  
      rewrite ^(.*) https://$host$1 permanent;
    }
  
    server {
      listen 443 ssl;
      server_name example.com;
      ssl on;
  
      ssl_certificate example.com.pem;
      ssl_certificate_key example.com.key;
  
      ssl_session_cache    shared:SSL:1m;
      ssl_session_timeout  5m;
  
      location / {
        proxy_pass http://127.0.0.1:3000;
      }
  
      ssl_ciphers  HIGH:!aNULL:!MD5;
      ssl_prefer_server_ciphers  on;
    }
  
  複製程式碼

• 安裝stylus，新增loader：

  
  npm install stylus stylus-loader  --save-dev
  
  // webpack.base.conf.js
  {
    test: /\.styl$/,
    loader: ['url-loader', 'css-loader', 'stylus-loader'],
  }
  
  複製程式碼

• app.json中定義tabBar；
• 使用微信小程式的API，建立音訊例項：

  
    wx.createInnerAudioContext()
  
  複製程式碼

• 歌詞解析：用了個開源的lyric-parser，但解析網易雲音樂歌詞存在bug，可以參考issues中討論的解決方式，最後又自行增加了一個destroy()方法在離開頁面時銷燬例項：

  
     "lyric-parser": "git+https://github.com/AlisaLiCn/lyric-parser.git",
  
  複製程式碼

• 進度跳轉：

  
    // 音訊跳轉，單位秒，小數點需要保留在3位以內，不然好像不生效
    innerAudioContext.seek(time)
  
    // 歌詞跳轉，單位毫秒
    lyric.seek(time * 1000)
  
  複製程式碼

構建命令

# 開發時構建
npm run dev


複製程式碼

預覽

構建完成後，使用微信開發者工具開啟，也可使用手機掃碼預覽

截圖預覽：

Github 地址