higher-music 基于Vue的支持歌单外链的在线网页音乐

一款基于Vue打造的网页在线音乐播放器，利用工作空闲时间与大学同学@ganp1020一起开发。目前正在开发阶段，已经能正常使用。支持歌单外链这一特色功能！

项目演示地址：

• http://cyixlq.gitee.io/hiegher_music_app/

实现的功能：

• 上一曲
• 下一曲
• 暂停/播放
• 音质选择
• 遇到没有的音质自动切换音质源
• 音乐搜索
• 播放列表展示
• 正在播放歌曲标志
• 歌单全部播放
• 歌单，歌曲top榜显示
• 同时适配桌面端和移动端

项目技术：

• vue
• vue-router
• vuex
• axios
• jsonp
• Vuetify

项目截图

Top榜单及Top歌曲 歌曲搜索以及热搜关键词 歌单详情 播放列表

特色功能 —— 歌单外链的使用方法：

除了像一个正常网页音乐播放器外，还支持一个个人认为比较牛逼的功能 —— 歌曲外链，使用方法如下：

1. 登录网页QQ音乐，选择你需要制作外链的歌单，点击分享，点击复制链接：

复制分享歌单链接

2. 将复制好的链接粘贴到任何可以编辑的地方，然后将链接中的数字部分复制下来：

复制链接中的数字部分

3. 在你博客中需要接入外链的地方加入以下代码(请注意，将下面链接中的2947517062替换成你上一步中复制的数字，如果不需要播放器自动播放请将下面true改成false，iframe的宽高你可以自定义,Chrome可能会禁止iframe内音频自动播放，你的博客不能为https站点，因为此网页中包含http请求，https站点下是不允许http请求的)：

   <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=450 src="http://cyixlq.gitee.io/hiegher_music_app/#/iframe/2947517062/true"></iframe>
   

4. 效果图如下：

效果图

到这里，你的音乐外链就制作完成，注意并不是所有歌曲的播放地址都能解析出来，还望谅解，如果你喜欢本项目的话或者本项目对你有一定帮助的话，可以扫描下方二维码进行捐赠，以此来维持服务器的运转：

捐赠