用Vue搭建一个网易云播放器（一）

之前看了一个博主用vue搭建的网易云播放器，于是有了想法。最近没有什么项目，看书也看得无聊了，确确实实想来写点代码，那么就开始吧。

1.音乐资源

首先调研了一下一些开放的音乐API：豆瓣音乐、QQ音乐，还有百度音乐。
这里用的是百度音乐的API，当然了，它并不是开放的，但是基于我不是用去作为什么商业用途，应该没有什么关系吧。

1.1 Search 搜索音乐接口

http://tingapi.ting.baidu.com/v1/restserver/ting?from=qianqian&version=2.1.0&method=baidu.ting.search.common&format=json&query=‘JAY’&page_size=30&page_no=1;

query是必须的，page_size和page_no可以省略

这里我们只要返回数据中的这几条信息

    singer: val.author,
    name: val.title,
    ep: val.album_title == ''? '未知':val.album_title,
    songId : val.song_id

1.2 获取音乐

http://tingapi.ting.baidu.com/v1/restserver/ting?from=qianqian&version=2.1.0&method=baidu.ting.song.playAAC&songid=7291936
返回的结果

self.currentLink = 'http://localhost:8081/api/?tourl='+resp.bitrate.file_link; //这是这首歌的链接
self.songId = resp.songinfo.song_id;
self.currentSong = resp.songinfo.title;
self.singer = resp.songinfo.author;
self.singerPic = 'http://localhost:8081/api/?tourl='+resp.songinfo.pic_small;

如果写在我们的代码中，这个链接是不行的，因为百度音乐的安全措施吧

但是直接贴在浏览器中，就可以下载。因为百度音乐对源路径进行了控制，所以需要用node进行反向代理。
测试图片是可以直接用的
测试代码在这里，用的是H5的audio播放器：

    <div>
        <img src="http://musicdata.baidu.com/data2/music/D3057B5D63F3C39073A6A4F8A9CACA3D/252696511/252696511.jpg@s_0,w_150" style="width: 100px;height: 100px">
            <audio controls="controls" autoplay="autoplay">
            <source src="http://zhangmenshiting.baidu.com/data2/music/47230483/47230483.mp3?xcode=817b7b64ab9df05923407a79428c3f0f" />
            Your browser does not support the audio element.
            audio>
        div>

所以接下来我们先通过Node解决反向代理的问题