2. 程式人生 > >案例:用vue開發網易雲音樂(已實現線上播放和下載)

案例:用vue開發網易雲音樂(已實現線上播放和下載)

阿新 • • 發佈：2019-01-08

效果如圖:
在這裡插入圖片描述

完整程式碼:

<!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="#">{{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/[email protected]"></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開發網易雲音樂(已實現線上播放和下載)

效果如圖: 完整程式碼: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content

用selenium進行網易雲音樂進行評論爬取

用selenium進行網易雲音樂進行評論爬取，然後做成詞雲圖 這個是抓取刀郎-黃玫瑰的評論詞雲 以下是抓取的程式碼，初學者，可能不是很完美，能執行。。呵呵。 #!/usr/bin/python # -*- coding: <encoding name> -*- i

Qt-網易雲音樂介面實現-7 訊息中心實現，主要是QListWidget 自定義Item 和QTabwidget使用

最近寫的有點煩躁， 感覺內容真的很多！很多！很多。目前真的想知道網易官方在出這款產品是，用了多少人和多長時間。今天寫的這個訊息中心，有點糙，只是原理實現了沒有完全複製過來，心裡有團火，不想寫了。看下效果吧其實這個訊息中心的內容到時很簡單，最底層一個Qtabwidgte，構成@

C#網易雲音樂中需付費歌曲的下載助手。

           網易雲音樂要收費了，部分歌曲只能聽不能下載，還是很遺憾的。閒來無事，寫了個收費歌曲的下載助手。 下載連結：連結：http://pan.baidu.com/s/1ge5stgB 密碼：f9qo 使用方法： 1、安裝.net framework 4.0

據網易雲音樂上面的歌單來下載FLAC無損音樂

現在無損資源基本都是專輯, 很難找到單曲來下載. 而且下載需要每個專輯搜尋一遍, 需要用雲盤複製貼上密碼再下載. 這對於聽Hi-Fi的人們來說是非常不便利的事情, 找歌曲可以找一整天. 而現在網易雲音樂是絕大多數人聽線上歌曲的平臺, 歌單眾多. 於是

Python + Mysql 打造網易雲音樂 熱評庫 + 評論頭像下載【2】

熱歌榜 熱評 我這裡是通過儲存為本地檔案進行獲取。 import requests import json import os from urllib.request import urlretrieve from MySql import MysqlCon

用RotateDrawable實現網易雲音樂唱片機效果

image 不難 線程 們的 progress ogr icon 什麽 als 有一段時間沒有更新文章了，記得上一篇文章講的是《用ClipDrawable實現音頻錄制麥克風講話效果》，用戶反響也都還不錯，自己也是深受鼓勵。事實上從那之後就一直想寫一篇

我用Python爬取網易雲音樂上的Hip-hop歌單，分析rapper如何押韻

line gone 謠言 大致 -i 態度 大眾 其中 當前 緣起 《中國有嘻哈》這個節目在這個夏天吸引了無數的目光，也讓嘻哈走進了大眾的視野。作為我今年看的唯一一個綜藝節目，它對我的影響也蠻大。這個夏天，我基本都在杭州度過，在上下班的taxi上，我幾乎都在刷這個節目，最後

第二次作業：網易雲音樂案例分析

他也 center 大學 www. 榜單 粉絲 很好 無法使用 內容 你選擇的產品是？ 網易雲音樂 為什麽選擇該產品作為分析？ 自己非常喜歡聽音樂，用過了網易雲音樂之後，覺得很好用。 該產品是怎麽誕生的（在什麽樣的背景下）？

iOS 開發仿網易雲音樂歌詞海報

atomic keyword draw write mode () 解析 efault album 使用網易雲音樂也是一個巧合，我之前一直使用QQ音樂聽歌，前

在應用開發中，網易雲音樂如何兼顧質量和效益

在應用開發中，質量和效益是非常關鍵的因素。網易雲音樂作為使用者人數突破4億，成就移動音樂傳奇的應用，是如何在開發中兼顧質量和效益的？網易雲音樂Android負責人樑建將為您解讀。 框架賦能 典型的開發框架從上往下分為三層，分別是業務層、服務層、能力層，三者之間是垂直依賴的關係，且業務層之間的水平模組不互相依

用python爬取網易雲音樂，新手看了也能操作

今天小編帶大家一起來利用Python爬取網易雲音樂，分分鐘將網站上的音樂down到本地。跟著小編執行過程式碼的筒子們將網易雲歌詞抓取下來已經不再話下了，在抓取歌詞的時候在函式中傳入了歌手ID和歌曲名兩個引數，其實爬取歌曲也是同樣的道理，也需要傳入這兩個引數，只不過網易雲歌曲的

Android仿網易雲音樂開發之緣起

        於Android開發，抑或其他開發，我都屬於一個菜鳥級別的人物，我也算是抖音中毒的一位~但是我看上面的視訊卻笑不起來，更多的有心無力。一把年紀了還在為一點死工資掙扎，大好世界我也想出去走走。然而我翻了一下支付寶餘額，微信餘額，一顆辭職的心收起來了，不敢自稱碼農

爬蟲入門——用python爬取網易雲音樂熱門歌手評論數

本文參考Monkey_D_Newdun 的文章用爬蟲獲取網易雲音樂熱門歌手評論數執行平臺：Windows 10IDE：spyderPython版本：3.6瀏覽器：360一、爬蟲基本思路a. 通過URL或者檔案獲取網頁：開啟網頁-F12-找到需要獲取的url，request h

網易雲音樂評論催淚刷屏？我用Python抓取了1008328條熱評告訴你為什麼！

如果再過20年，你還會記得那些年上過的網易雲熱評嗎？看了那麼多的網易雲熱評，技術思維作祟，我終於

用Java實現網易雲音樂爬蟲（非selenium）

主要內容： 使用httpclient（非模擬瀏覽器） 使用網易雲音樂api 採集：評論和使用者最近聽歌的統計 思路： 用一首歌的id作為入口，得到下面的所有評論 –> 取出

用系統方法實現網易雲音樂VC翻轉動畫

翻轉動畫僅僅是VC切換動效的一種，通過此方法可以方便的實現VC切換的各種動效。 思路： MasterVC作為根檢視控制器 AAVC和BBVC之間切換均通過MasterVC進行。 Master

基於Taro與typescript開發的網易雲音樂小程式（持續更新）

基於Taro與網易雲音樂api開發，技術棧主要是：typescript+taro+taro-ui+redux,目前主要是著重小程式端的展示，主要也是藉此專案強化下上述幾個技術棧的使用，通過這個專案也可以幫助你快速使用Taro開發一個屬於你自己的小程式～ github地址：taro-music，感興趣的話可

python爬取網易雲音樂歌單音樂

string attrs default textarea bsp color read contents dom 在網易雲音樂中第一頁歌單的url：http://music.163.com/#/discover/playlist/ 依次第二頁：http://music.1

Android ScrollView滾動實現大眾點評、網易雲音樂評論懸停效果

ins schema bar 音樂 layout mage for bin andro 今天聽著網易雲音樂，寫著代碼，真是爽翻了。 http://blog.csdn.net/linshijun33/article/details/47910833 網