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

最新推荐文章于 2025-05-29 09:00:00 发布

daisy_Hawen

最新推荐文章于 2025-05-29 09:00:00 发布

阅读量3.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/sinat_25127047/article/details/60873837

vue 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了如何利用Vue.js和百度音乐API搭建一个简单的音乐播放器。首先探讨了音乐资源，选择了百度音乐API，尽管非官方开放，但适合个人项目。接着详细阐述了Search接口的使用，以及如何通过HTTP请求获取音乐。由于百度音乐的反向代理限制，文章提到了利用Node.js解决这个问题，为后续的H5 audio播放器铺平道路。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前看了一个博主用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>