Vue 前端页面利用MediaRecorder实现音频录制

Don't Talk, code is here:

重点是startRecord 方法

1. <template>
2.   
3.     <el-tooltip  effect="dark" content="再次点击 【开始录音】 即为重新录制，之前录制的将被作废" placement="top">
4.       <el-button :disabled="isPlay" :icon="isRecording?'el-icon-turn-off-microphone  el-icon--right' : 'el-icon-microphone el-icon--right'" plain :type="isRecording ? 'danger' : 'primary'" size="mini" @click="togleAudioRecord">{{ isRecording ? '停止录音' : '开始录音' }}</el-button>
5.     </el-tooltip>
6.     <el-button plain :disabled="isRecording" type="info" size="mini" @click="toglePlayRecord">
7.       <svg-icon :icon- />{{ isPlay ? '停止播放' : '试听录音' }}
8.     </el-button>
9.     <el-button icon="el-icon-upload el-icon--right" plain type="success" size="mini" @click="uploadRecord">上传</el-button>
10.     {{ formatTimeFormSec(recordingSecond) }}
11.    
12.   
13. </template>

复制代码

环境

• Vue 2.?
  
• Element-ui
  
• Ruoyi-vue
  

备注

代码是完整的组件，放在

1.       <el-form-item label="录音">
2.         
3.       </el-form-item>

复制代码

显示起来刚刚好。

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

过来提前占个楼

感谢分享，下载保存了，貌似很强大

懂技术并乐意极积无私分享的人越来越少。珍惜

过来提前占个楼