Vue音乐播放器

最新推荐文章于 2024-05-02 11:00:00 发布

zeron01

最新推荐文章于 2024-05-02 11:00:00 发布

阅读量951

点赞数 1

分类专栏： vue 文章标签： vue java

本文链接：https://blog.csdn.net/zeron01/article/details/119760867

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

VUE音乐播放器

参考

1、视频网址 : 黑马程序员vue前端基础教程-4个小时带你快速入门vue
https://www.bilibili.com/video/BV12J411m7MG?p=30
2、接口调用：网易云音乐https://neteasecloudmusicapi.vercel.app/#/?id=neteasecloudmusicapi
      （i）搜索：https://autumnfish.cn/search?keywords=“关键字”
      （ii）播放：https://autumnfish.cn/song/url?id=“音乐id”
      （iii）音乐封面：https://autumnfish.cn/song/detail?ids=“音乐id”
      （iv）评论：https://autumnfish.cn/comment/hot?type=0&id=“音乐id”
      （v）mv播放：https://autumnfish.cn/mv/url?id=“mvid”

功能

1、歌曲搜索
（1）在输入框中填入关键字，按下enter键，调用Vue中的带参方法searc(关键字) 。
（2）通过axios发送get请求，得到返回数据res，将 res.data.result.songs赋给歌曲列表list1。
（3）通过table标签调用v-for将数据有序输出
播放图片、歌曲、歌手、歌单、mv图片

2、播放
（1）给歌曲列表list1中的播放图标，绑定一个点击事件，调用带参（歌曲id）方法即：play(id)
(2) 通过axios发送get请求，得到返回数据res，将res.data.data[0].url赋给播放歌曲的地址msurl。
(3)将msurl赋给src
使用html自备的<audio ref='audio' :src="msurl" controls autoplay loop ></audio>，进行播放功能
其中 :src="msurl"表示v-bind:html中的属性绑定vue中的属性值，得到动态的值；msurl为音乐播放的地址

3、封面
（1）在播放的同时，通过axios发送get请求，得到返回数据res，将res.data.songs[0].al.picUrl赋给所播音乐封面的地址mspit。
（2）通过<img :src="mspit" />绑定mspit

4、评论
（1）将评论的数据放在数组list2中
（2）在播放的同时，通过axios发送get请求，得到返回数据res，将 res.data.hotComments赋给所播音乐的评论列表。
（3）通过table标签调用v-for将评论数据有序输出
评论者头像<img :src=a.user.avatarUrl/>、用户名{{a.user.nickname}}、评论{{a.content}}

5、封面转动
（1）在Vue中设初始封面转动状况为false 即isPlaying:false
（2）当点击播放按钮时，封面转动，调用@play 、 @pause，进行播放、暂停
如：<audio ref='audio' @pause="fmstop" @play="fmplay" :src="msurl" controls autoplay loop ></audio>
播放时封面转动：@play="fmplay" ，调用fmplay方法，this.isPlaying=true;
暂停时封面停止：@pause="fmstop"，调用fmstop方法，this.isPlaying=false;
（3）对于封面，绑定属性:class="{turn:isPlaying}"
当isPlaying=true即 turn：true，开始转动
（4）turn属性：

 .turn{
            animation:turn 15s linear infinite;
        }
        @keyframes turn{
            0%{
                transform: translate(-50%,-50%) rotateZ(0deg);
            }
            100%{
                transform: translate(-50%,-50%) rotateZ(360deg);
            }
        }

6、mv播放
（1）通过axios发送get请求，得到返回数据res，将 res.data.data.url;赋给所播音乐MV地址mvurl。
（2) 调用html自带的MP4播放器
<video ref='video' :src="mvurl" controls="controls"></video>

操作

1、项目图
建立一个jave工程cs1,然后新建目录cap5，在目录下新建music.html及img目录，并放入图片到img中
在这里插入图片描述

2、输入关键字，如“隔壁老樊”
在这里插入图片描述
3、按下enter键

4、选择搜索结果中的第一个的播放图片

4.1最右侧的封面图片随着上方的播放按钮点击而转动
在这里插入图片描述
4.2当播放按钮暂停时，最右侧的封面图片会停止转动

5、点击带有mv图标的歌曲，如“我曾”

6、点击蓝色区域，退出mv模式
在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en" xmlns:font-family="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>音乐</title>
    <style>
        .a{width:100%;overflow:hidden}
        .left,.right,.middle{float:left;display:inline-block}
        .left{width:34%}
        .right{width:34% ;border-left:1px solid #f00}
        .middle {
            width: 122%;
            position: absolute;
            height: 510px;
        }
        .p1{
            color:darkseagreen;
            font-family: "Times New Roman", Times, serif;
        }


        .poster {
            position: absolute;
            top: 50%;
            left: 40%;
            transform: translate(-50%,-50%);
            width: 350px;
            height: 350px;
            border-radius: 50%;
            object-fit: cover;
        }

        .turn{
            animation:turn 15s linear infinite;
        }
        @keyframes turn{
            0%{
                transform: translate(-50%,-50%) rotateZ(0deg);
            }
            100%{
                transform: translate(-50%,-50%) rotateZ(360deg);
            }
        }

        .video_con video {
            position: fixed;
            width: 800px;
            height: 546px;
            left: 50%;
            top: 50%;
            margin-top: -273px;
            transform: translateX(-50%);
            z-index: 990;
        }

        .video_con .mask {
            position: fixed;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            z-index: 980;
            background-color: cornflowerblue;
        }

    </style>
</head>
<body>


<div id="ap1">
    <div>
        悦听音乐
        <input type="text"  v-model="mc" @keyup.enter="searc" placeholder="输入名称"/>
    </div>

    <!--播放页面 ,当点击播放时调用方法fmplay  @play="fmplay"-->
    <div>
        <audio ref='audio' @pause="fmstop" @play="fmplay"  :src="msurl"
               controls autoplay loop class="myaudio"></audio>
    </div>


   <!-- MV -->
    <div class="video_con" v-show="isShow">
        <video   ref='video' :src="mvurl" controls="controls"></video>
        <div class="mask" @click="hideMV"></div> <!-- 关闭mv -->
    </div>

    <!-- 列表+封面+评论 -->
    <div class="a" >

        <div class="left">
            <!-- 查询后结果  列表 -->
            <table v-show=list1!=0>
                <tr>
                    <th> </th>
                    <th>歌曲</th>
                    <th>歌手</th>
                    <th>歌单</th>
                    <th></th>
                </tr>
                <tr v-for="a in list1">
                    <th> <img style="height: 40px"  width=100% :src="bft"
                              @click="play(a.id)" /> </th>

                    <th> {{a.name}}</th>
                    <th>{{a.artists[0].name}}</th>
                    <th>{{a.album.name}}</th>
                    <th v-show=a.mvid!=0><img src="img/mv.png" @click="playMV(a.mvid)"/></th>
                </tr>
            </table>

        </div>

        <div class="middle"  v-show=mspit!="" ><!-- v-show=mspit!=""  封面图片存在-->
            <!-- 封面 -->
            <img :src="mspit" height=100% width=100%  class="poster" :class="{turn:isPlaying}" />
        </div>


        <div class="right" v-show=list2.length!=0><!-- 如果有评论 -->
            <!-- 评论 -->
            <table>
                <tr>
                    <th>序号</th>
                    <th>头像</th>
                    <th>用户名</th>
                    <th>评论</th>
                </tr>
                <tr v-for="(a,i) in list2">
                    <th>{{i+1}}</th>
                    <th><img style="height: 30px"  width=100% :src=a.user.avatarUrl /> </th>
                    <th class="p1"   >{{a.user.nickname}}</th>
                    <th>{{a.content}} </th>
                </tr>
            </table>
        </div>
    </div>
</div>

</body>

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    new Vue({
        el:'#ap1' ,
        data:{
            //播放按钮图片
            bft:"./img/bf.png",
            //搜索关键字
            mc:"",
            //播放歌的地址
            msurl:"",
            //播放歌的封面
            mspit:"",
            //搜索关键字后的列表
            list1:[],
            //评论列表
            list2:[],
            //评论头像
            compit:"",
            //封面 播放状态
            isPlaying:false,
            //遮罩层
            isShow:false,
            //mv的url
            mvurl:""
        },
        methods:{
            searc:function (){
                var tha=this;
                axios.get("https://autumnfish.cn/search?keywords="+this.mc)
                    .then(
                        function (res){
                            console.log(res.data.result.songs);
                            tha.list1=res.data.result.songs;
                        },function (err){
                            console.log(err);
                        })
            },
            play:function (musicId){
                var th=this;
                axios.get("https://autumnfish.cn/song/url?id="+musicId).then(function (res){
                    //  console.log(res.data.data[0].url);
                    th.msurl=res.data.data[0].url;
                },function (er){})

                //歌曲详情获取 封面
                axios.get("https://autumnfish.cn/song/detail?ids="+musicId).then(function (res){
                    //  console.log(res.data.songs[0].al.picUrl);
                    th.mspit=res.data.songs[0].al.picUrl;
                },function (err){})

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

            //封面转动
            fmplay:function (){
                console.log("封面开始转动");
                this.isPlaying=true;
            },
            fmstop:function (){
                console.log("封面停止");
                this.isPlaying=false;
            },


            //播放mv
            playMV:function (mvd){
                var tha=this;
                axios.get("https://autumnfish.cn/mv/url?id="+mvd).then(function (res){
                    console.log(res);
                    //   alert(res.data.data.url);//mv播放地址
                    tha.isShow=true;
                    tha.mvurl=res.data.data.url;
                },function (err){})
            },

            //隐藏mv
            hideMV:function (){
                this.isShow=false;
                this.mvurl="";
            }
        }
    });

</script>
</html>

zeron01

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
Vue音乐播放器

VUE音乐播放器参考功能操作代码参考1、视频网址 : 黑马程序员vue前端基础教程-4个小时带你快速入门vuehttps://www.bilibili.com/video/BV12J411m7MG?p=302、接口调用：网易云音乐      （i）搜索：https://autumnfish.cn/search?keywords=“关键字”      （ii）播放：https:/
复制链接

扫一扫