vue2.x 音频播放器使用element ui + Audio实现一款完整的音频播放器

最新推荐文章于 2024-09-16 21:23:59 发布

weixin_33816611

最新推荐文章于 2024-09-16 21:23:59 发布

阅读量6.2k

点赞数

文章标签： ui javascript 前端 ViewUI

原文链接：https://juejin.im/post/5c1c4a61518825644e622db4

版权

本文介绍了如何使用Vue2.x、Element UI和Audio API创建一个音频播放器。通过引入Element UI来简化UI设计，利用Audio API实现播放、暂停、进度控制、循环播放等功能。同时，文章探讨了音频加载状态的处理和音频倍速播放的拓展功能，以及如何隐藏播放按钮。

摘要由CSDN通过智能技术生成

项目背景

audio 音频播放在多媒体开发中非常常见，但是实际项目中你就会发现，每个系统的audio音频界面都长的不一样，百花齐放... pw怎么会同意呢[哈哈]，马上掏出手机，你改成长这个样子就好了。需要所有的系统显示统一，只能用库了。本着节约成本的原则，上网搜索了一些，竟然发现支持vue的多媒体组件库少的可怜，下了一个还不支持vue2[二哈惊讶脸],还是撸起袖子自己写一个吧。这个组件是由element ui + audio + iconfont实现，为什么用了element ，因为不想自己去操心组件风格，而且我们项目的风格也已经定了基调，纯粹是顺手。iconfont 是用阿里的图标库，非常方便，几乎都可以找到满足需求的图标，然后添加到自己的项目，下载包，导入项目即可。 iconfont 地址： www.iconfont.cn/home/index 关于如何在项目中引入iconfont，可以看这里： juejin.im/post/5c1ef2… 简介

编码

1.引入vue elemnt ui

> import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import '../../assets/icons/iconfont.css';
Vue.use(ElementUI);
new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app');
复制代码

2.确定音频ui与功能

ui风格大致如下：

需要支持的功能：

显示音频资源的相关信息，显示音频标题，音频时长等
音频播放，暂停
音频进度点击拖动
音频循环播放
加载、出错、结束等状态识别

3.主要交互功能实现

1.如何获取音频的相关信息

this.$refs.audioLoad.addEventListener('loadedmetadata', function cb() {
const se = this.duration;
const second = formatSecond(se);
});
function formatSecond(se) {
  let m = parseInt(se / 60, 10);
  m = m < 10 ? `0${m}` : m;
  let s = parseInt(se % 60, 10);
  s = s < 10 ? `0${s}` : s;
  return `${m}:${s}&#