Question

所以我遵循了本教程：https://youtu.be/IBHpSkGZtNM 不久前（大约一年前左右）它起作用了。然而现在它没有任何可视化。声音播放但就是这样。

我将旧的webkit功能更改为新的功能，因为我遇到了错误。但是现在我没有任何错误，但仍然没有出现任何错误。

这是我的代码：

<!DOCTYPE html>
<html>
	<head>
		<style type="text/css">
			div#mp3_player{ width: 500px; height: 60px; background: #000000; padding: 5px; margin: 50px auto;}
			div#mp3_player > div > audio{ width: 500px; background: #000000; float: left;}
			div#mp3_player > canvas{width: 500px; height: 30px; background: #002D3C; float: left;}
		</style>
		<script>
			var audio = new Audio();
			audio.src = "audio/DieForYou-Starset.mp3";
			audio.controls = true;
			audio.loop = true;
			audio.autoplay = false;

			var canvas, ctx, source, context, analyser, fbc_array, bars, bar_x, bar_width, bar_height;
			window.addEventListener("load", initMp3Player, false);

			function initMp3Player(){
				document.getElementById("audio_box").appendChild(audio);
				context = new AudioContext();
				analyser = context.createAnalyser();
				canvas = document.getElementById("analyser_renderer");
				ctx = canvas.getContext("2d");

				source = context.createMediaElementSource(audio);
				source.connect(analyser);
				analyser.connect(context.destination);
				frameLooper()
			}
			function frameLooper(){
				window.requestAnimationFrame(frameLooper);
				fbc_array = new Uint8Array(analyser.frequencyBinCount);
				ctx.clearRect(0,0 ,canvas.width, canvas.height)
				ctx.fillStyle= "#2DCC70";
				bars = 100;
				for(var i = 0; i < bars; i++){
					bar_x = i * 3;
					bar_width = 2;
					bar_height = -(fbc_array[1] / 2);
					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_renderer"></canvas>
		</div>
	</body>
</html>

我把所有内容放在html文件中，因为它更容易发布。我知道这是不好的做法。

注意：声音不会在片段中播放，因为音频文件存储在本地。

我也在运行本地服务器，因为打开html文件会导致MediaElementAudioSource outputs zeroes due to CORS access restrictions for file:///C:/xampp/htdocs/audio/DieForYou-Starset.mp3

Answer 1

您需要使用AnalyserNode methods之一填充数组，此处您只创建一个空数据。

例如，您可以拨打analyser.getByteFrequencyData(fbc_array);来获取当前频率数据。

＆＃13;

var audio = new Audio();
audio.crossOrigin = 'anonymous';
audio.src = "https://dl.dropboxusercontent.com/s/8c9m92u1euqnkaz/GershwinWhiteman-RhapsodyInBluePart1.mp3";
audio.controls = true;
audio.loop = true;
audio.autoplay = false;

window.onload = initMp3Player;

var canvas, ctx, source, context, analyser, fbc_array, bars, bar_x, bar_width, bar_height;


function initMp3Player() {
  document.getElementById("audio_box").appendChild(audio);
  context = new AudioContext();
  analyser = context.createAnalyser();
  canvas = document.getElementById("analyser_renderer");
  ctx = canvas.getContext("2d");

  source = context.createMediaElementSource(audio);
  source.connect(analyser);
  analyser.connect(context.destination);
  // initialise the Uint8Array only once
  fbc_array = new Uint8Array(analyser.frequencyBinCount);
  frameLooper()
}

function frameLooper() {
  window.requestAnimationFrame(frameLooper);
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  ctx.fillStyle = "#2DCC70";
  bars = 100;

  // here fill the Uint8Array with audio data
  analyser.getByteFrequencyData(fbc_array);
  
  for (var i = 0; i < bars; i++) {
    bar_x = i * 3;
    bar_width = 2;
    bar_height = -(fbc_array[i] / 2); // there was a typo
    ctx.fillRect(bar_x, canvas.height, bar_width, bar_height);
  }
}

＆＃13;

div#mp3_player {
  width: 500px;
  height: 60px;
  background: #000000;
  padding: 5px;
  margin: 50px auto;
}

div#mp3_player>div>audio {
  width: 500px;
  background: #000000;
  float: left;
}

div#mp3_player>canvas {
  width: 500px;
  height: 30px;
  background: #002D3C;
  float: left;
}

＆＃13;

<div id="mp3_player">
  <div id="audio_box"></div>
  <canvas id="analyser_renderer"></canvas>
</div>

＆＃13;

Javascript Audio API Visualizer未在画布中显示

1 个答案: