基于Vue的网页版录音并播放

最近项目中需要实现一个效果，需要在网页上录制音频，并上传给后台，后续还需要做语音识别处理。

下面的表格罗列了我的前端项目中所使用的框架以及插件（本项目基于Vue）：

插件名称	资源地址
ElementUI	https://element.eleme.cn/#/zh-CN/
网页录音js插件（兼容主流浏览器，使用了感觉还可以的。IE？不存在的，一想到flash，恶心到吐了）	https://github.com/streamproc/MediaStreamRecorder
网页播放器audio样式重写（国人写的插件nice，我尝试过使用有关外国友人的东西，我就呵呵了）	https://github.com/trsoliu/vue-audio

下面是我实现的效果：

 下面重点介绍在实现的过程中需要注意的几个关键点：

1.vue中如何引入第三方的js库？

因为我们这里使用的录音库是第三方的js库，而本项目是基于vue的，在传统的web项目里，我们可以直接使用

其实里面的功能并不复杂，应该很容能够看懂了。

最后再需要的页面上这样使用：

import MRecorder from '@/components/MRecorder'

// 处理结束事件  
handelEndRecord(param) {
     console.log(param)
     this.msource = param.url
}

3.播放器的使用，因为传统的播放器ui会比较简陋，无法达到用户的体验效果。我试了好几个关于vue播放音频的，结果效果都不是很理想。这时候我都打算自己手写一个了，可是功夫不负有心人，一番费尽周折中找到了一个插件vue-audio。哎呀，就是我想要的效果啊！查看github上主页的介绍其实也很简单了（有空深入看一下人家怎么实现的，其实这个插件主要是对传统的

安装插件：

$ npm install vue-audio-native --save

在main.js中引入这个插件 

import vueAudioNative from 'vue-audio-native'
Vue.use(vueAudioNative)

页面中的用法：

附上介绍页面上的属性的配置：

好了以上就是主要内容了，赶紧尝试一波吧。