调用网易云提供的音乐接口，编写一个简易的音乐在线播放网页

一、功能实现：

1.通过在输入框输入要查询的文字，调用后台接口获取响应的数据，并把需要的数据渲染到左侧。

2.通过点击可以选中左侧播放栏的某一信息，选中变色。

3.播放音乐是把该音乐的id提交给后台，调用接口获取歌曲的具体数据，把封面信息渲染到中间主体区域，热门评论渲染到右侧评论区。

4.播放音乐MV。

二、效果图

1.页面静态时

2.输入相应的信息获取数据

3.双击某一音乐播放

4.播放MV

三、功能实现流程

1.网络接口

 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的地址

2.页面的静态布局

页面的布局分为头部、中间栏和底部播放栏，而中间栏包括左侧的歌曲信息栏、中间显示正在播放歌曲的信息，右侧显示正在播放音乐的热门评论。具体的样式就不一一介绍了，最后我会提供源码。

3.具体功能的实现

头部实现搜索功能

使用v-model绑定输入框输入的内容，然后给输入框绑定一个回车事件getSong事件，把输入的内容条用axios发送给后台，获取响应的信息。输入框后的搜索图标我们也给绑定getSong事件。

获取到响应的信息，我们要把它在控制台中打印出来，查看哪些数据使我们所需要的，然后把它放到我们data中的songList中，然后通过v-for指令，在我们的歌曲列表区，把我们所获取的歌曲信息渲染出来。

在这个区域，我们要实现的功能有双击歌曲信息或者点解播放按钮调用playSong方法，实现歌曲的播放功能，同时我们也要把当前点击的歌曲的id、歌曲名、歌手、已经当前歌曲的索引传到我们的方法了。歌曲的id我们用于调用接口获取歌曲的封面信息以及热门评论，歌曲名字以及歌手信息我们用于把这些信息渲染到播放区域，然后歌曲的索引我们将用来判断当前播放的是哪首歌，时间选中变色的效果。

