vue实现类似微信按住发送语音给后端

2024-06-13 13:58
前端, 微信, vue.js, 后端, javascript, ecmascript
64人已看

`方式一：原生的ogg格式，需求是按住发送按钮说话获取语音文件发送给后台、鼠标移出即发送，限制时长30s`

<ttemplete>
 <div class="bottom">
      <el-button type="primary" size="small" @mousedown.native="startRecord" @mouseup.native="stopRecord" @mouseleave.native="stopRecord">
             开始对讲
         </el-button>
       <el-button v-if="isRecording" type="primary" size="small">录音中...</el-button>
    </div>
</templete>
<script>
export deafult{
  data(){
     return{
        isRecording: false,
        mediaRecorder: null,
         chunks: [],
         recordingTimer: null, // 录音定时器
     }
  },
  methods:{
  startRecord() {
        if (!this.isRecording) {
             this.isRecording = true;
             // 初始化录音
             navigator.mediaDevices.getUserMedia({ audio