通过制作音乐播放器的案例综合Vue知识

最新推荐文章于 2024-08-08 10:33:11 发布

Mir ㅤ

最新推荐文章于 2024-08-08 10:33:11 发布

阅读量145

点赞数

本文链接：https://blog.csdn.net/weixin_45995139/article/details/120117482

版权

题目：制作一个可以通过搜索歌曲名或者歌手来听歌的音乐播放器，如果搜索的歌有MV要求可以播放此MV，播放歌曲时要求能看到正在播放的歌曲的热门评论。

分析:
        1. 歌曲搜索：按下回车(v-on,enter)，查询数据(axios接口, v-model)，渲染数据(v-for数组, that)；
        2. 歌曲播放：点击播放(v-on 自定义参数)，歌曲地址获取(接口，歌曲id)，歌曲地址设置(v-bind)；
        3. 歌曲评论：点击播放(增加逻辑)，歌曲评论获取(接口，歌曲id)，歌曲评论渲染(v-for)；
        4. mv 播放：mv图标显示(v-if)，mv地址获取(接口 mvid)，遮罩层(v-show v-on)，mv地址设置(v-bind)。

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音乐播放器</title>
</head>

<body>
    <div>
        <div id="player">
            <div>
                <h4>音乐播放器</h4>
                <input type="text" autocomplete="off" v-model="query" @keyup.enter="searchMusic">
            </div>

            <div>
                <div>
                    <ul>
                        <li v-for="item in musicList">
                            <a href="javascript:;" @click="playMusic(item.id)">🔈</a>
                            <b>{{ item.name }}</b>

                            <span v-if="item.mvid!=0" @click="playMV(item.mvid)">📹</span>

                        </li>
                    </ul>
                </div>
            </div>

            <div>
                <h4>热门评论</h4>
                <div>
                    <dl v-for="item in hotComments">
                        <dd>
                            <b>{{ item.user.nickname }}：</b>
                            {{ item.content }}
                        </dd>
                    </dl>
                </div>
            </div>

            <div>
                <audio ref='audio' :src="musicUrl" controls autoplay loop></audio>
            </div>

            <div v-show="isShow" style="display: none;">
                <video :src="mvUrl" controls="controls"></video>
            </div>

        </div>
    </div>

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

    <script src="./music.js"></script>
</body>

</html>

var app = new Vue({
    el: "#player",
    data: {
        query: "",
        musicList: [],
        musicUrl: "",
        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.data.result.songs);
                }, function (error) { })
        },
        playMusic: function (musicId) {
            var that = this;
            // console.log(musicId);
            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 (error) { })

            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;
                }, function (error) { })
        },
        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.mvUrl = response.data.data.url;
                    that.isShow = true;
                }, function (error) { })
        },
    }
});

最开始的状态：

搜到歌：

播放歌曲时出现评论：

mv播放：

本案例注意事项：
   1. 服务器返回的数据比较复杂时，获取的时候需要注意层级结构；
   2. 通过审查元素快速定位到需要操纵的元素;
   3. 歌曲 id 依赖歌曲搜索的结果，对于不用的数据也需要关注；
   4. 在Vue中通过 v-bind 操纵属性；
   5. 本地无法获取的数据，基本都会有对应的接口；
   6. 在vue中通过 v-for 生成列表；
   7. audio 标签的 play 事件会在音频播放的时候触发，pause 事件会在音频暂停的时候触发；
   8. 通过对象的方式设置类名，类名生效与否取决于后面的值的真假；
   9. 不同的接口需要的数据是不同的，文档的阅读需要仔细；
   10. 页面结构复杂之后，通过审查元素的方式去快速定位相关元素；
   11. 响应式的数据都需要定义在 data 中。

Mir ㅤ

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
通过制作音乐播放器的案例综合Vue知识

题目：制作一个可以通过搜索歌曲名或者歌手来听歌的音乐播放器，如果搜索的歌有MV要求可以播放此MV，播放歌曲时要求能看到正在播放的歌曲的热门评论。分析: 1. 歌曲搜索：按下回车(v-on,enter)，查询数据(axios接口, v-model)，渲染数据(v-for数组, that)；2. 歌曲播放：点击播放(v-on 自定义参数)，歌曲地址获取(接口，歌曲id)，歌曲地址设置(v-bind)；3. 歌曲评论：点击播放(增加逻辑)，...
复制链接

扫一扫