vue 录音机(Audio Recorder)的简介及使用教程

vue 录音机(Audio Recorder)是一个基于vuejs的简单的录音机组件，允许在服务器上创建、播放、下载和存储记录。

特点

漂亮干净的UI
下载/上传/播放录音
支持事件限制
支持录音限制
支持大量的回调
独立的音频播放器
支持MP3/WAV

安装

Npm

npm i vue-audio-recorder

Yarn

yarn add vue-audio-recorder

使用

引入

    import AudioRecorder from 'vue-audio-recorder'

    Vue.use(AudioRecorder)

回调方法

   methods: {
      callback (data) {
        console.debug(data)
      }
    }

使用组件

  <audio-recorder
    upload-url="YOUR_API_URL"
    :attempts="3"
    :time="2"
    :headers="headers"
    :before-recording="callback"
    :pause-recording="callback"
    :after-recording="callback"
    :select-record="callback"
    :before-upload="callback"
    :successful-upload="callback"
    :failed-upload="callback"/>

<audio-player src="/demo/example.mp3"/>

AudioRecorder 属性

属性	类型	描述
attempts	Number	录音尝试次数
headers	Object	HTTP headers
time	Number	录音的时间限制 (分钟)
bit-rate	Number	默认: 128 (only for MP3)
sample-rate	Number	默认: 44100
filename	String	上传或下载的文件名
format	String	WAV/MP3. 默认: mp3
upload-url	String	上传的url
show-download-button	Boolean	是否显示下载按钮。默认: true
show-upload-button	Boolean	是否显示上传按钮。默认: true
before-upload	Function	上传之前的回调
successful-upload	Function	上传成功的回调
failed-upload	Function	上传失败的回调
mic-failed	Function	你的话筒不起作用时的回调
before-recording	Function	点击录音按钮后的回调
pause-recording	Function	点击暂停按钮的回调
after-recording	Function	点击停止按钮或者超过时限时的回调
select-record	Function	选择一条记录时的回调，返回这条记录

AudioPlayer 属性

src ：string，定义音频文件的url

vue 录音机(Audio Recorder) made with Vuejs

安装

使用

AudioRecorder 属性

AudioPlayer 属性

vue 录音机(Audio Recorder)
made with Vuejs