【Vue-Element】好用的音频组件

1、vue-audio-better
- 1.1 示例
- 1.2 安装
- 1.3 使用
- 1.4 参数
- 1.5 组件内部数据
- 1.6 方法
2、vue-audio-visual
- 2.1 安装
- 2.2 引用
- 2.3 使用
- 2.4 参考

1、vue-audio-better

源码及Demo

个人建议将源码下载下来，修改源码（包括界面功能按钮分布，方法调用等）使用。

1.1 示例

Normal

Mini

1.2 安装

npm install vue-audio-better --save

1.3 使用

Normal

<vue-audioaudio-source="https://example.com/example.mp3"></vue-audio>

Mini

<mini-audioaudio-source="https://example.com/example.mp3"></mini-audio>

1.4 参数

名称	类型	默认值	备注	是否必选
width	Number	500	音频组件宽度
audio-source	String		音频文件URL地址	是
html5	Boolean	false	是否强制使用html5音频
loop	Boolean	false	播放结束后是否自动重新开始播放
preload	Boolean	true	组件挂载时是否开始下载音频文件
autoplay	Boolean	false	组件挂载时是否开始播放
formats	String[]	[]	Howler.js 会自动从扩展中检测您的文件格式，但您也可以在无法提取的情况下指定格式（例如使用 SoundCloud 流）
xhrWithCredentials	Boolean	false	withCredentials使用 Web Audio API 时是否在用于获取音频文件的 XHR 请求上启用标志（请参阅参考资料）

1.5 组件内部数据

名称	类型	备注
playing	Boolean	当前是否正在播放音频
muted	Boolean	音频播放是否静音
volume	Number	播放的音量0到1
rate	Number	播放的速度范围从0.5-4
seek	Number	播放位置
duration	Number	音频的持续时间
progress	Number	播放进度0-1

组件内部数据，可以通过组件直接控制，也可以修改源码更改默认值。

1.6 方法

名称	参数	备注
play	无	播放
pause	无	暂停播放
togglePlayback	无	切换播放或暂停播放
stop	无	停止播放
mute	无	静音播放
unmute	无	取消静音播放
toggleMute	无	切换静音和取消静音播放
setVolume(volume)	volume	设置播放音量（值介于0-1之间）
setRate(rate)	rate	设置播放的速率（速度）（值介于0.5-4之间）
setSeek(seek)	seek	设置播放的位置（值在0和duration之间）
setProgress(progress)	progress	设置播放进度（值在0-1之间）

2、vue-audio-visual

源码及Demo

    <av-line:line-width="2"line-color="lime"audio-src="/static/music.mp3"></av-line>

    <av-barscaps-color="#FFF":bar-color="['#f00', '#ff0', '#0f0']"canv-fill-color="#000":caps-height="2"audio-src="/static/bach.mp3"></av-bars>

    <av-circle:outline-width="0":progress-width="5":outline-meter-space="5":playtime="true"playtime-font="18px Monaco"audio-src="/static/bach.mp3"></av-circle>

    <av-waveformaudio-src="/static/bar.mp3"></av-waveform>

    <av-media:media="mediaObject"></av-media>

2.1 安装

npm install --save vue-audio-visual

2.2 引用

import Vue from 'vue'
import AudioVisual from 'vue-audio-visual'Vue.use(AudioVisual)

2.3 使用

  <av-barsaudio-src="/static/bach.mp3"></av-bars>

2.4 参考

1）源码API

【Vue-Element】好用的音频组件相关推荐

vue element form中input等组件不能输入值
<el-input v-model="form.inputVal " /> 由于data中form只是一个空对象{},当主动设置 form.inputVal = &qu ...
vue+element 创建Cron表达式生成器组件 [带最近五次执行时间]
目录介绍使用结语介绍这个组件是我在开源项目 ruoyi开源项目中拆下来的轮子效果图: 使用由于该组件文件较多所以放在了gitee上地址:点击跳转-gitee地址使用和其他说明 ...
前端学习（3051）：vue+element今日头条管理-表格组件基本使用
前端学习（3050）：vue+element今日头条管理-表格组件基本使用
前端学习（3021）：vue+element今日头条管理--创建组件和配置路由
前端学习（3002）：vue+element今日头条管理--创建组件和设置路由
前端学习（3003）：vue+element今日头条管理--关于组件中的@
基于vue element 封装上传组件
基于vue element封装的上传组件使用方法: 1.首先引入该组件 2.注册组件 3.页面使用 4.回调函数(如需其他回调自行封装因为我暂时没用到其他的哈哈哈) <template& ...
Element 2.6.0 发布，基于 Vue 2.0 的桌面端组件库
开发四年只会写业务代码,分布式高并发都不会还做程序员? Element 2.6.0 发布了,Element 是一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,提供了配套设 ...
element vue 获取select 的label_Vue动态组件component的深度使用
背景介绍最近在封装一些基于Vue+ElementUI的组件,将一些实际项目中常用的,有一定规律的业务进行抽象总结,开发出相应的Vue组件. 组件封装首先想到的就是Form组件,在Element U ...

【Vue-Element】好用的音频组件

【Vue-Element】好用的音频组件

1、vue-audio-better

1.1 示例

1.2 安装

1.3 使用

1.4 参数

1.5 组件内部数据

1.6 方法

2、vue-audio-visual

2.1 安装

2.2 引用

2.3 使用

2.4 参考

【Vue-Element】好用的音频组件相关推荐

最新文章

热门文章