vue-cli加vuex搭建在线音乐播放器

效果图：

播放器地址：

点击浏览在线播放器

源码地址：

点击查看源码

需要音乐源数据，我们可以使用qq音乐的api：

qq音乐有两个音乐榜单：

新歌榜：http://music.qq.com/musicbox/shop/v3/data/hit/hit_newsong.js

总榜：http://music.qq.com/musicbox/shop/v3/data/hit/hit_all.js

可以在上面的数据中获取json数据，提取其中的id，该id用于获取歌曲链接

使用：

var id = 101369814,
    src = `http://ws.stream.qqmusic.qq.com/${id}.m4a?fromtag=46`;

例如：

<audio src="http://ws.stream.qqmusic.qq.com/101369814.m4a?fromtag=46" controls></audio>

唠叨几句：

学了几天vue.js、vuex，使用vue-cli搭建了这个播放器，是为了熟悉vue和vuex的使用，新手学习，请多多指点、一起学习交流。