网络音频API createMediaElementSource打破了音频标签

<!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 <工作得很好，但离线它没有。那么为什么它不能脱机工作？我需要它为这个项目离线工作。

来源

2015-02-07 RuteNL

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

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

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

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

来源

2015-02-07 20:56:26 aldel

谢谢！我通过使用blob URL作为源代码来脱机工作。现在，我只需要确定是否可以从本地文件路径创建Blob URL – RuteNL 2015-02-08 15:27:27

即使从服务器提供服务时，Safari中的createMediaElementSource（）也没有运气。 – Ian 2015-05-08 16:18:46

网络音频API createMediaElementSource打破了音频标签

回答

相关问题