vue制作简易音乐播放器

努力追光的小王

于 2020-08-17 21:36:37 发布

阅读量1.0k

点赞数 2

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/wq000000000/article/details/108058327

该博客展示了如何使用Vue.js开发一个简易音乐播放器，包括搜索歌手、播放音乐、显示唱片旋转动画、专辑封面及热门留言。同时，还涵盖了播放MV及处理部分音乐无法播放的情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先放上最终效果图：页面打开效果
搜索歌手，并点击歌曲名前面的播放图标，播放音乐。播放和暂停音乐时会有唱片旋转和摇杆移动动画。同时会在碟片中央显示专辑封面，右侧会显示热门留言。
在这里插入图片描述
点击歌曲名右侧的播放按钮，会播放歌曲的mv：

点击遮罩层，关闭mv，返回主界面。

js代码：

var app = new Vue({
    el: '#music',
    data: {
        keywords: '',
        list: [],
        musicurl: '',
        picurl: '',
        hotcomments: [],
        mvurl: '',
        playingmv: false,
        musicplaying: false,
        url: ''
    },
    methods: {
        //   1: 歌曲搜索接口
        //   请求地址: https: //autumnfish.cn/search
        //       请求方法: get
        //   请求参数: keywords(查询关键字)
        //   响应内容: 歌曲搜索结果
        search: function () {
            var that = t