Vue 前端页面利用MediaRecorder实现音频录制
Don't Talk, code is here:重点是startRecord 方法
<template>
<el-tooltipeffect="dark" content="再次点击 【开始录音】 即为重新录制,之前录制的将被作废" placement="top">
<el-button :disabled="isPlay" :icon="isRecording?'el-icon-turn-off-microphoneel-icon--right' : 'el-icon-microphone el-icon--right'" plain :type="isRecording ? 'danger' : 'primary'" size="mini" @click="togleAudioRecord">{{ isRecording ? '停止录音' : '开始录音' }}</el-button>
</el-tooltip>
<el-button plain :disabled="isRecording" type="info" size="mini" @click="toglePlayRecord">
<svg-icon :icon- />{{ isPlay ? '停止播放' : '试听录音' }}
</el-button>
<el-button icon="el-icon-upload el-icon--right" plain type="success" size="mini" @click="uploadRecord">上传</el-button>
{{ formatTimeFormSec(recordingSecond) }}
</template>环境
[*]Vue 2.?
[*]Element-ui
[*]Ruoyi-vue
备注
代码是完整的组件,放在
<el-form-item label="录音">
</el-form-item>显示起来刚刚好。
来源:程序园用户自行投稿发布,如果侵权,请联系站长删除
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
页:
[1]