vue音乐播放器
利用vue写一个简单的音乐播放器,包括功能有歌曲搜索、歌曲播放、歌曲封面、歌曲评论、播放动画、mv播放六个功能。
<template>
<div class="wrap">
<!-- 播放器主体区域 -->
<div class="play_wrap" id="palyer">
<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>
<i v-show="item.mvid!=0" @click="playMv(item.mvid)"></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="imgUrl== ''?'./images/cover.png':imgUrl" class="cover autoRotate" />
</div>
<!-- 评论容器 -->
<div class="comment_wrapper">
<h5 class="title">热门留言</h5>
<div class="comment_list">
<dl v-for="item in musicComments">
<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">
<video ref="video" :src="mvUrl" controls="controls"></video>
<div class="mask" @click="closeVideo"></div>
</div>
</div>
</div>
</template> <script>
export default {
name: "App",
data: () => {
return {
query: "",
musicList: [],
musicUrl: "",
imgUrl: "",
musicComments: [],
isPlaying: false,
mvUrl: "",
isShow: false
};
},
methods: {
//音乐查询
searchMusic: function() {
var that=this;
this.$axios({
url: "https://autumnfish.cn/search?keywords=" + that.query,
methods: "get"
})
.then(res => {
// console.log(res.data.result.songs);
that.musicList = res.data.result.songs;
})
.catch(err => {
console.log(err);
}); },
//音乐播放
playMusic: function(musicId) {
var that=this;
this.$axios({
url: "https://autumnfish.cn/song/url?id=" + musicId,
methods: "get"
})
.then(res => {
//console.log(res.data.data[0].url);
that.musicUrl = res.data.data[0].url;
})
.catch(err => {
console.log(err);
});
//音乐封面
this.$axios({
url: "https://autumnfish.cn/song/detail?ids=" + musicId,
methods: "get"
})
.then(res => {
//console.log(res.data.songs[0].al.picUrl);
that.imgUrl = res.data.songs[0].al.picUrl;
})
.catch(err => {
console.log(err);
});
//热门评论
this.$axios({
url: "https://autumnfish.cn/comment/hot?type=0&id=" + musicId,
methods: "get"
})
.then(res => {
//console.log(res.data.hotComments);
that.musicComments = res.data.hotComments;
})
.catch(err => {
console.log(err);
});
},
//播放时动画打开
play: function() {
this.isPlaying = true;
},
//暂停时动画暂停
pause: function() {
this.isPlaying = false;
},
//获取mv的Url
playMv: function(mvId) {
var that=this;
if (mvId) {
this.isShow = true;
this.$axios({
url: "https://autumnfish.cn/mv/url?id=" + mvId,
methods: "get"
})
.then(res => {
//console.log(res.data.data.url);
that.mvUrl = res.data.data.url;
})
.catch(err => {
console.log(err);
});
}
},
//关闭mv
closeVideo: function() {
this.isShow = false;
//关闭之后,视频也不再播放了
this.$refs.video.pause();
}
},
created: function() {}
};
</script> <style>
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: #1eacda;
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;
} .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 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;
} .comment_wrapper dt img {
width: 40px;
height: 40px;
border-radius: 20px;
} .comment_wrapper dd {
font-size: 12px;
} .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;
}
</style>
vue音乐播放器的更多相关文章
- 一个基于H5audio标签的vue音乐播放器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue 音乐播放器报错
使用Vue报错[Vue warn]: Error in nextTick: "TypeError: fn.bind is not a function"页面进不去. 检查:看看da ...
- Vue音乐播放器(三):项目目录介绍,以及图标字体、公共样式等资源准备
我们所有的开发都是基于修改src下面的目录 里面的文件去做开发即可 stylus的使用是需要下载stylus-loader的包的 渲染效果 配置修改eslintrc.js 配置了webpack.bas ...
- 如何用vue打造一个移动端音乐播放器
写在前面 没错,这就是慕课网上的那个vue音乐播放器,后台是某音乐播放器的线上接口扒取,虽然这类项目写的人很多,但不得不说这还是个少有的适合vue提升的好项目,做这个项目除了想写一个比较大并且功能复杂 ...
- 02 Vue介绍与安装,指令系统 v-*、音乐播放器
VUE文档 https://cn.vuejs.org/v2/guide/ 1.vue的介绍 尤雨溪 1.vue的优点 2.vue的介绍 3.vue的安装 4.声明式渲染 <body> &l ...
- vue小练习--音乐播放器
1 首先建一个文件夹 放几首歌曲 2 看代码 1)基本版本 <!DOCTYPE html> <html lang="zh-CN"> <head> ...
- vue——一个页面实现音乐播放器
请忽略下面这段文字年关将至,时间好歹又多出了些许.却不敢过度消遣.岁月未曾饶过我,我亦不想饶过岁月.且将它塞得膨胀,让这一年看似加更充实.不曾料想我一个爱些风花雪月.研墨行歌之人,却做起了碼农这一行当 ...
- SE Springer小组之《Spring音乐播放器》可行性研究报告三、四
3 对现有系统的分析 由于本次可行性分析主要是建立在团队自行实现一个音乐软件的目标上,并不是在一个现有系统的基础上开发改进的新系统.因此这里将分析一款市面上已经存在的音乐软件(以下称为W音乐),并为之 ...
- 卡拉OK效果的实现-iOS音乐播放器
自己编写的音乐播放器偶然用到这个模块,发现没有思路,而且上网搜了搜,关于这方面的文章不是很多,没找到满意的结果,然后自己也是想了想,最终实现了这种效果,想通了发现其实很简单. 直接上原理: 第一种: ...
随机推荐
- 跨AppDomain通信
public class AppDomainTest : MarshalByRefObject { public string TestMethodStr(string srcAppDomain) { ...
- DOM操作节点对象集合
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- JS高级---数组和伪数组
数组和伪数组 伪数组和数组的区别 真数组的长度是可变的 伪数组的长度不可变 function f1() { var sum = 0; for (var i = 0; i < arguments ...
- AdaBoost级联分类器
Haar分类器使用AdaBoost算法,但是把它组织为筛选式的级联分类器,每个节点是多个树构成的分类器,且每个节点的正确识别率很高.在任一级计算中,一旦获得“不在类别中”的结论,则计算终止.只有通过分 ...
- 动态规划 ---- 最长不下降子序列(Longest Increasing Sequence, LIS)
分析: 完整 代码: // 最长不下降子序列 #include <stdio.h> #include <algorithm> using namespace std; ; in ...
- SP1716 GSS3 - Can you answer these queries III - 动态dp,线段树
GSS3 Description 动态维护最大子段和,支持单点修改. Solution 设 \(f[i]\) 表示以 \(i\) 为结尾的最大子段和, \(g[i]\) 表示 \(1 \sim i\) ...
- (转)KMP算法
转自:http://blog.csdn.net/yutianzuijin/article/details/11954939 我们首先用一个图来描述kmp算法的思想.在字符串O中寻找f,当匹配到位置i时 ...
- 在Unity3d中使用Google.ProtocolBuffers
通过Nuget下载Google.ProtocolBuffers,在目录中找到net35下的文件,放入unity3d中作为插件 PersonMessage.Builder personBuilder = ...
- MySql -- primary key主键约束
4.primary key主键约束 在一张表中: 1) 主键约束是 NOT NULL.UNIQUE唯一的记录. 2) 主键约束必须是唯一的值. 3) 主键约束列不能包含 NULL 值. 注意:每个表都 ...
- 使用imread()函数读取图片的六种正确姿势
OpenCV实践之路——使用imread()函数读取图片的六种正确姿势 opencv里的argv[1]指向的文件在哪里 测试 #include "opencv2/highgui/highgu ...