貊淀 发表于 4 天前

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]
查看完整版本: Vue 前端页面利用MediaRecorder实现音频录制