微信小程序-網易雲音樂

一個微信小程序版的網易雲音樂播放器練習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 地址