分析器酒吧动画HTML音频API不工作

问题描述：

我使用的音频API的js代码用于可视化的HTML5音频和它的工作很大这里是教程/代码分析器酒吧动画HTML音频API不工作

链接：https://www.developphp.com/video/Jav...o-API-Tutorial

和它的作品洙不错但是，当我改变与喜欢的外部链接的SRC问题：

音频不要让声音和可视化不表明虽然当我删除了可视化代码，它的工作常态盟友......我试图改变

context.createMediaElementSource(audio);

与

AudioContext.createMediaStreamDestination()

音频播放，但没有可视化仍..我不知道我可以做任何想法？

<!doctype html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"/> 
 
<meta http-equiv="Access-Control-Allow-Origin" content="*"> 
 
<style> 
 
div#mp3_player{ width:500px; height:60px; background:#000; padding:5px; margin:50px auto; } 
 
div#mp3_player > div > audio{ width:500px; background:#000; float:left; } 
 
div#mp3_player > canvas{ width:500px; height:30px; background:#002D3C; float:left; } 
 
</style> 
 
<script> 
 
// Create a new instance of an audio object and adjust some of its properties 
 
var audio = new Audio(); 
 
// audio.crossOrigin='anonymous'; 
 
audio.src = 'http://www.stephaniequinn.com/Music/Allegro%20from%20Duet%20in%20C%20Major.mp3'; 
 
audio.controls = true; 
 
audio.loop = true; 
 
audio.autoplay = true; 
 
// Establish all variables that your Analyser will use 
 
var canvas, ctx, source, context, analyser, fbc_array, bars, bar_x, bar_width, bar_height; 
 
// Initialize the MP3 player after the page loads all of its HTML into the window 
 
window.addEventListener("load", initMp3Player, false); 
 
function initMp3Player(){ 
 
\t document.getElementById('audio_box').appendChild(audio); 
 
\t context = new AudioContext(); // AudioContext object instance 
 
\t analyser = context.createAnalyser(); // AnalyserNode method 
 
\t canvas = document.getElementById('analyser_render'); 
 
\t ctx = canvas.getContext('2d'); 
 
\t // Re-route audio playback into the processing graph of the AudioContext 
 
\t 
 
\t source = context.createMediaStreamDestination(audio); \t 
 
\t 
 
\t source.connect(analyser); 
 
\t analyser.connect(context.destination); 
 
\t frameLooper(); 
 

 
// frameLooper() animates any style of graphics you wish to the audio frequency 
 
// Looping at the default frame rate that the browser provides(approx. 60 FPS) 
 
function frameLooper(){ 
 
\t window.requestAnimationFrame(frameLooper); 
 
\t fbc_array = new Uint8Array(analyser.frequencyBinCount); 
 
\t analyser.getByteFrequencyData(fbc_array); 
 
\t ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas 
 
\t ctx.fillStyle = '#00CCFF'; // Color of the bars 
 
\t bars = 100; 
 
\t for (var i = 0; i < bars; i++) { 
 
\t \t bar_x = i * 3; 
 
\t \t bar_width = 2; 
 
\t \t bar_height = -(fbc_array[i]/2); 
 
\t \t // fillRect(x, y, width, height) // Explanation of the parameters below 
 
\t \t ctx.fillRect(bar_x, canvas.height, bar_width, bar_height); 
 
\t } 
 
} 
 
} 
 

 
</script> 
 
</head> 
 
<body> 
 
<div id="mp3_player"> 
 
    <div id="audio_box"></div> 
 
    <canvas id="analyser_render"></canvas> 
 
</div> 
 
</body> 
 
</html>

答

问题可能出在分析节点。它只能处理按照CORS加载的媒体。

如果为您的媒体服务的服务器是well configured，您可以尝试设置audio元素的crossOrigin属性，否则，您必须从您自己的域中提供该文件。

@Sabreena这是服务器端完成，请阅读我在我的答案给你的链接。 – Kaiido

感谢您的回复，得到了解决方案:-) – Sabreena

@Sabreena，很高兴它帮助;如果答案帮助您解决了问题，则欢迎您[接受它]（http://*.com/help/someone-answers）。这样，它就会从*被回答*流中得到。 – Kaiido

分析器酒吧动画HTML音频API不工作

相关推荐