本文實例講述了vue實現的網易云音樂在線播放和下載功能。分享給大家供大家參考，具體如下：
效果如圖:
完整代碼:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style lang=""> html, body { height: 100%; padding: 0; margin: 0; } #app { height: 100%; display: flex; } #app>#left { flex: 1; background-color: skyblue; text-align: center; /* 超出滾動 */ overflow: scroll; } #app>#right { flex: 1; background-color: orange; } ul { list-style: none; padding: 0; } input { width: 469px; height: 56px; margin: 10px auto; border-radius: 10px; outline: none; font-size: 24px; border: 0; padding-left: 15px; } #left li { width: 451px; /* height: 35px; */ margin: 0 auto; font-weight: 700; border: 2px solid black; line-height: 35px; color: white; background-color: cadetblue; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; max-height: 35px; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } #left li:hover { cursor: pointer; background-color: greenyellow; color: red; } #right { position: relative; overflow: scroll; } audio { /* position: absolute; left: 50%; transform: translateX(-50%) translateY(46px); */ display: block; margin: 0 auto; } /* li標簽過渡的樣式 */ .list-item { display: inline-block; margin-right: 10px; } .list-enter-active, .list-leave-active { transition: all 1s; } .list-enter, .list-leave-to{ opacity: 0; transform: translateX(100px); } /* 設置專輯圖片樣式 */ .cover{ width: 260px; height: 260px; border-radius: 50%; display: block; margin: 10px auto; /* transform: translateX(-50%) translateY(10px); */ } /* 動畫 */ @keyframes autoRotate{ to{ transform: rotateZ(360deg); } } /* 動畫播放樣式 */ .autoRotate{ /* 動畫名,一直播放iteration(一直重復),勻速(timing)，時間2s(duration),狀態(running) */ animation-name:autoRotate; animation-iteration-count:infinite; animation-timing-function: linear; animation-duration:2s; animation-play-state:running; } /* 動畫狀態 */ .pause{ animation-play-state:paused; } /* 評論 */ .comment{ height: 150px; /* background-color: skyblue; */ } .comment li{ display: flex; padding: 5px; } .comment li .left{ width: 120px; height: 120px; } .comment li .left img{ width: 100px; } .comment li a{ text-decoration: none; font-weight: bold; color: crimson; } </style></head><body> <div id="app"> <!-- 左邊 --> <div id="left"> <input type="text" value="請輸入你要搜索的歌名" v-model="inputValue" @keyup.enter="search"> <!-- 給li添加過渡 ;v-on:after-enter="afterEnter":鉤子函數--> <transition-group name="list" tag="ul" v-on:after-enter="afterEnter"> <!-- play(item.id):把id傳過去 --> <li v-for="(item, index) in musicList" :key="item.id" @dblclick="playMusic(item.id,item.album.id)" :style="{'transition-delay':index*100+'ms'}" > {{item.name}}-----演唱者:{{item.artists[0].name}} </li> </transition-group> </div> <!-- 右邊,播放 --> <div id="right"> <!-- 專輯頁面 --> <img :src="picUrl" alt="" class="cover autoRotate" :class="{pause:isPause}"> <!-- autoplay:自動播放,controls顯示控件 ;@play="play"是自定義方法--> <audio :src="songUrl" autoplay controls @play="play" @pause="pause" ></audio> <h3>精彩評論</h3> <div class="comment"> <ul> <!-- 遍歷數組時,需要動畫時才用到key --> <li v-for="(item, index) in comments" > <div class="left"> <img :src="item.user.avatarUrl" alt=""> </div> <div class="right"> <a href="#" rel="external nofollow" >{{item.user.nickname}}</a> <p>{{item.content}}</p> </div> </li> </ul> </div> </div> </div> rightv></body><!-- 導入vue --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!-- 導入vue插件 --><script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script><script> //代碼 /* 音樂播放器 需求1: 搜索歌曲 發送網絡請求 回調函數函數中渲染數據 有動畫 需求2: 雙擊播放歌曲 根據id調用接口 查詢數據 通過audio播放歌曲 獲取專輯的信息 進而獲取封面 展示給用戶 需求3 播放歌曲時 封面轉動 暫停播放時 封面停止轉動 步驟: 1.先寫動畫樣式,動畫命名為autoRotate,因為是一直運動,所以使用animation; 2.同時寫一個暫停的樣式,命名為pause,給data添加一個isPause來存值,默認給一個false 3.添加運動和暫停的步驟是添加上面的兩個類,但是pause要使用v-bind指令來設置屬性; 4.在audio音頻里添加播放和暫停的點擊方法,在對應的方法里設置對應的布爾值; 需求4 點擊播放歌曲 同時獲取這首歌的評論 步驟:1.在數據中聲明一個comments的空數組,用來存評論內容 2.在播放方法中寫獲取評論的接口 3.在響應體里將內容賦值給聲明的數組 */ let app = new Vue({ el: "#app", data: { inputValue: '',//輸入的值 musicList: [], //存儲歌列表 songUrl: '',//播放歌曲的url picUrl:'',//獲取專輯信息 isPause:false,//專輯是否暫停 comments:[]//評論內容 }, methods: { // li標簽過渡的事件 randomIndex: function () { return Math.floor(Math.random() * this.items.length) }, add: function () { this.items.splice(this.randomIndex(), 0, this.nextNum++) }, remove: function () { this.items.splice(this.randomIndex(), 1) }, //搜索歌曲事件 search() { //調用接口 this.$http.get(`https://autumnfish.cn/search?keywords=${this.inputValue}`).then(response => { // console.log(response); //將結果添加到musicList中 this.musicList = response.body.result.songs; }, response => { // error callback alert("出錯了") }); }, // 雙擊播放歌曲事件,接收傳過來的id playMusic(id,albumId) { //獲取歌曲的url this.$http.get(`https://autumnfish.cn/song/url?id=${id}`).then(response => { // console.log(response); //將結果添加到musicList中 this.songUrl = response.body.data[0].url; }, response => { // error callback alert("出錯了") }); // 獲取專輯信息 this.$http.get(`https://autumnfish.cn/album?id=${albumId}`).then(res=>{ this.picUrl=res.body.album.blurPicUrl; }),err=>{} //獲取評論內容接口 this.$http.get(`https://autumnfish.cn/comment/music?id=${id}&limit=1`).then(res=>{ console.log(res); this.comments=res.body.hotComments; }),err=>{ alert('信息錯誤') } }, //鉤子函數:動畫執行完后去除了style屬性,不去掉會卡頓 afterEnter(el){ el.style=''; }, // 專輯圖片旋轉事件 play(){ console.log('播放'); this.isPause=false; }, pause(){ console.log('暫停'); this.isPause=true; } }, })</script></html>如果接口不能使用:請登錄https://github.com/huanggengzhong/NeteaseCloudMusicApi,重新下載開啟服務器即可
希望本文所述對大家vue.js程序設計有所幫助。
新聞熱點
疑難解答
