vue 录音机(Audio Recorder)
made with Vuejs

vue 录音机(Audio Recorder)

这是一个基于vuejs的简单的录音机组件。

简介及使用教程

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

作者

Gennady Grishkovtsov &amp;amp; Olga Zimina

相关项目

这是一个基于Vue.js的Github样式的日历热图。
这是一个基于Splide的Vue滑块组件。
这是一个基于Vue的滚动条组件。
这是一个Bootstrap风格简单分页组件。
这是一个Vue.js 2打字机效果组件 。
这是一个漂亮的Vue聊天组件。
这是一个基于Vue.js的模拟命令行效果的动画组件。