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 ＆LT;工作正常，但离线却没有。那为什么它不能脱机工作呢？我需要它来为这个项目脱机工作。

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会破坏音频标记

1 个答案: