vuejs之构建简易音乐播放器

发布时间：2020-12-16 23:02:49 所属栏目：百科来源：网络整理

导读：一步步来，先看下目前的样式： ! DOCTYPE html html lang ="en" head meta charset ="UTF-8" / name ="viewport" content ="width=device-width,initial-scale=1.0" http-equiv ="X-UA-Compatible" ="ie=edge" title 悦听player / !-- 样式 -- link rel ="st

一步步来，先看下目前的样式：

<!DOCTYPE html>
<html lang="en">

head>
  meta charset="UTF-8" />
  name="viewport" content="width=device-width,initial-scale=1.0" http-equiv="X-UA-Compatible"="ie=edge" title>悦听player</<!-- 样式 -->
  link rel="stylesheet" href="./css/index.css"bodydiv class="wrap">
     播放器主体区域 -->
    ="play_wrap" id="player">
      ="search_bar">
        img src="images/player_title.png" alt="" />
         搜索歌曲 -->
        input type="text" autocomplete="off" v-model="query" @keyup.enter="searchMusic" />
      div="center_con" 搜索歌曲列表 ='song_wrapper'>
          ul ="song_list">
           li><a href="javascript:;"></a> b>你好<!---->spaniul="images/line.png" class="switch_btn"="" 歌曲信息容器 ="player_con"="playing"="images/player_bar.png"="play_bar" />
           黑胶碟片 -->
          ="images/disc.png"="disc autoRotate" ="images/cover.png"="cover autoRotate"  评论容器 ="comment_wrapper"h5 ='title'>热门留言h5='comment_list'>
            dl >
              dt="./images/person.png"dd ="name">盐焗西兰花dd="detail">
                绝对值得一听，吹爆
              dl="right_line"="audio_con"audio ref='audio'  src="" controls autoplay loop class="myaudio"audio="video_con"  style="display: none;"video  controls="controls"video="mask"  开发环境版本，包含了有帮助的命令行警告 script ="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"script 官网提供的 axios 在线地址 ="https://unpkg.com/axios/dist/axios.min.js"html>

效果：

1、搜索音乐并显示

在</body>标签前加上：

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

其中query用于查询，使用v-model绑定。musicList用于得到搜索后的音乐列表。在浏览器的console中：

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

记得将占位用的“你好”替换为：

            li v-for="item in musicList">{{item.name}}<!---->
            >

只需要一个即可，利用v-for进行遍历获取。

当前效果：

搜索名字显示音乐列表。

2、音乐播放

（1）获取歌曲地址

在data中新加入一个musicUrl用于存储歌曲地址。在methods中加入：

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

在这里加入：通过传入歌曲的id，发送请求之后得到歌曲的地址。有了歌曲的地址才能够真正地播放歌曲。

            ="javascript:;" @click="playMusic(item.id)">

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

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

='audio' :src="musicUrl">

此时效果：搜索之后点击一首歌的播放，即可进行播放了。

3、歌曲封面

首先在data中新加一个用于存储封面地址的musicCover，然后在playMusic方法中加入一个函数：

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

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

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

        :src="musicCover">

看一下效果：

封面已经加上去了。

4、获取评论信息

在data中加入hotComments用于存储评论列表。在playMusic中加入获取评论的函数。

           歌曲评论获取
          axios.get("https://autumnfish.cn/comment/hot?type=0&id=" + console.log(response);
               console.log(response.data.hotComments);
              that.hotComments = response.data.hotComments;
            },1)"> (err) { }
          );

在相关位置填上信息：

          dl ="item in hotComments">
                :src="item.user.avatarUrl">{{item.nickname}}
                {{item.content}}
              >

查看效果：

5、播放动画

监听音乐播放、监听音乐暂停、操作类型。

在data中加入一个isPlaying用于判断是否是暂停还是播放状态，默认为false。在methods中新增两个方法用于更改状态：

         歌曲播放
        play: function () {
           console.log("play");
          this.isPlaying = true;
        },1)"> 歌曲暂停
        pause: function () {
           console.log("pause");
          false
       @play="play" @pause="pause"="musicUrl">

为歌曲信息容器添加属性，动态判断playing的值

 ="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:  (mvid) {
          ;
          axios.get("https://autumnfish.cn/mv/url?id=" + mvid).then(
            console.log(response.data.data.url);
              that.isShow = ;
              that.mvUrl = response.data.data.url;
            },1)"> 隐藏
        hide: this.isShow = ;
        }

       v-show="isShow" stylevideo ="mvUrl" controls="mask"="hide">

看下效果：

点击倔强的mv

最后是完整代码：

="javascript:;"="playMusic(item.id)"span v-if="item.mvid!=0"="playMv(item.mvid)"="musicCover"
    var vue = new Vue({
      el: "#player",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;
            },// 歌曲播放
        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;
            },// 隐藏
        hide: function () {
          this.isShow = false;
        }
      },});
  >