阅读 20

微信小程序-网易云音乐

一个微信小程序版的网易云音乐播放器练习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 地址

关注下面的标签,发现更多相似文章
评论