效果图
工程环境
1、使用node在本地部署网易云音乐API接口
下载解压
链接:https://pan.baidu.com/s/1YQiMJoUMEYlMz14FH5xxRA?pwd=36o5
提取码:36o5
工程目录概览
(js文件夹里面放了music.html和main.js和vue.js)
工程目录)(有点重复,懒得删除了)
main.js
/*1:歌曲搜索接口请求地址:https://autumnfish.cn/search请求方法:get请求参数:keywords(查询关键字)响应内容:歌曲搜索结果2:歌曲url获取接口请求地址:https://autumnfish.cn/song/url请求方法:get请求参数:id(歌曲id)响应内容:歌曲url地址3.歌曲详情获取请求地址:https://autumnfish.cn/song/detail请求方法:get请求参数:ids(歌曲id)响应内容:歌曲详情(包括封面信息)4.热门评论获取请求地址:https://autumnfish.cn/comment/hot?type=0请求方法:get请求参数:id(歌曲id,地址中的type固定为0)响应内容:歌曲的热门评论5.mv地址获取请求地址:https://autumnfish.cn/mv/url请求方法:get请求参数:id(mvid,为0表示没有mv)响应内容:mv的地址
*/
var app = new Vue({el: "#player",data: {// 查询关键字query: "",// 歌曲数组musicList: [],// 歌曲地址musicUrl: "",// 歌曲封面musicCover: "",// 歌曲评论hotComments: [],// 动画播放状态isPlaying: false,// 遮罩层的显示状态isShow: false,// mv地址mvUrl: ""},methods: {// 歌曲搜索searchMusic: function() {var that = this;axios.get("http://localhost:3000/search?keywords=" + this.query).then(function(response) {// console.log(response);that.musicList = response.data.result.songs;//console.log(response.data.result.songs);},function(err) {});},// 歌曲播放playMusic: function(musicId) {// console.log(musicId);var that = this;// 获取歌曲地址axios.get("http://localhost:3000/song/url?id=" + musicId).then(function(response) {// console.log(response);//console.log(response.data.data[0].url);that.musicUrl = response.data.data[0].url;},function(err) {});// 歌曲详情获取axios.get("http://localhost:3000/song/detail?ids=" + musicId).then(function(response) {// console.log(response);// console.log(response.data.songs[0].al.picUrl);that.musicCover = response.data.songs[0].al.picUrl;},function(err) {});// 歌曲评论获取axios.get("http://localhost:3000/comment/music?id=" + musicId).then(function(response) {// console.log(response);// console.log(response.data.hotComments);that.hotComments = response.data.hotComments;},function(err) {});},// 歌曲播放play: function() {// console.log("play");this.isPlaying = true;},// 歌曲暂停pause: function() {// console.log("pause");this.isPlaying = false;},// 播放mvplayMV: function(mvid) {var that = this;axios.get("http://localhost:3000/mv/url?id=" + mvid).then(function(response) {// console.log(response);console.log(response.data.data.url);that.isShow = true;that.mvUrl = response.data.data.url;},function(err) {});},// 隐藏hide: function() {this.isShow = false;}}
});
mymusic.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>我的音乐</title><!-- 样式 --><link rel="stylesheet" href="../CSS/index.css">
</head><body>
<div class="wrap"><!-- 播放器主体区域 --><div class="play_wrap" id="player"><div class="search_bar"><img src="../images/player_title.png" alt="" /><!-- 搜索歌曲 --><input type="text" autocomplete="off" v-model="query" @keyup.enter="searchMusic" /></div><div class="center_con"><!-- 搜索歌曲列表 --><div class='song_wrapper'><ul class="song_list"><li v-for="item in musicList"><a href="javascript:;" @click="playMusic(item.id)"></a><b>{{ item.name }}</b><span v-if="item.mvid!=0" @click="playMV(item.mvid)"><i></i></span></li></ul><img src="../images/line.png" class="switch_btn" alt=""></div><!-- 歌曲信息容器 --><div class="player_con" :class="{playing:isPlaying}"><img src="../images/player_bar.png" class="play_bar" /><!-- 黑胶碟片 --><img src="../images/disc.png" class="disc autoRotate" /><img :src="musicCover" class="cover autoRotate" /></div><!-- 评论容器 --><div class="comment_wrapper"><h5 class='title'>热门留言</h5><div class='comment_list'><dl v-for="item in hotComments"><dt><img :src="item.user.avatarUrl" alt=""></dt><dd class="name">{{ item.user.nickname}}</dd><dd class="detail">{{ item.content }}</dd></dl></div><img src="../images/line.png" class="right_line"></div></div><div class="audio_con"><audio ref='audio' @play="play" @pause="pause" :src="musicUrl" controls autoplay loop class="myaudio"></audio></div><div class="video_con" v-show="isShow" style="display: none;"><video :src="mvUrl" controls="controls"></video><div class="mask" @click="hide"></div></div></div>
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="main.js"></script>
</body></html>
vue.js
https://gitee.com/yang-huishan/music.git
index.css
https://gitee.com/yang-huishan/music.git
运行播放器的图片资源
链接:https://pan.baidu.com/s/1YQiMJoUMEYlMz14FH5xxRA?pwd=36o5
提取码:36o5