playSong: function (songId,singer,songs,index) {var that = this;        // console.log(songId);// console.log(singer);// console.log(songs);this.playIndex=index;// console.log(index);this.singer = singer;this.songs = songs;this.isSing=true;//获取歌曲播放地址axios.get("https://autumnfish.cn/song/url?id=" + songId).then(function (res) {// console.log(res);that.songUrl = res.data.data[0].url;// console.log(that.songUrl);// console.log(res.data.data);}, function (err) {console.log(err);});//获取歌曲封面信息axios.get("https://autumnfish.cn/song/detail?ids=" + songId).then(function (res) {// console.log(res);// console.log(res.data.songs[0].al.picUrl);that.songCover = res.data.songs[0].al.picUrl;}, function (err) {console.log(err);});//获取热门评论axios.get("https://autumnfish.cn/comment/hot?type=0&id=" + songId).then(function (res) {// console.log(res);//头像// console.log(res.data.hotComments[0].user.avatarUrl);//昵称// console.log(res.data.hotComments[0].user.nickname);//评论// console.log(res.data.hotComments[0].content);that.hotComments = res.data.hotComments;// console.log(that.hotComments);     }, function (err) {console.log(err);});},

然后我们把获取到的播放歌曲的信息，渲染到中间的播放区域

还有我们的右侧热门评论的区域

然后就是底部的播放栏了。

<div class="audio_con"><audio @play="play" @pause="pause" :src="songUrl" ref='audio' controls autoplay loop class="myaudio"></audio>
</div>

然后播放已经停止的方法如下：

play: function () {// console.log("play");this.isPlay = true;},pause: function () {// console.log("pause");this.isPlay = false;},

最后就是播放音乐的MV的功能，首先我们之前已经在渲染歌曲信息的时候做了一个判断，判断后台接口是否为我们提供了该歌曲的MV播放地址，如果该歌曲有MV，我们会在歌曲最后有一个MV的小图标，我们可以通过点击那个小图标，调用获取MV自动播放的地址，实现MV的播放功能

<span v-show="item.mvid!=0" @click="showMV(item.mvid)" class="mv"><img src="./images/mv.png" alt=""></span>

//播放mvshowMV:function(mvid){// console.log(mvid);var that = this;axios.get("https://autumnfish.cn/mv/url?id="+mvid).then(function(res){console.log(res);// console.log(res.data.data.url);that.mvUrl = res.data.data.url;that.isShow=true;// console.log(that.mvUrl);},function(err){console.log(err);})},

点击播放MV后弹出遮罩层，播放mv，点击MV以外的任意地方，关闭MV的播放，并且隐藏遮罩层。

<div class="video_con" style="display: none;" v-show="isShow"><video :src="mvUrl" ref='video'  controls="controls"></video><div class="mask" @click="hide" ></div>
</div>

//隐藏遮罩层hide:function(){this.isShow=false;this.mvUrl="";}

注意事项：我们在用JS实现功能的时候，必须先要导入我们的Vue以及axios的相关依赖包，而且要先导入vue，再导入axios，因为axios是依赖vue的。

四、源码

index.css

* {margin: 0;padding: 0;
}html {min-width: 1000px;
}body {background-color: grey;
}#musicApp {width: 1000px;margin: 5% auto 0;background-color: honeydew;
}#musicApp header {display: block;width: 100%;overflow: hidden;background-color: red;position: relative;z-index: 11;
}#musicApp header .title {display: block;float: left;width: 20%;height: 50px;text-align: center;padding: 10px 0;box-sizing: border-box;color: white;font-size: 20px;/* background-color: red; */
}#musicApp header .search {float: left;width: 60%;border-radius: 26px;/* background-color: darkblue; */
}#musicApp header input {display: block;float: left;height: 50px;min-width: 88%;border: none;border-top-left-radius: 26px;border-bottom-left-radius: 26px;outline: none;font-size: 16px;padding-left: 10px;box-sizing: border-box;/* z-index: 11; */
}#musicApp header .search_con {/* background: url("../imags/zoom.png") no-repeat; */width: 12%;height: 50px;background-color: white;display: block;float: left;text-align: center;border-top-right-radius: 26px;border-bottom-right-radius: 26px;position: relative;cursor: pointer;
}#musicApp header .search_con img {width: 26px;height: 26px;position: absolute;/* right: 16px; */top: 14px;
}.content {width: 100%;height: 480px;/* background-color: turquoise; */
}.content .left {width: 20%;height: 100%;float: left;background-color: white;/* position: relative; */border-right: 1px groove red;box-sizing: border-box;
}.content .left ul {width: 100%;height: 480px;list-style: none;overflow: auto;user-select: none;
}
.content .left ul::-webkit-scrollbar{display: none;
}
.content .left ul li {width: 100%;height: 40px;line-height: 40px;background-color: white;border-bottom: 1px solid grey;/* float: left; */overflow: hidden;}
.content .left ul li.focus{background-color: rgb(229, 155, 178);
}.content .left ul li .play {height: 100%;width: 20px;float: left;margin-top: 4px;margin-left: 4px;cursor: pointer;/* background-color: chartreuse; */
}.content .left ul li .name {width: 68%;height: 100%;float: left;padding-left: 5px;font-size: 12px;box-sizing: border-box;/* background-color: chocolate; *//* 隐藏多余的文字 */white-space: nowrap;overflow: hidden;text-overflow: ellipsis;user-select: none; /*禁止选中文字 */
}.content .left ul li .mv {height: 100%;width: 20px;/* line-height: 30px; */margin-top: 2px;float: right;/* background-color: chartreuse; */margin-right: 4px;cursor: pointer;
}.content .left img {width: 18px;height: 18px;}.content .center {width: 59%;height: 100%;float: left;position: relative;border-right: 1px solid red;background-color: rgb(71, 71, 71);
}.center .play_bar {position: absolute;/* width: 20px; */left: 270px;top: -10px;transform: rotate(-25deg);transform-origin: 12px 12px;transition: 1s;z-index: 10;
}.center .disc {position: absolute;/* width: 20px; */left: 140px;top: 66px;z-index: 9;
}.center .cover {/* background-color: red; */position: absolute;left: 190px;top: 120px;width: 150px;height: 150px;border-radius: 75px;z-index: 8;
}
.center .mes{color: red;position: absolute;left: 116px;top: 390px;font-size: 20px;user-select: none;
}.content .right {width: 20%;height: 100%;float: right;/* background-color: cornflowerblue; */overflow: hidden;background-color: white;
}.right .hot_title {margin: 10px 2px;
}.right .comment_list {height: 460px;overflow: auto;
}
.right .comment_list::-webkit-scrollbar{display: none;
}
.right .comment_list dl {padding-top: 10px;padding-left: 50px;position: relative;margin-bottom: 20px;box-sizing: border-box;/* background-color: rgb(212, 165, 165); */
}.right .comment_list dl dt {position: absolute;left: 4px;top: 10px;
}.right .comment_list dl dt img {width: 40px;height: 40px;border-radius: 20px;
}.right .comment_list dl dd {font-size: 12px;
}.right .comment_list dl .name {font-weight: bold;color: #333;padding-top: 5px;
}.right .comment_list dl .detail {color: #666;margin-top: 5px;padding-right: 10px;box-sizing: border-box;line-height: 18px;
}.audio_con {height: 50px;background-color: #f1f3f4;border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;
}.myaudio {width: 100%;height: 40px;margin-top: 5px;outline: none;background-color: #f1f3f4;
}.video_con video {position: fixed;width: 800px;height: 546px;left: 50%;top: 50%;margin-top: -273px;transform: translateX(-50%);z-index: 990;outline: none;}.video_con .mask {position: fixed;width: 100%;height: 100%;left: 0;top: 0;z-index: 980;background-color: rgba(0, 0, 0, 0.8);}.video_con .shutoff {position: fixed;width: 40px;height: 40px;/* background: url("../images/shutoff.png") no-repeat; */left: 50%;margin-left: 400px;margin-top: -273px;top: 50%;z-index: 995;
}
/* 旋转的动画 */
@keyframes Rotate {from {transform: rotateZ(0);}to {transform: rotateZ(360deg);}
}
/* 旋转的类名 */
.autoRotate {animation-name: Rotate;animation-iteration-count: infinite;animation-play-state: paused;animation-timing-function: linear;animation-duration: 15s;
}
/* 是否正在播放 */
.center.playing .disc,
.center.playing .cover {animation-play-state: running;
}/* 播放杆 转回去 */
.center.playing .play_bar {transform: rotate(0);
}

index.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>Document</title><style type="text/css">[v-cloak]{display: none;}</style><link rel="shortcut icon" href="#" /><link rel="stylesheet" href="./index.css">
</head><body><!-- 整体布局 --><div id="musicApp"><!-- 头部布局 --><header><div><span class="title">Music</span><div class="search"><input v-model="query" @keyup.enter="getSong" type="text" placeholder="请输入" /><div class="search_con" @click="getSong"><img src="./images/zoom.png" alt=""></div></div></div></header><!-- 中间内容区域 --><div class="content"><!-- 左边歌曲区域 --><div class="left"><!-- 歌曲列表 --><ul><li v-for="(item,index) in songList" :class="{focus:index===playIndex}" v-cloak><span class="play"@click="playSong(item.id)"><img src="./images/play.png" alt=""></span><div class="name" @dblclick="playSong(item.id,item.artists[0].name,item.name,index)">{{item.name}}</div><span v-show="item.mvid!=0" @click="showMV(item.mvid)" class="mv"><img src="./images/mv.png" alt=""></span></li></ul><!-- <img src="./images/line.png" class="line" alt=""> --></div><!-- 中间封面区域 --><div class="center" :class="{playing:isPlay}"><img src="./images/player_bar.png" class="play_bar" alt=""><!-- 黑胶封面 --><img src="./images/disc.png" class="disc autoRotate" alt=""><img :src="songCover" class="cover autoRotate" alt=""><div class="mes" v-show="isSing" v-cloak>{{singer}} - {{songs}}</div></div><!-- 右边评论区域 --><div class="right"><h5 class="hot_title">热门留言</h5><div class="comment_list"><dl v-for="item in hotComments" v-cloak><dt><img :src="item.user.avatarUrl" alt=""></dt><dd class="name" >{{item.user.nickname}}</dd><dd class="detail" >{{item.content}}</dd></dl></div></div></div><!-- 底部播放器 --><div class="audio_con"><audio @play="play" @pause="pause" :src="songUrl" ref='audio' controls autoplay loopclass="myaudio"></audio></div><div class="video_con" style="display: none;" v-show="isShow"><video :src="mvUrl" ref='video'  controls="controls"></video><div class="mask" @click="hide" ></div></div></div></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!-- 使用axios --><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script src="./index.js" ></script>
</body></html>

index.js


var app = new Vue({el: "#musicApp",data: {//搜索信息query: "",//歌曲列表songList: [],//歌曲在线播放地址songUrl: "",//歌曲封面地址songCover: "",// 人们评论hotComments: [],//判断是否在播放isPlay: false,//判断遮罩层isShow:false,//播放mv的地址mvUrl:"",//播放的歌手singer:"",//播放的歌曲songs:"",//判断是否播放isSing:false,//playIndex:""},methods: {getSong: function () {// console.log(this.query);var that = this;this.playIndex=""axios.get("https://autumnfish.cn/search?keywords=" + this.query).then(function (response) {// console.log(response.data.result);that.songList = response.data.result.songs;// console.log(that.songList);// console.log(that.songList[2].artists[0].name);if (response.data.result.queryCorrected) {that.query = response.data.result.queryCorrected;}}).catch(function (err) {// console.log(err);alert("查询失败");})},playSong: function (songId,singer,songs,index) {var that = this;        // console.log(songId);// console.log(singer);// console.log(songs);this.playIndex=index;// console.log(index);this.singer = singer;this.songs = songs;this.isSing=true;//获取歌曲播放地址axios.get("https://autumnfish.cn/song/url?id=" + songId).then(function (res) {// console.log(res);that.songUrl = res.data.data[0].url;// console.log(that.songUrl);// console.log(res.data.data);}, function (err) {console.log(err);});//获取歌曲封面信息axios.get("https://autumnfish.cn/song/detail?ids=" + songId).then(function (res) {// console.log(res);// console.log(res.data.songs[0].al.picUrl);that.songCover = res.data.songs[0].al.picUrl;}, function (err) {console.log(err);});//获取热门评论axios.get("https://autumnfish.cn/comment/hot?type=0&id=" + songId).then(function (res) {// console.log(res);//头像// console.log(res.data.hotComments[0].user.avatarUrl);//昵称// console.log(res.data.hotComments[0].user.nickname);//评论// console.log(res.data.hotComments[0].content);that.hotComments = res.data.hotComments;// console.log(that.hotComments);     }, function (err) {console.log(err);});},play: function () {// console.log("play");this.isPlay = true;},pause: function () {// console.log("pause");this.isPlay = false;},//播放mvshowMV:function(mvid){// console.log(mvid);var that = this;axios.get("https://autumnfish.cn/mv/url?id="+mvid).then(function(res){console.log(res);// console.log(res.data.data.url);that.mvUrl = res.data.data.url;that.isShow=true;// console.log(that.mvUrl);},function(err){console.log(err);})},//隐藏遮罩层hide:function(){this.isShow=false;this.mvUrl="";}}
})

简单的音乐在线播放网页相关推荐

独家首发DJ舞曲音乐在线播放微信小程序源码下载支持多分类歌曲
这是一款音乐播放小程序源码音乐内容是属于DJ,电音,舞曲等等这类型的该小程序的歌曲有七大分类,分别是: 第一分类热门推荐第二分类中文舞曲第三分类英文舞曲第四分类慢摇舞曲第五分类舞曲串烧第 ...
Java和vue实现音乐播放器_vue实现的网易云音乐在线播放和下载功能案例
本文实例讲述了vue实现的网易云音乐在线播放和下载功能.分享给大家供大家参考,具体如下: 效果如图: 完整代码: Document html, body { height: 100%; padding ...
音乐在线播放Demo
本事例的界面很简单,一个按钮用来开始缓冲音乐,一个进度条用来显示音乐的缓冲进度和播放进度,后面是一个文本用来显示音乐的播放时间,还有一个图片按钮用来播放和暂停音乐. 在main.xml中的代码如下: ...
iOS中AVFoundation的简单使用—音乐的播放
2019独角兽企业重金招聘Python工程师标准>>> #import "ViewController.h" #import <AVFoundation/A ...
小项目----音乐在线播放器
目录音乐播放器项目功能: 项目框架: 项目的创建很重要: 数据库设计在idea中配置数据库和xml 一.登录板块设计 1创建User类 2创建UserMapper和Controller接口 3. ...
如何使用java实现一个音乐在线播放系统web智能音乐推荐平台使用ssm+springboot架构
环境需要 1.运行环境:最好是java jdk 1.8,我们在这个平台上运行的.其他版本理论上也可以. 2.IDE环境:IDEA,Eclipse,Myeclipse都可以.推荐IDEA; 3.tomc ...
计算机毕设网页设计源码——HTML+CSS+JS+Bootstrap在线音乐试听播放网站模板
HTML5期末大作业:HTML+CSS+JS+Bootstrap在线音乐试听播放网站模板(24页) 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码常见网页设计作业题材 ...
网页中怎样在线播放音乐和视频
代码一: <object classid=clsid:22d6f312-b0f6-11d0-94ab-0080c74c7e95 width=350 height=70><param ...
HTML5期末大作业：仿网易云音乐在线音乐播放器 HTML+CSS+JavaScript 计算机毕业设网页设计源码
HTML5期末大作业:仿网易云音乐在线音乐播放器 HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码常见网页设计作业题材有个人. ...

简单的音乐在线播放网页