您现在的位置是：网站首页> 编程资料编程资料

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

2023-05-24 336人已围观

简介 Vue3实现简易音乐播放器组件_vue.js_

前言

用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()             ......     })

完整代码