VUE实现音频播放器方案（播放列表）

最新推荐文章于 2025-02-24 00:00:00 发布

海盐老伍

最新推荐文章于 2025-02-24 00:00:00 发布

阅读量4.1k

点赞数

文章标签： vue javascript

本文链接：https://blog.youkuaiyun.com/wujize/article/details/106227876

版权

在项目中构建音频播放器，遇到多个音频切换播放的问题。通过深入研究Vue-aplayer 1.6.1版本文档，了解到需使用list对象来管理播放列表。音频数据初始化时，构建数据清单并将音频导入。在实现过程中，遇到音频文件切换复杂、列表实现困难及延迟加载等问题，最终成功解决。

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

在项目中，需要对某个景点多个介绍音频文件进行播放，建立这个音频播放器还是费了不少周折。前几天在做音频文件上传与管理时时一次是单个文件的上传、加载与播放还是比较简单，网上有很多案例，找来看看基本上就会，但在做播放时，同一个景点会存在多个播放音频，如何让用户可以切换播放音频试了很多方法，再加上vue-aplayer不同版本使用方法的不同，遇到了不少问题，后通过深入研究，利用播放列清解决了项目需求。最终的效果如下：
在这里插入图片描述

一、Vue-aplayer导入

Vue-aplayer可以在使用的组件中使用时才导入，定义数据属时注意与旧版本不一样，并且music是对象，不是数组，网上很多文章是利用music定义数组作为清单，直接传组件是无法使用的，我在这儿耽搁了差不多一天时间，反复测试都不行，把版本降下去也不行，后来还是看观看最对应版的文档（1.6.1）才搞明白，1.6.1清单要放到list对象

//导入
import aplayer from 'vue-aplayer'
//定义组件
 components: {
     aplayer },
   //变量定义
   			isPlay: false,   //定义一个延迟加载变量，一开始music.src为空，系统加载为报错
        audio: {
   
          progress: false,
          progressPercent: 0,
          successPercent: 0,
          list: [],   //播放列

最低0.47元/天解锁文章