Question

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

我找到了this Web Audio API post，其中有一个例子正是我想要的（如果按下卡拉OK按钮）。但是，它有点慢，它不适用于大文件。 The author also mentions this：

我真的应该使用mediaElement来操纵较长音轨的音频，因为我们真的不应该在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？

1 个答案: