admin管理员组文章数量:1650912
这是一个简单的基于Vue.js的单页面应用，前端技术栈为vue+axios，小白练手之作，仅供学习使用，效果如下图：
页面布局是常见的css布局，页面主要分为上中下，中间又分为两个侧边栏和主体。
下面是整个页面的实现代码：
1.在html页面中引入axios和vue.js的框架，这里用到的开发环境版本
<!--官网提供的axios在线地址-->
<script src="https://unpkg/axios/dist/axios.min.js"></script>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr/npm/vue/dist/vue.js"></script>
2.引入字体图标
这里使用的字体图标是fontAwesome，需自己提前下载好，并引入。
<link rel="stylesheet" href="../exercise/fa/css/all.css">
3.播放器的html代码
分为三大块：播放器顶部（logo+输入框），播放区（音乐列表+图片+网友评论），播放进度条（注意这里使用的audio标签，并未解决浏览器兼容问题，低版本浏览器不支持）
<body>
<div class="wrap clearfix">
<!--播放器主体区域-->
<div class="play_wrap" id='player'>
<!--播放器顶部-->
<div class="top_bar">
<img src="https://staticssl.kugou/public/root/images/logo.png">
<input type="text" class="input_txt" placeholder="请输入查询的歌曲" v-model='query' @keyup.enter='serachMusic'>
<a href="javascript:;"><i class="fas fa-search"></i></a>
</div>
<!--播放区-->
<ul class="main">
<li class="musci_list box">
<ul class="song_list">
<li v-for='item in musicList'>
<a href="javascript:;" class="pre" @click='playMusic(item.id)'><i
class="fa fa-play"></i></a>
<span>{{item.name}}</span>
<a href="javascript:;" class="last" v-if='item.mvid!=0' @click='playMv(item.mvid)'><i
class="fas fa-video"></i></a>
</li>
</ul>
</li>
<li class="music_palyer box">
<div class="cd"></div>
<div class="cd1"></div>
<img v-bind:src="musicCover" class="cover" v-bind:class='{playing:isPlaying}'>
</li>
<li class="hot_comment box">
<span>热门留言</span>
<ul class="comment">
<li v-for='item in hotComment' class="clearfix">
<span><img v-bind:src="item.user.avatarUrl"></span>
<span class="name">{{item.user.nickname}}</span>
<span class="detail clearfix">{{item.content}}</span>
</li>
</ul>
</li>
</ul>
<!--进度栏-->
<div class="progress_bar">
<audio v-bind:src="musicUrl" controls='controls' autoplay='autoplay' loop='loop' class="myaudio"
@play='play' @pause='pause'></audio>
</div>
<div class="mask" style="display: none;" v-show='isShow' @click='hide'>
<div class="video_con" style="display: none;" v-show='isShow'>
<video :src='MvUrl' controls='controls'></video>
</div>
</div>
</div>
</div>
</body>
4.播放器css样式
居中图片的旋转，使用了animation
body {
background-color: rgba(182, 177, 177, 0.6);
}
ul {
list-style: none;
padding: 0;
}
.clearfix::before,
.clearfix::after {
/*最后一行内容为空*/
content: '';
clear: both;
display: block;
}
* {
margin: 0px;
padding: 0px;
}
.play_wrap {
width: 1000px;
height: 600px;
/* background-color: rgb(213, 247, 247); */
margin: 50px auto;
box-shadow: 0 0 5px rgb(156, 154, 154);
}
.play_wrap .top_bar {
width: 100%;
height: 60px;
background-color: rgb(50, 9, 95);
position: relative;
}
.play_wrap .top_bar img {
position: absolute;
top: 10px;
left: 20px;
}
.play_wrap .top_bar .input_txt {
position: absolute;
right: 20px;
top: 10px;
width: 400px;
height: 60%;
border-radius: 50px;
font-style: italic;
border: none;
outline: none;
}
.play_wrap .top_bar a {
color: rgb(184, 184, 184);
font-size: 24px;
position: absolute;
right: 30px;
top: 13px;
font-weight: lighter;
}
.play_wrap .main {
width: 100%;
height: 82.7%;
/* background-color: rgb(238, 223, 232); */
/* background-color: rgb(233, 235, 248); */
list-style: none;
padding: 0;
margin-bottom: 0px;
margin-top: 0;
}
.play_wrap .main .box {
float: left;
}
.play_wrap .main .musci_list {
margin-left: 10px;
padding-top: 10px;
width: 21%;
height: 100%;
border-right: 1px solid black;
/* background-color: greenyellow; */
}
.play_wrap .main .musci_list .song_list {
width: 100%;
height: 100%;
overflow: auto;
}
/*去除代码滚动条*/
.play_wrap .main .musci_list .song_list::-webkit-scrollbar {
display: none;
}
.play_wrap .main .musci_list li {
position: relative;
width: 95%;
margin-left: 5px;
height: 40px;
background-color: rgba(182, 177, 177, 0.6);
margin-bottom: 3px;
}
.play_wrap .main .musci_list li .pre {
color: rgb(126, 7, 7);
position: absolute;
left: 5px;
top: 10px;
}
.play_wrap .main .musci_list li .last {
/* display: inline-block; */
color: rgb(173, 12, 12);
position: absolute;
right: 5px;
top: 10px;
}
.play_wrap .main .musci_list li span {
position: absolute;
top: 12px;
left: 20px;
font-size: 14px;
}
.play_wrap .main .music_palyer {
width: 56%;
height: 100%;
border-right: 1px solid black;
/* background-color: rgb(241, 234, 224); */
background-color: rgb(233, 235, 248);
position: relative;
}
.play_wrap .main .music_palyer .cd {
width: 168px;
height: 66px;
background: url('../img/cd.png');
position: absolute;
top: 25px;
left: 200px;
transform: rotateZ(20deg);
z-index: 9999;
/* background-color: rgb(122, 118, 118); */
}
.play_wrap .main .music_palyer .cd1 {
width: 388px;
height: 388px;
background: url('../img/cd1.png');
position: absolute;
top: 70px;
left: 100px;
z-index: 999;
}
.play_wrap .main .music_palyer .cover {
left: 161px;
top: 130px;
position: absolute;
width: 267px;
height: 267px;
border-radius: 50%;
z-index: 1;
}
.playing {
animation: rotate 24s linear infinite;
}
@keyframes rotate {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
}
.play_wrap .main .hot_comment {
position: relative;
padding-top: 10px;
width: 21%;
height: 100%;
/* background-color: green; */
}
.play_wrap .main .hot_comment span {
margin-left: 10px;
font-weight: 800;
font-size: 16px;
color: rgb(92, 91, 91);
}
.play_wrap .main .hot_comment ul li {
position: absolute;
width: 95%;
/* height: 200px; */
height: auto;
background-color: rgb(204, 204, 204);
left: 10px;
color: rgb(122, 118, 118);
position: relative;
/* display: flex; */
margin-bottom: 3px;
}
.play_wrap .main .hot_comment ment {
width: 100%;
height: 100%;
overflow: auto;
/* background-color: rgb(173, 12, 12); */
}
/*去除滚动条*/
.play_wrap .main .hot_comment ment::-webkit-scrollbar {
display: none;
}
.play_wrap .main .hot_comment ul li .name {
display: inline-block;
width: 80px;
height: auto;
margin-top: 0px;
font-size: 12px;
text-align: center;
}
.play_wrap .main .hot_comment ul li img {
width: 50px;
height: 50px;
margin-top: 3px;
border-radius: 50%;
}
.play_wrap .main .hot_comment ul li .detail {
width: 140px;
height: auto;
margin-left: 50px;
padding-bottom: 10px;
font-size: 12px;
font-weight: lighter;
display: flex;
}
.play_wrap .progress_bar {
width: 100%;
height: 44px;
position: relative;
background-color: rgb(241, 243, 244);
}
.play_wrap .progress_bar .myaudio {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
outline: none;
}
.mask {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
z-index: 99999;
background-color: rgb(59, 58, 58);
}
.mask video {
position: absolute;
top: 120px;
left: 450px;
}
5.播放器js代码
window.onload=function(){
var app=new Vue({
el:'#player',
data:{
query:'',
//歌曲数组
musicList:[],
//歌曲地址
musicUrl:'',
//歌曲封面
musicCover:'',
//歌曲评论
hotComment:[],
//动画播放状态
isPlaying:false,
//遮罩层的显示状态
isShow:false,
//mv地址
MvUrl:''
},
methods:{
serachMusic:function(){
var that=this;
//歌曲搜索接口
axios.get('https://autumnfish/search?keywords='+this.query)
.then(function(response){
// console.log(response);
that.musicList=response.data.result.songs;
},function(err){})
},
playMusic:function(musicId){
var that=this;
//获取歌曲地址
// console.log(musicId);
axios.get('https://autumnfish/song/url?id='+musicId)
.then(function(response){
// console.log(response.data.data[0].url);
that.musicUrl=response.data.data[0].url;
},function(err){})
//歌曲详情获取
axios.get('https://autumnfish/song/detail?ids='+musicId)
.then(function(response){
// console.log(response.data.songs[0].al.picUrl);
that.musicCover=response.data.songs[0].al.picUrl;
},function(err){})
//歌曲评论的获取
axios.get('https://autumnfish/comment/hot?type=0&id='+musicId)
.then(function(response){
console.log(response);
console.log(musicId);
console.log(response.data.hotComments);
that.hotComment=response.data.hotComments;
// console.log(that.hotComment[0].nickname);
},function(err){
console.log(404);
})
},
play:function(){
// console.log('play');
this.isPlaying=true;
},
pause:function(){
// console.log('pause');
this.isPlaying=false;
},
//播放mv
playMv:function(mvid){
var that=this;
axios.get('https://autumnfish/mv/url?id='+mvid)
.then(function(response){
// console.log(response);
that.MvUrl=response.data.data.url;
that.isShow=true;
},function(err){})
},
//隐藏
hide:function(){
this.isShow=false;
}
}
})
}
版权声明：本文标题：Vue.js+axios制作的仿酷狗音乐-音乐播放界面 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/xitong/1729548525a1205936.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论