Web Audio API createMediaElementSource 破坏音频标签

Question

<!DOCTYPE html>
<html>

<head>
  <title>createMediaElementSource test</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script>
    var audioContext, mediaElementSource, analyzer, analyzerBytes;

    function initAudio(audio) {
      if (!audioContext) {
        audioContext = new(window.AudioContext || window.webkitAudioContext)();
        analyzer = audioContext.createAnalyser();
        analyzer.connect(audioContext.destination);
        mediaElementSource = audioContext.createMediaElementSource(audio);//when adding this line it breaks
        mediaElementSource.connect(analyzer);
        analyzerBytes = new Uint8Array(analyzer.frequencyBinCount);
        window.setInterval(function() {
          var min = 0,
            max = 0,
            sum = 0,
            avg = 0;
          analyzer.getByteFrequencyData(analyzerBytes);
          for (var i = 0; i < analyzer.frequencyBinCount; i++) {
            min = Math.min(min, analyzerBytes[i]);
            max = Math.max(max, analyzerBytes[i]);
            sum += analyzerBytes[i];
          }
          avg = Math.round(sum / analyzer.frequencyBinCount);
          document.getElementById('analyzerData').textContent = "" + min + "/" + max + "/" + avg;
        }, 100);
      }
    }
  </script>
</head>

<body>
  <audio controls src="song.mp3" onplay="initAudio(this)"></audio>
  <div>
    Analyzer Data: min/max/avg: <span id="analyzerData"></span>
  </div>
</body>

</html>

我只是离线使用createMediaElementSource但是失败了，所以我查看了其他人我们是怎么做的。上面的完全相同的代码在线工作，但是当我下载它时，它遇到了我以前遇到的同样的问题。添加实际的 createmediaelementsource 行时，音频标签停止工作。控制台没有错误。代码片段显然不会在这里工作，因为音频 src 不在这里，但我添加了片段，所以你可以看到代码。 http://ruurd.alecm.nl/why.html < 工作正常，但离线时却不行。那么为什么它不能离线工作呢？这个项目我需要它离线工作。

Answer 1

您没有说，但我怀疑您使用的是 Firefox 或 Safari。当我下载您的页面并在 Chrome 中本地加载它时，它实际上对我有用。但我认为这是 Chrome.

中的错误

不幸的是，本地媒体文件（即 file:// URL）始终被视为与包含它们的网页位于不同的域中，即使该网页也是本地文件也是如此。这意味着您运行遇到了这个问题：

Why aren't Safari or Firefox able to process audio data from MediaElementSource?

这基本上意味着您必须从 Web 服务器而不是文件加载页面。您可以在自己的机器上设置本地 Web 服务器来提供本地文件。

Web Audio API createMediaElementSource 破坏音频标签

Web Audio API createMediaElementSource breaks the audio tag

javascript

html

audio

offline

web-audio-api