首页 > 解决方案 > 将 blob 转换为 wav 文件

问题描述

您好,我是整个 JS + Audio 的新手。我有一个反应麦克风,它记录来自内置麦克风的音频,并在停止后将其变成一个 blob。

对于测试,我只想下载构建的 wav 文件并收听它。

wav 文件每次只有 15kb。所以它是空的。自动文件命名虽然有效。

关于如何将音频 blob 转换为 wav 的任何提示?

谢谢!

function onStop(recordedBlob) {
    console.log('recordedBlob is: ', recordedBlob);
    const fileName = chatId + '-' + Date.now() + '-' + author;

    const audioFile = new File([recordedBlob], `${fileName}.wav`, {
      type: 'audio/wav',
      lastModified: Date.now()
    });

    const a = document.createElement('a');
    a.download = `${fileName}.wav`;
    a.href = window.URL.createObjectURL(audioFile);
    a.click();

    setNewAudioFile(audioFile);
    uploadAudio(audioFile);
    console.log(audioFile);
  }

标签: javascriptreactjsaudioblobwav

解决方案


我已通过以下代码完成此操作:

    const reader = new window.FileReader();
    reader.readAsDataURL(audioBlob);
    reader.onloadend = () => {
      let base64 = reader.result + '';
      base64 = base64.split(',')[1];
      const ab = new ArrayBuffer(base64.length);
      const buff = new Buffer.from(base64, 'base64');
      const view = new Uint8Array(ab);
      for (let i = 0; i < buff.length; ++i) {
        view[i] = buff[i];
      }
      const context = new AudioContext();
      context.decodeAudioData(ab, (buffer) => {
      const wavFile = toWav(buffer);
      const blob = new window.Blob([ new DataView(wavFile) ], {
        type: 'audio/wav'
      });
      const anchor = document.createElement('a');
      document.body.appendChild(anchor);
      anchor.style = 'display: none';
      const url = window.URL.createObjectURL(blob);
      anchor.href = url;
      anchor.download = 'audio.wav';
      anchor.click();
      window.URL.revokeObjectURL(url);
    }

推荐阅读