vue音乐播放器

hcwei 2020年06月10日 343次浏览

最近在b站学习vue:https://www.bilibili.com/video/av76249419?t=104&p=37
最终实现一个网页音乐播放器。这里贴出我的源码,这里主要以实现功能为主并稍微做了下布局,仅供初学者参考学习。

<div id="musicplayer">
<!--搜索框-->
<div style="width: 100%; height: 50px; margin: 0 auto; text-align: center; background-color: whitesmoke; line-height: 50px;"><input type="text" placeholder="请输入歌曲名、歌手名" /><input type="button" value="搜索" /></div>
<!--播放列表-->
<div style="width: 30%; height: 500px; overflow: auto; float: left; background-color: cadetblue;">
<ul>
  <li style="list-style-type: none">
  <ul>
    <li>
      <input type="button" value="播放" />{{ item.name }}
      <input type="button" value="mv" />
    </li>
  </ul>
  </li>
</ul>
</div>

<!--音乐封面-->
<div style="width: 40%; height: 500px; float: left;"><img style="width: 100%; height: 500px;" /></div>

<!--音乐评论-->
<div style="width: 30%; height: 500px; float: left; background-color: cadetblue; overflow: auto;">
<ul>
  <li style="list-style-type: none">
  <ul>
    <li><img style="height: 30px; width: 30px;" />
    <p style="float: right;">{{ item.user.nickname }}</p>
    {{ item.content }}------------------------
    </li>
  </ul>
  </li>
</ul>
</div>

<!--音乐播放组件-->
<div style="height: 50px; width: 100%; text-align: center; line-height: 50px;"><audio autoplay="autoplay" controls="controls"></audio></div>

<!--mv播放组件-->
<div class="mvzhezhao"><video class="10001" style="width: 50%; height: 400px; margin-top: 100px; margin-left: 30%;" controls="controls" width="300" height="150"></video></div>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script> 
<script>
        // 请求地址: https://autumnfish.cn/search  get keywords 
        var app = new Vue({
            el: "#musicplayer",
            data:{
               searchname: "",
               musiclist: [],
               musicurl: "",
               picshow: false,
               picurl: "",
               commentlist: [],
               mvurl: "",
               mvshow: false,
            },
            methods:{
               // 搜索音乐
               searchmusic:function(){
                   var that=this;
                   axios.get("https://autumnfish.cn/search?keywords="+this.searchname).then(function(response){
                       that.musiclist=response.data.result.songs
                   },function(err){})
               },
               // 播放音乐
               playmusic:function(id){
                   this.picshow=true
                   var that=this;
                    // 获取音乐地址url
                    axios.get("https://autumnfish.cn/song/url?id="+id).then(function(response){
                        that.musicurl=response.data.data[0].url
                    },function(err){})
                    // 获取歌曲封面图片
                    axios.get("https://autumnfish.cn/song/detail?ids="+id).then(function(response){
                        that.picurl=response.data.songs[0].al.picUrl
                    },function(err){})
                    // 获取评论相关内容
                    axios.get("https://autumnfish.cn/comment/hot?type=0&id="+id).then(function(response){
                        that.commentlist=response.data.hotComments
                    },function(err){})
               },
               // 播放mv
               playmv:function(id){
                   var that=this;
                   axios.get("https://autumnfish.cn/mv/url?id="+id).then(function(response){
                        that.mvurl=response.data.data.url;
                        that.mvshow=true;
                    },function(err){})
               },
               // 显示隐藏mv遮罩
               hideshow:function(){
                   this.mvshow=false;
               }
               
            }
        })
    </script>

截图:
image.png
image.png