ai_mooc_h5/src/pages/caiji/sy/record.vue

<script setup lang='ts'>

const router = useRouter()

function onClickLeft() {
  router.back()
}

function startAudioRecord() {
  // 检查浏览器是否支持 getUserMedia API
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
  // 请求用户的音频输入
  navigator.mediaDevices.getUserMedia({ audio: true })
    .then(function(stream) {
      // 创建一个 MediaRecorder 实例
      const mediaRecorder = new MediaRecorder(stream);

      // 创建一个数组来存储音频数据
      const audioChunks = [];

      // 当有音频数据可用时，将其添加到数组中
      mediaRecorder.addEventListener("dataavailable", function(event) {
        audioChunks.push(event.data);
      });

      // 当录音结束时，将音频数据转换为 Blob 对象
      mediaRecorder.addEventListener("stop", function() {
        const audioBlob = new Blob(audioChunks);
        const audioUrl = URL.createObjectURL(audioBlob);
        const audio = new Audio(audioUrl);
        audio.play();
      });

      // 开始录音
      mediaRecorder.start();

      // 5秒后停止录音
      setTimeout(function() {
        mediaRecorder.stop();
      }, 5000);
    })
    .catch(function(err) {
      console.log(err);
    });
} else {
  console.log("浏览器不支持相关 API");
}
}


</script>

<template>
  <van-nav-bar title="声音采集" left-arrow @click-left="onClickLeft"></van-nav-bar>
  <div class="flex-auto w-full flex flex-col items-center justify-between py-72px px-6 box-border">
    <div class="w-full flex flex-col items-center mb-12">
      <div class="text-xl mt-26px">1 / 15</div>
      <p class="text-base indent mt-28px">宁愿用aac也不要用mp3，aac从音质上来说是比mp3要有保证，对声纹模型识别的效果也是有效的，即使aac的压缩比和mp3差不多大。不过，条件允许的话，还是用wav最好了，保16KHz16bit音频的wav，对声纹模型识别是最佳。</p>
    </div>


    <div class="flex w-full justify-around text-hex-242731">
      <div class="p-4 rounded-8 bg-white ">
        <van-icon name="volume" size="28" />
      </div>
      <div class="p-4 rounded-8 bg-white ">
        <van-icon name="play" size="28" />
        <van-icon name="pause" size="28" />
        <van-icon name="stop" size="28" />
      </div>
      <div class="p-4 rounded-8 bg-white ">
        <van-icon name="success" size="28" />
      </div>
    </div>
  </div>
</template>