碼上歡樂
相關內容    簡體    繁體

vuejs之構建簡易音樂播放器

本文轉載自   查看原文   2020-02-18 14:34   1139    js

一步步來，先看下目前的樣式：

<!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>悅聽player</title>
  <!-- 樣式 -->
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <div class="wrap">
    <!-- 播放器主體區域 -->
    <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><a href="javascript:;"></a> <b>你好</b> <!----></li>
           <li><a href="javascript:;"></a> <b>你好</b> <span><i></i></span></li>
          </ul>
          <img src="images/line.png" class="switch_btn" alt="">
        </div>
        <!-- 歌曲信息容器 -->
        <div class="player_con" class="playing">
          <img src="images/player_bar.png" class="play_bar" />
          <!-- 黑膠碟片 -->
          <img src="images/disc.png" class="disc autoRotate" />
          <img src="images/cover.png" class="cover autoRotate" />
        </div>
        <!-- 評論容器 -->
        <div class="comment_wrapper">
          <h5 class='title'>熱門留言</h5>
          <div class='comment_list'>
            <dl >
              <dt><img src="./images/person.png" alt=""></dt>
              <dd class="name">鹽焗西蘭花</dd>
              <dd class="detail">
                絕對值得一聽，吹爆
              </dd>
            </dl>
          </div>
          <img src="images/line.png" class="right_line">
        </div>
      </div>
      <div class="audio_con">
        <audio ref='audio'  src="" controls autoplay loop class="myaudio"></audio>
      </div>
      <div class="video_con"  style="display: none;">
        <video  controls="controls"></video>
        <div class="mask" ></div>
      </div>
    </div>
  </div>
  <!-- 開發環境版本，包含了有幫助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!-- 官網提供的 axios 在線地址 -->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</body>

</html>

效果：

1、搜索音樂並顯示

在</body>標簽前加上：

  <script>
    var vue = new Vue({
      el: "#player",
      data: {
        musicList: [],
        query: '',
      },
      methods: {
        searchMusic: function () {
          var that = this;
          axios.get("https://autumnfish.cn/search?keywords=" + this.query).then(
            function (response) {
              // console.log(response);
              that.musicList = response.data.result.songs;
            },
            function (err) { }
          );
        },
      },
    });
  </script>

其中query用於查詢，使用v-model綁定。musicList用於得到搜索后的音樂列表。在瀏覽器的console中：

歌曲都是在data--result-songs下的。

記得將占位用的“你好”替換為：

            <li v-for="item in musicList">
              <a href="javascript:;"></a>
              <b>{{item.name}}</b>
              <!---->
            </li>

只需要一個即可，利用v-for進行遍歷獲取。

當前效果：

搜索名字顯示音樂列表。

2、音樂播放

（1）獲取歌曲地址

在data中新加入一個musicUrl用於存儲歌曲地址。在methods中加入：

        playMusic: function (musicId) {
          var that = this;
          // 獲取歌曲地址
          axios.get("https://autumnfish.cn/song/url?id=" + musicId).then(
            function (response) {
              console.log(response);
              // console.log(response.data.data[0].url);
              that.musicUrl = response.data.data[0].url;
            },
            function (err) { }
          );
        },

在這里加入：通過傳入歌曲的id，發送請求之后得到歌曲的地址。有了歌曲的地址才能夠真正地播放歌曲。

            <li v-for="item in musicList">
              <a href="javascript:;" @click="playMusic(item.id)"></a>
              <b>{{item.name}}</b>
              <!---->
            </li>

在控制台可以看到，歌曲是在data.data[0]中的url。

將musicUrl地址放入到播放器中：

<div class="audio_con">
        <audio ref='audio' :src="musicUrl" controls autoplay loop class="myaudio"></audio>
      </div>

此時效果：搜索之后點擊一首歌的播放，即可進行播放了。

3、歌曲封面

首先在data中新加一個用於存儲封面地址的musicCover，然后在playMusic方法中加入一個函數：

          // 歌曲詳情獲取
          axios.get("https://autumnfish.cn/song/detail?ids=" + musicId).then(
            function (response) {
              console.log(response);
              // console.log(response.data.songs[0].al.picUrl);
              that.musicCover = response.data.songs[0].al.picUrl;
            },
            function (err) { }
          );

可以看到封面信息是在data.songs.al下的picUrl中。

接着將url地址放入到唱片那里：

        <!-- 歌曲信息容器 -->
        <div class="player_con" class="playing">
          <img src="images/player_bar.png" class="play_bar" />
          <!-- 黑膠碟片 -->
          <img src="images/disc.png" class="disc autoRotate" />
          <img :src="musicCover" class="cover autoRotate" />
        </div>

看一下效果：

封面已經加上去了。

4、獲取評論信息

在data中加入hotComments用於存儲評論列表。在playMusic中加入獲取評論的函數。

          // 歌曲評論獲取
          axios.get("https://autumnfish.cn/comment/hot?type=0&id=" + musicId).then(
            function (response) {
              // console.log(response);
              // console.log(response.data.hotComments);
              that.hotComments = response.data.hotComments;
            },
            function (err) { }
          );

在相關位置填上信息：

          <div class='comment_list'>
            <dl v-for="item in hotComments">
              <dt>
                <img :src="item.user.avatarUrl" alt="">
              </dt>
              <dd class="name">{{item.nickname}}</dd>
              <dd class="detail">
                {{item.content}}
              </dd>
            </dl>
          </div>

查看效果：

5、播放動畫

監聽音樂播放、監聽音樂暫停、操作類型。

在data中加入一個isPlaying用於判斷是否是暫停還是播放狀態，默認為false。在methods中新增兩個方法用於更改狀態：

        // 歌曲播放
        play: function () {
          // console.log("play");
          this.isPlaying = true;
        },
        // 歌曲暫停
        pause: function () {
          // console.log("pause");
          this.isPlaying = false;
        },

在播放時綁定：

      <div class="audio_con">
        <audio ref='audio' @play="play" @pause="pause" :src="musicUrl" controls autoplay loop class="myaudio"></audio>
      </div>

為歌曲信息容器添加屬性，動態判斷playing的值

 <!-- 歌曲信息容器 -->
        <div class="player_con" class="playing" :class="{playing:isPlaying}">

如果是true，除法css進行播放動畫展示，唱片旋轉，針頭移到唱片上。

看下效果：

6、mv播放

（1）在開始獲取歌曲列表時有一個mvid屬性，如果它為0表示沒有mv，我們可以進行判斷，如果有mv，則顯示mv小圖標。

（2）data中新增mvUrl用於獲取mv地址，新增isShow用於顯示和關閉mv。新增一個playMv方法，用於播放mv。

（3）點擊播放mv，將遮罩層isShow置為true，彈出mv播放，點擊除mv之外的遮罩層，關閉mv。

        // 播放mv
        playMv: function (mvid) {
          var that = this;
          axios.get("https://autumnfish.cn/mv/url?id=" + mvid).then(
            function (response) {
              // console.log(response);
              //console.log(response.data.data.url);
              that.isShow = true;
              that.mvUrl = response.data.data.url;
            },
            function (err) { }
          );
        },
        // 隱藏
        hide: function () {
          this.isShow = false;
        }
      <div class="video_con" v-show="isShow" style="display: none;">
        <video :src="mvUrl" controls="controls"></video>
        <div class="mask" @click="hide"></div>
      </div>

看下效果：

點擊倔強的mv

最后是完整代碼：

<!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>悅聽player</title>
  <!-- 樣式 -->
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <div class="wrap">
    <!-- 播放器主體區域 -->
    <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 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" :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.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" v-show="isShow" style="display: none;">
        <video :src="mvUrl" controls="controls"></video>
        <div class="mask" @click="hide"></div>
      </div>
    </div>
  </div>
  <!-- 開發環境版本，包含了有幫助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!-- 官網提供的 axios 在線地址 -->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script>
    var vue = new Vue({
      el: "#player",
      data: {
        musicList: [],
        query: '',
        musicUrl: '',
        musicCover: '',
        // 歌曲評論
        hotComments: [],
        isPlaying: false,
        isShow: false,
        mvUrl: '',
      },
      methods: {
        searchMusic: function () {
          var that = this;
          axios.get("https://autumnfish.cn/search?keywords=" + this.query).then(
            function (response) {
              // console.log(response);
              that.musicList = response.data.result.songs;
              console.log(response);
            },
            function (err) { }
          );
        },
        playMusic: function (musicId) {
          var that = this;
          // 獲取歌曲地址
          axios.get("https://autumnfish.cn/song/url?id=" + musicId).then(
            function (response) {
              console.log(response);
              // console.log(response.data.data[0].url);
              that.musicUrl = response.data.data[0].url;
            },
            function (err) { }
          );
          // 歌曲詳情獲取
          axios.get("https://autumnfish.cn/song/detail?ids=" + musicId).then(
            function (response) {
              console.log(response);
              // console.log(response.data.songs[0].al.picUrl);
              that.musicCover = response.data.songs[0].al.picUrl;
            },
            function (err) { }
          );
          // 歌曲評論獲取
          axios.get("https://autumnfish.cn/comment/hot?type=0&id=" + musicId).then(
            function (response) {
              // console.log(response);
              // console.log(response.data.hotComments);
              that.hotComments = response.data.hotComments;
            },
            function (err) { }
          );
        },
        // 歌曲播放
        play: function () {
          // console.log("play");
          this.isPlaying = true;
        },
        // 歌曲暫停
        pause: function () {
          // console.log("pause");
          this.isPlaying = false;
        },
        // 播放mv
        playMv: function (mvid) {
          var that = this;
          axios.get("https://autumnfish.cn/mv/url?id=" + mvid).then(
            function (response) {
              // console.log(response);
              //console.log(response.data.data.url);
              that.isShow = true;
              that.mvUrl = response.data.data.url;
            },
            function (err) { }
          );
        },
        // 隱藏
        hide: function () {
          this.isShow = false;
        }
      },
    });
  </script>
</body>

</html>

相關css樣式：

鏈接：https://pan.baidu.com/s/12aIQLYznQpTILa4bswZ6xw
提取碼：zjlj


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 python 模擬（簡易）音樂播放器 利用js實現的音樂簡易播放器 基於Android系統開發的簡易音樂播放器 簡易音樂播放器主界面設計 - .NET CORE(C#) WPF開發 python 開發在線音樂播放器-簡易版 WPF開發較為完整的音樂播放器(三) ---數據讀取類以及界面的構建和所有代碼 C++ QT 音樂播放器 音樂播放器設計類圖 給博客加了個音樂播放器 Vue2.0音樂播放器
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM