Web Audio API createMediaElementSource 打破了音频标签答案

【问题标题】：Web Audio API createMediaElementSource breaks the audio tagWeb Audio API createMediaElementSource 打破了音频标签
【发布时间】：2015-02-08 04:56:26
【问题描述】：

<!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 行时，音频标签停止工作。控制台没有给出错误。代码 sn-p 显然在这里不起作用，因为音频 src 不在这里，但我添加了片段，以便您可以看到代码。 http://ruurd.alecm.nl/why.html

【问题讨论】：

标签： javascript html audio offline web-audio-api

【解决方案1】：

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

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

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

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

【讨论】：

谢谢！我通过使用 blob URL 作为源使其脱机工作。现在我只需要找出是否可以从本地文件路径创建 blob URL
即使从服务器提供服务，Safari 中的 createMediaElementSource() 也不走运。