网页音乐播放器总结[通俗易懂]

大家好，又见面了，我是你们的朋友全栈君。

总结一下Vue实战的网页音乐播放器
首先是设计出主体的整个框架
分为四个部分
最左边的歌曲列表，中间的唱片，最右边的热门评论显示以及下方的播放条

然后开始准备进行功能的实现
首先是需要导入Vue的依赖以及axios的js网络依赖库

  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!-- 官网提供的 axios 在线地址 -->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

1.音乐搜索功能
进行音乐搜索，用户需要进行输入关键字
定义一个query变量来进行关键字的接收以及一个数组用于存放数据

data: { 
   
        // 查询关键字
        query: "",
        // 歌曲数组
        musicList: [],
}

编写查询歌曲方法：

// 歌曲搜索
        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.data.result.songs);
                },
                function(err) { 
   })


        },

使用get方式来获取，记得在编写完整的数据之前
先打印出返回的数据response，在里面查找一下搜索到的路径
比如我们需要的歌曲信息，就在response.data.result.songs这个地方
因此进行一个提取保存，然后传递给网页

<li v-for="item in musicList">

使用v-for进行一个循环，进行展示
2.歌曲播放
我们的歌曲利用的是网络上的资源，因此每一个歌曲都有一个歌曲id
每个id都对应着一个播放地址播放地址
因此，使用axios进行id+接口组合的网络请求，将返回的数据进行分析
歌曲的url在response.data.data[0].url里
注意在这里要设置一个that = this
因为this是会随着每次搜索点击而变动的，使用that来保存现在所需要的this

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) { 
   })

在前端网页上添加相应的触发方法
对应的歌曲名应该设计成动态的{
{item.name}}

<a href="javascript:;" @click="playMusic(item.id)"></a>
              <b>{ 
   { 
   item.name}}</b>

歌曲的url以及获取，因此在网页上的audio里面进行绑定

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

使用:src=”musicUrl”进行绑定歌曲源
3.歌曲专辑图片显示
每个歌曲都有一个专辑图片，图片的URL就在返回的数值里面

// 歌曲封面
musicCover: "",

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

注释掉的console.log都是为了测试是否返回正确的值
确保返回正确后再设计函数进行处理
获取到图片的URL后在前端页面进行绑定

//使用v-bind进行绑定
<img :src="musicCover" class="cover autoRotate" />

4.热门评论获取
同理，热门评论是在response.data.hotComments
通过接口加音乐id来获取所需要的数据组

//歌曲评论的获取
axios.get("https://autumnfish.cn/comment/hot?type=0&id=" + musicId)
.then((function (response) { 
   
console.log(response.data.hotComments);
that.hotConments = response.data.hotComments;
                }))

热门评论我们用//歌曲评论 hotConments:[],
数组来进行保存
然后在前端使用循环语句进行返回
每个热门语句都对应着评论者和头像
因此同样进行筛选返回

<!-- 评论容器 -->
        <div class="comment_wrapper">
          <h5 class='title'>热门留言</h5>
          <div class='comment_list'>
            <dl v-for="item in hotConments">
              <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>

使用item.nickname来实现动态名称和头像显示
5.仿真胶片播放动画
我们希望当播放的时候，能有一个胶片旋转的动画进行播放
来增加更多的趣味性和真实性
首先就需要定义播放的状态，来判断是否在播放
逻辑很简单

//动画播放状态
isPlaying:false,
play:function () { 
   
 // console.log("play");
this.isPlaying = true;
        },

pause:function () { 
   
 // console.log("pause");
this.isPlaying = false;
        },

定义一个变量，用于记录播放状态，初始设计为false
在前端的audio播放按钮进行绑定
每次点击都进行一个状态的切换（上面的代码里面已经写出来了）
然后在黑胶唱片那个div进行一个v-bind绑定

<div class="player_con" :class="{playing:isPlaying}">

当isplaying为真的时候，class名变换
相应的css样式生效，形成旋转的效果

/* 旋转的动画 */
@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;
}

6.mv的播放
除了普通的音乐播放外，还可以进行mv的播放
每个歌曲都对应着一个mvid，每个mvid又对应着相应的mvURL
我们通过解析出mv的URL来实现视频播放
但并不是每一个歌曲都具有对应的mv
因此首先应该进行一个筛选
在前端歌曲列表中

<ul class="song_list">
<li v-for="item in musicList">
<!--        这个a标签表示的是左侧列表里面的播放按钮      -->
<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>

使用v-if来进行判断，当具有mvid时，显示mv播放按钮，否则不显示
接下来编写播放mv功能
核心思想就是提取出mv的URL，然后传递到页面上进行一个绑定

//播放MV
        playMV:function (mvid) { 
   
            var that = this;
            axios.get("https://autumnfish.cn/mv/url?id=" + mvid)
                .then(function (response) { 
   
                    that.isShow = true;
                    that.mvUrl = response.data.data.url;
                },function (err) { 
   })
        },


<video :src="mvUrl"  controls="controls"></video>

当然mv能打开也要能关闭
我们设计一个蒙版mask，在点击蒙版的时候进行隐藏
因此要设计一个状态变量来进行记录

<div class="video_con" v-show="isShow" style="display: none;">
        <video :src="mvUrl"  controls="controls"></video>
        <div class="mask" @click="hide"></div>
      </div>
//隐藏MV
        hide:function () { 
   
            this.isShow = false;
        }

至此，音乐播放器大功告成！