基于Vue2开发的前端网络应用音乐播放器
一、Vue2.js音乐播放器页面展示
二、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>网易云player</title>
<!-- 样式 -->
<link rel="stylesheet" href="./css/music.css">
</head>
<body>
<div class="wrap">
<!-- 播放器主体区域 -->
<div class="play_wrap" id="player">
<div class="search_bar">
<img src="images/wangyi.png" alt="" />
<span id="musictitle">网易云音乐</span>
<!-- 搜索歌曲 -->
<input type="text" autocomplete="off" v-model="query" @keyup.enter="searchMusic()" />
</div>
<div class="center_con">
<!-- 搜索歌曲列表 -->
<div class='song_wrapper'>
<ul class="song_list" v-show="query!='' ">
<li v-for="item in musiclist">
<a href="javascript:;" @click="playMusic(item.id)" ></a>
<b> {{item.name}} </b>
<span><i v-if="item.mvid!=0" @click="playerMv(item.mvid)"></i></span>
</li>
</ul>
<img src="images/line.png" class="switch_btn" alt="">
</div>
<!-- 歌曲信息容器 -->
<div class="player_con" :class="{playing:isPlayer}" >
<img src="images/player_bar.png" class="play_bar" />
<!-- 黑胶碟片 -->
<img src="images/disc.png" class="disc autoRotate" />
<img :src="musicPngurl" class="cover autoRotate" />
</div>
<!-- 评论容器 -->
<div class="comment_wrapper">
<h5 class='title'>热门留言</h5>
<div class='comment_list'>
<dl v-for="item in hotComments">
<dt><img alt="" :src="item.user.avatarUrl" ></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="isShowVideo" >
<video ref='video' :src="mvurl" controls="controls"></video>
<div class="mask" @click="closeMv()" ></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>
var app = new Vue({
el:"#player",
data:{
//歌曲搜索关键字
query:"",
//歌曲歌名列表
musiclist:[],
//歌曲的播放url
musicurl:"",
//歌曲封面url
musicPngurl:"images/cover.png",
//歌曲热门评论
hotComments:[],
//歌曲mv视频url
mvurl:"",
//显示视频播放
isShowVideo:false,
//显示音乐是否播放
isPlayer:false
},
methods:{
//歌曲歌名列表
searchMusic:function(){
var that = this;
//获取歌名列表
axios.get("https://autumnfish.cn/search?keywords=" + this.query)
.then(function(response){
that.musiclist = response.data.result.songs;
//console.log(response.data.result.songs);
},function(err){});
},
//歌曲的播放url
playMusic:function(musicid){
var that = this;
//获取歌曲播放url
axios.get("https://autumnfish.cn/song/url?id=" + musicid)
.then(function(response){
that.musicurl = response.data.data[0].url;
//console.log(response.data.data[0].url);
},function(err){});
//获取歌曲封面url
axios.get("https://autumnfish.cn/song/detail?ids=" + musicid)
.then(function(response){
that.musicPngurl = response.data.songs[0].al.picUrl;
//console.log(response.data.songs[0].al.picUrl);
},function(err){});
//获歌曲热门评论
axios.get("https://autumnfish.cn/comment/hot?type=0&id=" + musicid)
.then(function(response){
that.hotComments = response.data.hotComments;
//console.log(response.data.hotComments);
},function(err){});
},
//播放歌曲视频mv
playerMv:function(mvid){
var that = this;
//获取mv视频
axios.get("https://autumnfish.cn/mv/url?id=" + mvid)
.then(function(response){
that.isShowVideo = true;
that.mvurl = response.data.data.url;
that.$refs.audio.pause();
//console.log(response.data.data.url);
},function(err){});
},
//关闭视频
closeMv:function(){
this.isShowVideo = false;
this.$refs.video.pause();
},
//播放
play:function(){
this.isPlayer = true;
},
//暂停
pause:function(){
this.isPlayer = false;
}
}
})
</script>
</body>
</html>
三、css代码
body,
ul,
dl,
dd {
margin: 0px;
padding: 0px;
}
.wrap {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url("../images/bg.jpg") no-repeat;
background-size: 100% 100%;
}
.play_wrap {
width: 800px;
height: 544px;
position: fixed;
left: 50%;
top: 50%;
margin-left: -400px;
margin-top: -272px;
/* background-color: #f9f9f9; */
}
.search_bar {
height: 60px;
background-color: #b12222;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
z-index: 11;
}
.search_bar img {
margin-left: 23px;
width: 40px;
height: 40px;
cursor: pointer;
}
#musictitle{
color: #f1f3f4;
margin-left: -300px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 18px;
cursor: pointer;
}
.search_bar input {
margin-right: 23px;
width: 296px;
height: 34px;
border-radius: 17px;
border: 0px;
background: url("../images/zoom.png") 265px center no-repeat
rgba(255, 255, 255, 0.45);
text-indent: 15px;
outline: none;
}
.center_con {
height: 435px;
background-color: rgba(255, 255, 255, 0.5);
display: flex;
position: relative;
}
.song_wrapper {
width: 200px;
height: 435px;
box-sizing: border-box;
padding: 10px;
list-style: none;
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
}
.song_stretch {
width: 600px;
}
.song_list {
width: 100%;
overflow-y: auto;
overflow-x: hidden;
height: 100%;
}
.song_list::-webkit-scrollbar {
display: none;
}
.song_list li {
font-size: 12px;
color: #333;
height: 40px;
display: flex;
flex-wrap: wrap;
align-items: center;
width: 580px;
padding-left: 10px;
}
.song_list li:nth-child(odd) {
background-color: rgba(240, 240, 240, 0.3);
}
.song_list li b{
cursor: pointer;
}
.song_list li a {
display: block;
width: 17px;
height: 17px;
background-image: url("../images/play.png");
background-size: 100%;
margin-right: 5px;
box-sizing: border-box;
}
.song_list li b {
font-weight: normal;
width: 122px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.song_stretch .song_list li b {
width: 200px;
}
.song_stretch .song_list li em {
width: 150px;
}
.song_list li span {
width: 23px;
height: 17px;
margin-right: 50px;
}
.song_list li span i {
display: block;
width: 100%;
height: 100%;
cursor: pointer;
background: url("../images/table.png") left -48px no-repeat;
}
.song_list li em,
.song_list li i {
font-style: normal;
width: 100px;
}
.player_con {
width: 400px;
height: 435px;
position: absolute;
left: 200px;
top: 0px;
}
.player_con2 {
width: 400px;
height: 435px;
position: absolute;
left: 200px;
top: 0px;
}
.player_con2 video {
position: absolute;
left: 20px;
top: 30px;
width: 355px;
height: 265px;
}
.disc {
position: absolute;
left: 73px;
top: 60px;
z-index: 9;
}
.cover {
position: absolute;
left: 125px;
top: 112px;
width: 150px;
height: 150px;
border-radius: 75px;
z-index: 8;
}
.comment_wrapper {
width: 180px;
height: 435px;
list-style: none;
position: absolute;
left: 600px;
top: 0px;
padding: 25px 10px;
}
.comment_wrapper .title {
position: absolute;
top: 0;
margin-top: 10px;
}
.comment_wrapper .comment_list {
overflow: auto;
height: 410px;
}
.comment_wrapper .comment_list::-webkit-scrollbar {
display: none;
}
.comment_wrapper dl {
padding-top: 10px;
padding-left: 55px;
position: relative;
margin-bottom: 20px;
}
.comment_wrapper dt {
position: absolute;
left: 4px;
top: 10px;
cursor: pointer;
}
.comment_wrapper dt img {
width: 40px;
height: 40px;
border-radius: 20px;
}
.comment_wrapper dd {
font-size: 12px;
cursor: pointer;
}
.comment_wrapper .name {
font-weight: bold;
color: #333;
padding-top: 5px;
}
.comment_wrapper .detail {
color: #666;
margin-top: 5px;
line-height: 18px;
}
.audio_con {
height: 50px;
background-color: #f1f3f4;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
.myaudio {
width: 800px;
height: 40px;
margin-top: 5px;
outline: none;
background-color: #f1f3f4;
}
/* 旋转的动画 */
@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: 5s;
}
/* 是否正在播放 */
.player_con.playing .disc,
.player_con.playing .cover {
animation-play-state: running;
}
.play_bar {
position: absolute;
left: 200px;
top: -10px;
z-index: 10;
transform: rotate(-25deg);
transform-origin: 12px 12px;
transition: 1s;
}
/* 播放杆 转回去 */
.player_con.playing .play_bar {
transform: rotate(0);
}
/* 搜索历史列表 */
.search_history {
position: absolute;
width: 296px;
overflow: hidden;
background-color: rgba(255, 255, 255, 0.3);
list-style: none;
right: 23px;
top: 50px;
box-sizing: border-box;
padding: 10px 20px;
border-radius: 17px;
}
.search_history li {
line-height: 24px;
font-size: 12px;
cursor: pointer;
}
.switch_btn {
position: absolute;
right: 0;
top: 0;
cursor: pointer;
}
.right_line {
position: absolute;
left: 0;
top: 0;
}
.video_con video {
position: fixed;
width: 800px;
height: 546px;
left: 50%;
top: 50%;
margin-top: -273px;
transform: translateX(-50%);
z-index: 990;
}
.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;
}
四、images图片
链接:https://pan.baidu.com/s/1dSoLiOb_JopuKBzh3yVPig?pwd=nadp
提取码:nadp