1、vue-audio-better
源码及Demo
个人建议将源码下载下来，修改源码（包括界面功能按钮分布，方法调用等）使用。
1.1 示例
Normal
Mini
1.2 安装
npm install vue-audio-better --save
1.3 使用
Normal
<vue-audio
audio-source="https://example.com/example.mp3"
></vue-audio>
Mini
<mini-audio
audio-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-bars
caps-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-waveform
audio-src="/static/bar.mp3"
></av-waveform>
<av-media
:media="mediaObject"
></av-media>
文章来源：https://www.toymoban.com/news/detail-779652.html
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-bars
audio-src="/static/bach.mp3">
</av-bars>
2.4 参考
1）源码API文章来源地址https://www.toymoban.com/news/detail-779652.html
到了这里，关于【Vue-Element】好用的音频组件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
