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

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>

扫描二维码关注公众号，回复： 14838900 查看本文章

    <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>

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