Vue音乐播放器
效果图
实现功能
1、样式基本美观
2、响应式布局
3、输入查询，通过api接口获取歌曲基本信息列表
4、双击歌曲，获取歌曲封面及评论，并播放歌曲，封面图开始旋转，播放杆放下
5、点击暂停，停止播放，封面图停止旋转，播放杆抬起
主体HTML部分
<div id="wrap"> <div id="main"> <div id="nav"> <img src="img/162303413685758.png"> <input v-model="musicName" type="text" placeholder="请输入想听的歌曲" @keyup.enter="search()" /> <img @click="search()" src="img/zoom.png" /> </div> <div id="content"> <!-- 歌曲清单 --> <div id="scrollbar" class="list" data-rsssl=1 onload="loaded()"> <ul> <li @dblclick="playMusic(music.id)" v-for="music in musicArr"> {{music.name}}--{{music.artists[0].name}} </li> </ul> </div> <!-- 播放动画 --> <div class="picture" class="player_con"> <img src="img/disc.png" class="disc autoRotate " :class="{playing: playingTag}" > <img src="img/player_bar.png" class="play_bar " :class="{playing: playingTag}"> <img id="rotate" v-bind:src="cover" class="cover autoRotate" :class="{playing: playingTag}"> </div> <!-- 用户评论 --> <div class="comment"> <dl v-for="music in comments"> <dt><img v-bind:src="music.user.avatarUrl"></dt> <dd>{{music.user.nikename}}</dd> <dd>{{music.content}}</dd> </dl> </div> </div> <div id="audio"> <audio controls :src="musicSrc" autoplay="autoplay" @play='toplay' @pause='toPause'> </audio> </div> </div> </div>
动画
/* 动画 */ @keyframes rote { from { transform: rotateZ(0deg); } to { transform: rotateZ(360deg); } } /* 旋转的类名 */ .autoRotate { animation-name: rote; animation-iteration-count: infinite; animation-play-state: paused; animation-timing-function: linear; animation-duration: 5s; } /* 是否正在播放 */ .playing { animation-play-state: running; } .play_bar { position: absolute; left: 200px; top: -10px; z-index: 10; transform: rotate(-25deg); transform-origin: 12px 12px; transition: 1s; } /* 播放杆 转回去 */ .play_bar.playing { transform: rotate(0); } /* Vue动画类 */ .list-enter-active, .list-leave-active { transition: all 1s; } .list-enter, .list-leave-to { opacity: 0; transform: translateY(30px); }
axios查询获取歌曲信息
search: function() { var music = this; var err; axios.get("https://autumnfish.cn/search?keywords=" + this.musicName).then(function(resp) { music.musicArr = resp.data.result.songs; console.log(musicArr); }) .catch(function(err) { console.log("警告：查询音乐错误"); }) },
获取封面评论
playMusic: function(musicId){ console.log(musicId);//歌曲id document.getElementById("rotate").style.animate="rote 10s infinite"; var ul = this; // 获取音乐播放地址 axios.get("https://autumnfish.cn/song/url?id="+musicId).then(function(resp){ ul.musicSrc = resp.data.data[0].url; }).catch(function(err){ console.log("警告：获取音乐播放地址错误"); }), // 获取专辑封面地址 axios.get("https://autumnfish.cn/song/detail?ids="+musicId).then(function(resp){ ul.cover = resp.data.songs[0].al.picUrl; }).catch(function(err){ console.log("警告：获取专辑封面地址错误"); }), // 获取评论 axios.get("https://autumnfish.cn/comment/hot?type=0&id="+musicId).then(function(resp){ ul.comments = resp.data.hotComments; }).catch(function(err){ console.log("警告：获取评论错误"); }) },
效果展示
