生活随笔
收集整理的这篇文章主要介绍了
基于Vue和axios的音乐播放器——悦听音乐效果展示及代码分享
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
接口还是网易的，毕竟它家的公开，也就搜搜网易云音乐的歌了。不想敲的，可以用下面的
gitee地址: link.
https://gitee.com/lyh1999/enjoy-listening-music
<!DOCTYPE html>
<html lang="en"><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>Document
</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script src="https://unpkg.com/axios/dist/axios.min.js"></script><link rel="stylesheet" href="./index.css"><script src="./index.js"></script>
</head><body><div id="app"><div class="play_wrap" id="player"><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,index) in musicList"><a href="javascript:;" @click="playMusic(item.id)"></a><b>{{item.name}}
</b><span v-if="item.mvid!=0" @click="playMv(item.mvid)"><i></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="musicCover" class="cover autoRotate" /></div><div class="comment_wrapper"><h5 class='title'>热门留言
</h5><div class='comment_list'><dl v-for="item in hotComments"><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" style="display: none;" v-show="isShow"><video controls="controls" :src="mvUrl"></video><div class="mask" @click="hide"></div></div></div></div>
</body></html>
window
.onload = function() {var app
= new Vue({el
: '#app',data
: {query
: '任贤齐',musicList
: [],musicUrl
: '',musicCover
: '',hotComments
: [],isPlaying
: false,isShow
: false,mvUrl
: ''},methods
: {searchMusic() {var that
= thisaxios
.get('https://autumnfish.cn/search?keywords=' + this.query
).then(function(res
) {that
.musicList
= res
.data
.result
.songs
}, function(err
) {console
.log(err
);})},playMusic(musicId
) {var that
= thisaxios
.get("https://autumnfish.cn/song/url?id=" + musicId
).then(function(res
) {that
.musicUrl
= res
.data
.data
[0].url
}, function(err
) {console
.log(err
);})axios
.get('https://autumnfish.cn/song/detail?ids=' + musicId
).then(function(res
) {that
.musicCover
= res
.data
.songs
[0].al
.picUrl
}, function(err
) {console
.log(err
);})axios
.get('https://autumnfish.cn/comment/hot?type=0&id=' + musicId
).then(function(res
) {that
.hotComments
= res
.data
.hotComments
}, function(err
) {console
.log(err
);})},play() {this.isPlaying
= true},pause() {this.isPlaying
= false},playMv(mvid
) {var that
= this;axios
.get("https://autumnfish.cn/mv/url?id=" + mvid
).then(function(response
) {console
.log(response
.data
.data
.url
);that
.isShow
= true;that
.mvUrl
= response
.data
.data
.url
;},function(err
) {});},hide() {this.isShow
= false}}})
}
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
;
}.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
;
}
总结
以上是生活随笔为你收集整理的基于Vue和axios的音乐播放器——悦听音乐效果展示及代码分享的全部内容，希望文章能够帮你解决所遇到的问题。
如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。
