Question

我创建了一个网站，其中包含一个音频标签以及一个用于文件上传的工作区。

<body>
    <audio id="myPlayer" controls>Your browser does not support the audio-tag</audio>
    <div id="dropArea"></div>
</body>

然后，拖动的音频文件会转换为ArrayBuffer，最终转换为AudioBuffer。

let audioContext = new (window.AudioContext || window.webkitAudioContext)();
let arrayBuffer = await readFileAsArrayBuffer(audioFile);

audioContext.decodeAudioData(arrayBuffer, buf => {
    console.log(buf);
});

然后可以在这样的函数中播放AudioBuffer：

playSound(buffer) => {
  let source = context.createBufferSource();

  source.buffer = buffer;
  source.connect(context.destination);
  source.start(0);
}

上述所有工作都很好，但这不是我追求的目标。

我希望在我的HTML中的音频播放器中播放和控制AudioBuffer。怎么办呢？

Answer 1

要回答我自己的问题，需要从上传的文件创建一个 data URL。

<块引用>

readAsDataURL 方法用于读取指定 Blob 或 File 的内容。当读操作完成时，readyState 变为 DONE，并触发 loadend。那时，结果属性包含数据作为 data: URL 表示文件数据的 base64 编码字符串。

示例

// Helper Function
function readAsDataURL(file) {
  return new Promise((resolve, reject) => {
    if (file instanceof File) {
      reader.onload = () => {
        resolve(reader.result);
      };
      reader.readAsDataURL(file);
    } else {
      reject(new Error("This type of object is not supported"));
    }
  });
}

// Set URL for audio player
(async () => {
  const url = await readAsDataURL(event.dataTransfer.files[0]);
  const audioElement = document.querySelector("#audio-player");

  audioElement.src = url;
})();

在现有的HTML5音频标签中播放AudioBuffer

1 个答案: