Question

我使用了音频api的js代码来显示我的html5音频，这里的教程/代码很好用

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

并且它工作得很好但是当我用外部链接更改src时的问题：

src =＆＃34; http://example.com/file.mp3＆＃34;

音频不发出声音，可视化不显示虽然当我删除可视化代码时它正常工作...我试着改变

context.createMediaElementSource(audio);

与

AudioContext.createMediaStreamDestination()

音频播放但没有可视化..我不知道我能做什么？

＆＃13;

<!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(){
	document.getElementById('audio_box').appendChild(audio);
	context = new AudioContext(); // AudioContext object instance
	analyser = context.createAnalyser(); // AnalyserNode method
	canvas = document.getElementById('analyser_render');
	ctx = canvas.getContext('2d');
	// Re-route audio playback into the processing graph of the AudioContext
	
	source = context.createMediaStreamDestination(audio);	
	
	source.connect(analyser);
	analyser.connect(context.destination);
	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(){
	window.requestAnimationFrame(frameLooper);
	fbc_array = new Uint8Array(analyser.frequencyBinCount);
	analyser.getByteFrequencyData(fbc_array);
	ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
	ctx.fillStyle = '#00CCFF'; // Color of the bars
	bars = 100;
	for (var i = 0; i < bars; i++) {
		bar_x = i * 3;
		bar_width = 2;
		bar_height = -(fbc_array[i] / 2);
		//  fillRect( x, y, width, height ) // Explanation of the parameters below
		ctx.fillRect(bar_x, canvas.height, bar_width, bar_height);
	}
}
}

</script>
</head>
<body>
<div id="mp3_player">
  <div id="audio_box"></div>
  <canvas id="analyser_render"></canvas>
</div>
</body>
</html>

＆＃13;

Answer 1

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

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

分析器栏动画HTML Audio API无效

1 个答案: