HTML+CSS+VUE编写简易音乐播放器

爆炒鱿鱼鱼

已于 2022-03-02 20:05:52 修改

阅读量1.4k

点赞数 3

分类专栏： vue手写组件（原生html+js+css手写组件）文章标签： javascript vue.js html

于 2021-03-11 09:48:10 首次发布

本文链接：https://blog.csdn.net/weixin_46835329/article/details/114645034

版权

vue手写组件（原生html+js+css手写组件）专栏收录该内容

4 篇文章 0 订阅

订阅专栏

HTML+CSS+VUE编写简易音乐播放器

展示
功能简析
代码
- html+css基本布局(仅展示``````部分，css部分未展示)
- js代码（vue.js+axios发送请求）

展示

PS：楼主是个刚刚入门的小白，学习过一丢丢html+css，基础比较差，最近在入门vue，跟着小破站视频模仿着制作了一个简易的音乐播放器，大伙多多指教，不喜勿喷。

在这里插入图片描述

功能简析

1.搜索功能

VUE指令
v-model:便捷的设置和获取表单元素的值(数据与表单值双向绑定)

利用v-model实现对输入框数据与所需搜索提交的数据名称进行双向绑定，实现搜索功能。

2.音乐播放功能&音乐图片&评论展示功能

VUE指令
v-for:根据数据生成列表结果(可以使用index为索引)
v-blind:设置元素的属性（如src，title，class）(简写：省略v-bind，":xxx"即可)
v-show：根据布尔值真假(1/0)切换元素的显示状态，操作样式CSS。

(1)首先是对搜索所得音乐数据的操作，利用v-for指令生成表单；
(2)接着是进行音乐图片的获取，当选择音乐之后对应音乐图片的url地址也将自动获取，
利用v-bind:src进行音乐图片地址的绑定，利用v-bind:class进行音乐图片样式(css实现动态旋转)的绑定；
(3)对于音乐评论的展示也是使用v-for生成表单；
(4) 使用v-show对未生产表单结构的<ul>元素进行隐藏。

3.音乐进度条控制功能

利用v-bind:src进行音乐url地址的绑定，当选择音乐之后对应url地址将自动获取，开始播放音乐。

代码

html+css基本布局(仅展示`<bdoy>`部分，css部分未展示)

<body>
    <div id="app" class="mainDiv">
        <div class="nav">
            <!-- 上方区域：导航栏，搜索框 -->
            <h2>MusicPlayer</h2>
            <input type="image" src="image/search.jpg" @click="search" class="searchImg">
            <input v-model="musicSearch" class="searchBox" type="text" placeholder="Searching Music"
                @keyup.enter="search">

        </div>

        <div class="player">
            <!-- 中间区域：歌曲选择&歌曲图片&音乐评论 -->
            <div class="leftBox">
                <ul v-show="musicList">
                    <li v-for="it in musicList">
                        <a href="#" @click="getMusicUrl(it.id)">{{"-"+it.name}}</a>
                    </li>
                </ul>
            </div>

            <div class="midBox">
                <img id="IMG" v-show="name" :src="musicImg" class="musicImg"
                    :class="{musicImgRRR:ifPlaying,pause:ifPaused}">
                <h3 v-show="name">{{name+"~"+mName}}</h3>
            </div>

            <div class="rightBox">
                <ul v-show="hotComment">
                    <li v-for="item in hotComment">
                        <img :src="item.user.avatarUrl" class="userImg">
                        <p class="usernanme">{{item.user.nickname}}</p>{{item.content}}<br>
                    </li>
                </ul>
            </div>

            <div class="whiteBox"></div>

        </div>

        <div class="progress">
            <!-- 下方区域：音乐播放进度条控制 -->
            <audio @play="musicPlay" @pause="musicPause" controls autoplay :src="musicUrl">
            </audio>
        </div>
    </div>
</body>

<!-- 开发环境版本：包含了有帮助的警告命令 -->
<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 src="JS/musPlayer.js"></script>

js代码（vue.js+axios发送请求）

var app = new Vue({
    el: "#app",
    data: {
        musicSearch: "",// v-model双向绑定输入框数据，用于音乐的搜索
        musicList: "",// v-for数据成列，用于音乐数据的成列
        musicId: "",// 搜索所得音乐数据中每首歌曲对应的的编号，用于发送请求获取具体音乐的链接
        musicUrl: "",// 歌曲对应的音频链接
        musicImg: "",// 歌曲对应的图片链接
        mName: "",// 歌曲对应的歌手名称
        name: "",// 歌曲对应的名称
        hotComment: "",// 歌曲对应的评论
        userPic: "",//歌曲评论的作者头像
        username: "",//歌曲评论的作者名称  
        ifPlaying: false,//判断音乐是否播放中
        ifPaused:"",
    },
    methods: {
        //搜索歌曲
        /**歌曲搜索接口
         * 请求地址:https://autumnfish.cn/search
         * 请求方法:get
         * 请求参数:keywords(查询关键字)
         * 响应内容:歌曲搜索结果
         */
        search: function () {
            // console.log(this.musicSearch);
            var that = this;// 用that获取data中数据的变量名称以便在axios中进行赋值
            axios.get('https://autumnfish.cn/search?keywords=' + that.musicSearch)
                .then(function (res) {
                    // 搜索所得歌曲的名称
                    // console.log(res.data.result.songs);
                    that.musicList = res.data.result.songs;
                }, function (err) { })
        },
        //获取歌曲id以便进行歌曲详细信息的请求

        getMusicUrl: function (id) {
            // 获取歌曲对应的编号
            // console.log(id);
            var that = this;//用that获取data中数据的变量名称以便在axios中进行赋值

            /**歌曲url获取接口
             * 请求地址：https://autumnfish.cn/songs/url
             * 请求方法：get
             * 请求参数：id(歌曲id)
             * 响应内容：歌曲的url地址
             */
            axios.get('https://autumnfish.cn/song/url?id=' + id)
                .then(function (res) {
                    //  console.log(res);
                    //  console.log(res.data.data[0].url);
                    that.musicUrl = res.data.data[0].url;
                })

            /**歌曲详情请求接口
             * 请求地址：https://autumnfish.cn/songs/detail
             * 请求方法：get
             * 请求参数：ids(歌曲id)
             * 响应内容：歌曲详情(包含封面信息)
             */
            axios.get('https://autumnfish.cn/song/detail?ids=' + id)
                .then(function (res) {
                    //  console.log(res);
                    that.musicImg = res.data.songs[0].al.picUrl;//获取歌曲地址
                    that.mName = res.data.songs[0].ar[0].name;//获取歌手
                    that.name = res.data.songs[0].name;//获取歌名
                })

            axios.get('https://autumnfish.cn/comment/hot?type=0&id=' + id)
                .then(function (res) {
                    // console.log(res);
                    // console.log(res.data.hotComments);
                    that.hotComment = res.data.hotComments;
                })
        },
        musicPlay: function () {
            // console.log("playingmusic");
            this.ifPlaying = true;
            this.ifPaused = false;
        },
        musicPause: function () {
            // console.log("stopingmusic");
            // this.ifPlaying = false;
            this.ifPaused = true ;
        }
    },
})