vue自定义音频播放组件

音频更好 (vue-audio-better)

Easy to create custom audio player components for Vue.js.

易于为Vue.js创建自定义音频播放器组件。

安装 (Installation)

npm install  vue-audio-better --save

更新资料 (Update)

Add animation...

添加动画...

建立 (Setup)

捆绑器(Webpack，汇总) (Bundler (Webpack, Rollup))

// in your entrypoint
import Vue from 'vue'
import VueAudio from 'vue-audio-better'

Vue.use(VueAudio)

用法 (Usage)

必填标记 (Required Markup)

<vue-video
    :src="https://example.com/some_audio.mp3"
  ></vue-video>

道具 (Props)

width (width)

Type: Number - Default: 500

类型： Number -默认值： 500

Audio width

音讯宽度

source (source)

Type: String - Required

类型： String -必填

An string of audio file url

音频文件网址字符串

html5 (html5)

Type: Boolean - Default: false

类型： Boolean -默认值： false

Whether to force HTML5 Audio

是否强制使用HTML5音频

loop (loop)

Type: Boolean - Default: false

类型： Boolean -默认值： false

Whether to start the playback again automatically after it is done playing

播放完毕后是否自动重新开始播放

preload (preload)

Type: Boolean - Default: true

类型： Boolean -默认值： true

Whether to start downloading the audio file when the component is mounted

安装组件后是否开始下载音频文件

autoplay (autoplay)

Type: Boolean - Default: false

类型： Boolean -默认值： false

Whether to start the playback when the component is mounted

安装组件后是否开始播放

formats (formats)

Type: String[] - Default: []

类型： String[] -默认值： []

Howler.js automatically detects your file format from the extension, but you may also specify a format in situations where extraction won't work (such as with a SoundCloud stream)

Howler.js会自动从扩展名中检测文件格式，但是您也可以在无法提取的情况下指定格式(例如，使用SoundCloud流)

xhrWithCredentials (xhrWithCredentials)

Type: Boolean - Default: false

类型： Boolean -默认值： false

Whether to enable the withCredentials flag on XHR requests used to fetch audio files when using Web Audio API (see reference)

使用Web Audio API时是否在用于获取音频文件的XHR请求上启用withCredentials标志( 请参阅参考资料 )

发展历程 (Development)

建立 (Build)

Bundle the js to the dist folder:

将js绑定到dist文件夹：

npm run build

致谢 (Acknowledgements)

howler.js vue-howler

howler.js vue- howler

翻译自: https://vuejsexamples.com/easy-to-create-custom-audio-player-components-for-vue/

vue自定义音频播放组件