<iframe border="0" frameborder="no" height="86" marginheight="0" marginwidth="0" src="//music.163.com/outchain/player?type=2&id=29436904&auto=1&height=66" width="100%"></iframe>
1、简介
根据B站视频 黑马程序员vue前端基础教程-4个小时带你快速入门vue 学习制作。
再次感谢 免费无私的教学视频。
感谢 @李予安丶 提供的精美的css。
2、展示
3、技术点
- vue2
- axios
4、功能说明
4.1、基本功能
- 搜索歌曲
- 播放歌曲
- 显示歌曲热评
- 播放MV
4.2、修复问题
- 点击MV后音乐无法暂停
- 关闭MV后mv仍在后台播放
5、源代码
作为入门vue的代码,采用的是单文件的形式去编写。
因为html,css,js各自代码有一点多,因此为了提升逻辑性,分开为三个文件。
注意引用css和js的引用路径
5.1 html代码
Show Code
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>悦听~</title> <link rel="icon" href="http://s1.music.126.net/style/favicon.ico?v20180823"> <!-- 引入自定义css --> <link rel="stylesheet" href="./19.css"> </head> <body> <div id="app"> <header> <span class="app-title"> <img src="./19.title.png"> </span> <!-- 搜索歌曲 --> <span class="app-search"> <input type="text" placeholder="搜索歌曲..." v-model="keywords" @keyup.enter="getMusicInfo" /> <a href="javascript:void(0);" @click="getMusicInfo"> <img src="./19.search.png"> </a> </span> </header> </body><main> <!-- 歌曲列表 --> <div class="music-list"> <ul> <li v-for="(item,index) in musicList"> <a href="#"> <img src="./19.run.png" class="music-run-image" @click="playMusic(item.id)"> <span class="music-name" @click="playMusic(item.id)"> {{ item.name }} - {{item.artists[0].name}} </span> <img v-if="item.mvid!=0" @click="playMv(item.mvid)" src="./19.mv.png" class="music-mv-image"> </a> </li> </ul> </div> <!-- 歌曲专辑封面 --> <div class="music-main"> <img :src="picUrl" v-show="picUrl!=''" class="music-cover" :class="isPlay?'running':'paused'"> </div> <!-- 热评列表 --> <div class="comment-list"> <span class="comment-title">热门评论</span> <ul> <li v-for="item in hotCommentList"> <img class="user-header" :src="item.user.avatarUrl"> <span class="username">{{ item.user.nickname }}</span> <p>{{ item.content }}</p> </li> </ul> </div> </main> <!-- 音乐 --> <footer> <audio :src="musicUrl" class="music-player" @play="play" @pause="pause" controls autoplay loop></audio> </footer> <!-- mv视频 --> <div class="music-mv" v-show="isMvShow" @click="closeMusicMv"> <video :src="mvUrl" controls autoplay loop></video> </div> </div> <!-- 导入vue.js --> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <!-- 导入axios --> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <!-- 引入自己编写的js --> <script src="./19.js"></script>
5.2 css代码 (htmk中为19.css)
Show Code
body { background-image: linear-gradient(to left, rgba(248, 121, 248, 0.623), rgba(216, 160, 6, 0.795)); } app {
position: relative; width: 1300px; height: 800px; background-color: aliceblue; margin: 50px auto;
}
header {
width: 100%;
height: 60px;
background-color: #ec4141;
}.app-title {
float: left;
}.app-title img {
height: 60px;
}.app-search {
display: block;
float: right;
width: 600px;
height: 60px;
}.app-search input {
outline: none;
background-color: #ec4141a6;
border: 1px solid #cebdbd7a;
width: 380px;
line-height: 30px;
margin: 15px 140px;
font-size: 13px;
border-radius: 5px;
text-indent: 10px;
color: #cebdbdfd;
}.app-search input:focus {
border: 1px solid #cebdbdfd;
}.app-search img {
width: 28px;
position: relative;
top: -46px;
left: 490px;
}footer {
float: left;
width: 100%;
height: 60px;
background-color: #f1f3f4;
}.music-list {
float: left;
height: 680px;
width: 280px;
position: relative;
left: -191px;
border-right: 1px solid #e0e0e0;
overflow-x: hidden;
overflow-y: auto;
}.music-list ul {
list-style: none;
margin-top: 0px;
}.music-list ul li a {
text-decoration: none;
color: black;
display: block;
line-height: 46px;
width: 278px;
margin-left: -40px;
text-indent: 20px;
font-size: 12px;
}.music-list ul li a:hover {
background-color: #a8a4a433;
}.music-run-image {
width: 20px;
position: relative;
left: -10px;
top: -1px;
}.music-name {
display: inline-block;
width: 120px;
height: 35px;
overflow: hidden;
margin-left: -20px;
}.music-mv-image {
width: 20px;
position: relative;
left: 100px;
top: 0px;
}.comment-list {
float: right;
height: 680px;
width: 300px;
border-left: 1px solid #e0e0e0;
overflow: hidden;
overflow-y: auto;
}.comment-list ul li {
width: 280px;
padding-left: 10px;
list-style: none;
font-size: 13px;
position: relative;
left: -40px;
}.comment-title {
display: block;
line-height: 40px;
text-indent: 10px;
margin-top: 5px;
font-weight: 800;
}.user-header {
width: 35px;
height: 35px;
border-radius: 50%;
}.username {
position: relative;
top: -15px;
left: 10px;
font-size: 12px;
}.music-main {
height: 680px;
width: 700px;
position: absolute;
left: 300px;
}.music-cover {
width: 250px;
position: relative;
left: 180px;
top: 80px;
border-radius: 50%;
border: 50px solid #2a2b2dd2;
animation: fadenum 30s infinite linear;
}.music-detail {
display: block;
color: #2a2b2dab;
position: relative;
text-align: center;
top: 120px;
}.paused {
animation-play-state:paused;
}.running {
animation-play-state:running;
}@keyframes fadenum {
100% {
transform: rotate(360deg);
}
}::-webkit-scrollbar {
width: 1px;
height: 16px;
background-color: #F5F5F5;
}::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(126, 123, 123, 0.103);
border-radius: 10px;
background-color: #F5F5F5;
}::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(139, 136, 136, 0.3);
background-color: rgba(199, 196, 196, 0.507);
}.music-player {
width: 1300px;
}.music-mv {
position: absolute;
z-index: 9999;
width: 1920px;
height: 937px;
background-color: #2a2b2da6;
top: -50px;
left: -310px;
}.music-mv video {
position: relative;
width: 900px;
height: 500px;
left: 500px;
top: 150px;
}
5.3 js代码(html中为19.js)
Show Code
var vue = new Vue({ el:"#app", data: { // 查询关键词 keywords: "", // 歌曲列表 musicList: [], // 热评列表 hotCommentList: [], // 封面地址 picUrl: "", // 歌曲地址 musicUrl: "", // 动画播放状态 isPlay: false, // mv地址 mvUrl: "", // mv显示隐藏 isMvShow: "" }, methods: { getMusicInfo: function() { var that = this; axios.get("https://autumnfish.cn/search?keywords=" + that.keywords) .then(function(response) { console.log(response.data.result.songs) that.musicList = response.data.result.songs; }, function(err) {}) }, playMusic: function(id) { var that = this; // 拼接歌曲地址 this.musicUrl = "https://music.163.com/song/media/outer/url?id="+id+".mp3" console.log(this.musicUrl); //获取歌曲详情 axios.get("https://autumnfish.cn/song/detail?ids=" + id) .then(function(response) { console.log(response) that.picUrl = response.data.songs[0].al.picUrl; }, function(err) {}) //获取热评 axios.get("https://autumnfish.cn/comment/hot?type=0&id=" + id) .then(function(response) { console.log(response) that.hotCommentList = response.data.hotComments; }, function(err) {}) that.isPlay = true; }, play: function() { console.log("play"); this.isPlay = true; }, pause: function() { console.log("pause"); this.isPlay = false; }, playMv: function(mvid) { var that = this; // 暂停播放音乐 document.querySelector("audio").pause(); // 暂停封面动画 that.isPlay = false; //获取mv地址 axios.get("https://autumnfish.cn/mv/url?id=" + mvid) .then(function(response) { console.log(response) // 播放mv that.isMvShow = true; that.mvUrl = response.data.data.url; }, function(err) {}) }, closeMusicMv: function() { // 隐藏mv this.isMvShow = false; // 暂停播放mv document.querySelector("video").pause(); } }
})
PS:
网易云开始全面扩张VIP歌曲范围了,其中包括了我最爱的薛之谦
标签:播放器,function,vue,入门,color,height,width,music,left From: https://www.cnblogs.com/AllenMi/p/vue-get-in-door.html