higher-music 基于Vue的支持歌单外链的在线网页音乐
2019-01-14 本文已影响3人
cyixlq
一款基于Vue打造的网页在线音乐播放器,利用工作空闲时间与大学同学@ganp1020一起开发。目前正在开发阶段,已经能正常使用。支持歌单外链这一特色功能!
项目演示地址:
实现的功能:
- 上一曲
- 下一曲
- 暂停/播放
- 音质选择
- 遇到没有的音质自动切换音质源
- 音乐搜索
- 播放列表展示
- 正在播放歌曲标志
- 歌单全部播放
- 歌单,歌曲top榜显示
- 同时适配桌面端和移动端
项目技术:
- vue
- vue-router
- vuex
- axios
- jsonp
- Vuetify
项目截图
Top榜单及Top歌曲 歌曲搜索以及热搜关键词 歌单详情 播放列表特色功能 —— 歌单外链的使用方法:
除了像一个正常网页音乐播放器外,还支持一个个人认为比较牛逼的功能 —— 歌曲外链,使用方法如下:
- 登录网页QQ音乐,选择你需要制作外链的歌单,点击分享,点击复制链接:
- 将复制好的链接粘贴到任何可以编辑的地方,然后将链接中的数字部分复制下来:
- 在你博客中需要接入外链的地方加入以下代码(请注意,将下面链接中的
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>
- 效果图如下: