项目中pc录音功能

jiezi

5 年前

第一种在一个事件里进行录音实现录音功能

我直接上代码

// 自己配音：manualDubbingold: function(type) {
      let that = this;
      navigator.mediaDevices
        .getUserMedia({audio: true})
        .then(stream => {console.log("创建了一个录音");
          const recordedChunks = [];
          var mediaRecorder = new MediaRecorder(stream); // 创建录音器实例 alert
          // let time = (that.subtitle[index].end_time - that.subtitle[index].begin_time) * 1000 // 该段录音的总时长
          that.self_voice.time = (time / 1000).toFixed(1) - 0;

          if (type === "start") {
            let s_timer = null;
            let timer_djs = setInterval(() => {
              // 3 2 1 0 的倒计时
              that.self_voice.num--;
              if (that.self_voice.num === 0) {clearInterval(timer_djs);
                setTimeout(() => {mediaRecorder.start(); // 开始录音
                }, 200);
                that.self_voice.num = 3;
                that.self_voice.is_show_num = false;
                that.self_voice.is_recording = true;
                // 时长的倒计时:
                s_timer = setInterval(() => {
                  that.self_voice.time =
                    (that.self_voice.time * 10 - 0.1 * 10) / 10;
                  // if (that.self_voice.time == 0) {//     clearInterval(s_timer)
                  // }
                }, 100);
                // 时间到了，自动停止录音：// let record_timer = setTimeout(() => {//     mediaRecorder.stop() // 停止
                //     clearTimeout(record_timer)
                // }, time)
              }
            }, 1000);
            // 监听开始录音：}

          if (type === "stop") {clearInterval(s_timer); // 停止定时器
            mediaRecorder.stop(); // 停止}
          mediaRecorder.addEventListener("start", e => {// console.log('开始录音中')
          });
          mediaRecorder.addEventListener("dataavailable", e => {if (e.data.size > 0) recordedChunks.push(e.data);
            // console.log('正在录音')
          });
          // 监听结束录音：mediaRecorder.addEventListener("stop", e => {
            let dataWithType = new Blob(recordedChunks, {type: "audio/x-wav"});
            that.self_voice.file = dataWithType; // 取到该音频

            that.self_voice.is_recording = false;
            that.self_voice.submit_active = true;
            that.self_voice.src = URL.createObjectURL(new Blob(recordedChunks)); // 预览
            // 新增结束录音后提交录音
            if (!that.self_voice.submit_active) return;
            clearOrAddVoice(that, that.dubbingindex, that.self_voice.file);
          });
        })
        .catch(error => {
          that.$message({
            showClose: true,
            type: "error",
            message: "没有找到音频设备麦克风",
            duration: 3000
          });
        });
    },

这个可以实现固定时间录音时间完成后自动结束录音

## 第二种在一个文件中由别的事件来停止录音即手动暂停（我使用插件）
csdn 里的大佬文章很有用

manualDubbing: function(type) {
      // 点击配音
      let that = this;
      if (type === "start") {
        that.stopbtn = false; // 点击了暂停 让暂停重置 变双竖杠
        that.captureErcord(); // 录音方法} else {if (!that.stopbtnchoose) return;
        this.mediaRecorder.stop();
        clearInterval(this.intervaltimerid);
        this.mediaRecorder.stream.stop();}
    },
    captureErcord: function() {
      // 录音方法
      console.log("1 点击录音", new Date());
      navigator.mediaDevices
        .getUserMedia(this.mediaConstraints)
        .then(this.onMediaSuccess)
        .catch(this.onMediaError);
    },
    // 错误处理方法
    onMediaError: function(e) {console.log("阿偶~ 您的浏览器貌似不支持录音哦...", e);
      clearInterval(this.intervaltimerid);
      this.$message.error("您的浏览器暂不支持录音功能");
    },
    onMediaSuccess: function(stream) {console.log("2 成功时间录音", new Date());
      let that = this;
      let timer_djs = setInterval(() => {
        // 3 2 1 0 的倒计时
        that.self_voice.num--;
        if (that.self_voice.num === 0) {clearInterval(timer_djs);
          that.self_voice.num = 3;
          that.self_voice.is_show_num = false;
          that.self_voice.is_recording = true;
          that.stopbtnchoose = true; // 让暂停鼠标移上变化

          that.mediaRecorder = new MediaStreamRecorder(stream);
          // 获取音频流
          that.mediaRecorder.stream = stream;
          that.mediaRecorder.mimeType = "audio/wav";
          that.self_voice.shiting_active = false;
          that.mediaRecorder.ondataavailable = function(blob) {console.log("3 录音", new Date());
            clearInterval(that.intervaltimerid);
            const url = URL.createObjectURL(blob);
            // _that.$emit('handleStop', {
            //     url: url,
            //     mblob: blob
            // })
            that.self_voice.src = url; // 预览
            // _that.self_voice.index = _that.dubbingindex // 记录下标
            // _that.dubbingData[_that.dubbingindex] = url // 预览列表
          };
          that.mediaRecorder.start(60 * 1000); // 录音时长  必须要
          // 定义间隔

          that.intervaltimerid = setInterval(() => {
            // 开始累积
            // 时长的倒计时:
            that.self_voice.time = (that.self_voice.time * 10 - 0.1 * 10) / 10;
            if (that.self_voice.time <= 0) {
              //heng
              that.timecolor = true;
            }
          }, 100);
        }
      }, 1000);
    },

方法仅供参考毕竟个人项目需求不同

项目中 pc 录音功能