长按录音并且音频相似对比打分

<template>
  <div>
    <!-- //音频隐藏为了音频相似对比使用 -->
    <div>
      <audio
        v-for="(audio, index) in audiosurl"
        :key="index"
        :src="audio.src"
        ref="audio"
      ></audio>
    </div>

    <button @mousedown="startRecording" @mouseup="stopRecording">录音</button>
    ====================

    <el-button @click="playRecorder()">录音播放</el-button>

    <el-button @click="compareAudio2()">相似比对</el-button>
    得分：{{ audioScore }}
  </div>
</template>

<script>
import Recorder from "js-audio-recorder";

// 引入录音插件

export default {
  data() {
    return {
      audios:
        "https://dashaneducation.oss-cn-shenzhen.aliyuncs.com/dashanbusiness/555.aac",  //对比的音频
      recording: null,
      audioScore: 0,//分数
      audioData: null,
      audiosurl: [
        {
          src: "", //录音url
        },
        {
          src: "", //音频url
        },
      ],
    };
  },
  methods: {
    // 初始化
    init() {
      this.recorder = new Recorder({
        // 采样位数，支持 8 或 16，默认是16
        sampleBits: 16,
        // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值
        sampleRate: 48000,
        // 声道，支持 1 或 2， 默认是1
        numChannels: 1,
        // 是否边录边转换，默认是false
        compiling: true,
      });
    },

    startRecording() {
      // alert("开始")
      console.log("开始录音");
      this.recorder.start().then(
        () => {
          // this.drawRecord();
          this.recorder_state = "录音中...";
          console.log("开始录音中");
        },
        (error) => {
          // 出错了
          console.log(`${error.name} : ${error.message}`);
        }
      );
      // start recording code here
    },
    //录音停止
    stopRecording() {
      this.recorder.stop();

      // console.log("....................", this.recorder);

      console.log("完成录音");
      // stop recording code here
    },

    // 录音播放
    playRecorder() {
      this.recorder.play();
      // this.drawPlay(); // 绘制波浪图
      this.play_state = "录音播放中";
    },

    //音频相似对比得分
    compareAudio2() {
      // 录音转化为src：

      let audioSrc = URL.createObjectURL(
        new Blob([this.recorder.getWAVBlob()], { type: "audio" })
      );
      console.log("audioSrc: " + audioSrc);
      //赋值
      this.audiosurl[0].src = audioSrc;
      this.audiosurl[1].src = this.audios;

      let audio1 = this.$refs.audio[0];
      let audio2 = this.$refs.audio[1];
      console.log(audio1, audio2);
      // 计算audio1和audio2的时间长度
      var audio1Length = audio1.duration;
      var audio2Length = audio2.duration;
      // 计算两个音频的最大时间长度
      var maxLength = Math.max(audio1Length, audio2Length);
      // 计算两个音频的最小时间长度
      var minLength = Math.min(audio1Length, audio2Length);
      // 计算两个音频的时间长度差
      var deltaLength = maxLength - minLength;
      // 计算两个音频的相似度
      var similarityScore = 1 - deltaLength / maxLength;
      // 调用函数计算两个音频文件的相似度
      console.log(similarityScore);
      // return similarityScore;
      this.audioScore = similarityScore * 100;
    },
  },
  mounted() {
    this.init();
  },
};
</script>