Vue3实现简易音乐播放器组件

前言

用Vue3实现一个简易的音乐播放器组件

其效果图如下所示：

实现这个组件需要提前做的准备：

• 引入ElementUI
• 引入字节跳动图标库
• 一张唱见图片
• 将要播放的音乐上传到文件服务器上，并提供一个能在线访问的链接【这里使用的是阿里云的OSS服务】

准备

ElementUI

ElementUI的引入可以参照其官网的引入方式；

字节跳动图标库

组件的【上一首】【播放】【下一首】【音量】等图标都是来源自这个图标库，这是其安装文档

在main.js中，我是这样引入的：

//引入字节跳动图标库
import {install} from '@icon-park/vue-next/es/all';
import '@icon-park/vue-next/styles/index.css';

......

//这种加载方式进行加载的话，代表使用默认的前缀进行加载：icon
//也就是说假如要使用一个主页图标，使用图标时标签该这么写： 
//
//install(app,'prefix') 用这种方式进行加载的话，可以自定义使用图标库时的标签前缀
install(app)

唱见图片

音乐源

将要播放的音乐放到文件服务器上，我这里是使用阿里云的OSS服务进行音乐文件的存储，然后在整个页面加载时【也就是在onMounted生命周期函数中获取这些数据源】。在后面的代码中，这一步体现在：

//初始化歌曲源
const initMusicArr = () => {
        requests.get("/Music/QueryAllMusic").then(function (res) {
            musicState.musicArr = res

            musicState.musicCount = res.length
        })
    }

    onMounted(() => {
        initMusicArr()

            ......
    })

完整代码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。