从音频文件输入创建媒体元素源？

Question

我正在尝试制作一个可以快速对立体声音频执行相位消除的网站。当我发现相位取消时，我觉得它很棒，所以我想看看是否可以在线快速完成它以使其更有趣(Edit: it can)。

我找到了 this Web Audio API post, which has an example doing exactly what I want (if you press the Karaoke button). However, it's a bit slow and it doesn't work with large files. The author also mentions this:

Really I should have used a mediaElement to manipulate the audio of a longer track, since we really shouldn’t be doing complex processing in javascript.

我尝试使用 mediaElement，但我什至不知道如何开始。我试过这个：

<input type="file" id="upload" accept="audio/*">

<script>
    var upload = document.getElementById("upload");
    upload.addEventListener("change", function() {
        var context = new (window.AudioContext || window.webkitAudioContext)();
        var source = context.createMediaElementSource(upload);
        console.log(source);
    });
</script>

我收到错误 Failed to execute 'createMediaElementSource' on 'BaseAudioContext': parameter 1 is not of type 'HTMLMediaElement'.

我知道输入元素与音频元素不同，所以我不明白您如何将它作为 mediaElement 加载。

非常感谢任何帮助！

Answer 1

createMediaElementSource() 需要一个 <audio> 元素，所以如果我们创建一个并将文件数据传递给它，我们就得到了源。

upload.addEventListener("change", function() {
  fr = new FileReader();
  fr.readAsDataURL(document.getElementById("upload").files[0]);
  fr.onload = e => {
    var audio = document.createElement('audio');
    audio.src = e.target.result;
    var context = new(window.AudioContext || window.webkitAudioContext)(),
      source = context.createMediaElementSource(audio);
    console.log(source);
  };
});

<input id="upload" accept="audio/*" type="file">

从音频文件输入创建媒体元素源？

createMediaElementSource from an audio file input?

javascript

audio

web-audio-api