HTML 5音樂可視化是一項非常酷炫的技術，在網站設計和多媒體交互方面具有廣泛的應用。下面是一個實現HTML 5音樂可視化的完整源代碼。
<!DOCTYPE html>
<html>
<head>
<title>HTML 5音樂可視化</title>
<meta charset="UTF-8">
</head>
<body>
<h1>HTML 5音樂可視化</h1>
<canvas id="canvas" width="600" height="400"></canvas>
<audio id="audio" src="music.mp3" controls autoplay>
<p>你的瀏覽器不支持audio標簽！</p>
</audio>
<script>
var audio = document.getElementById("audio");
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var width = canvas.width;
var height = canvas.height;
var dataArray = new Uint8Array(512);
// 獲取音頻數據
function getAudioData() {
requestAnimationFrame(getAudioData);
analyser.getByteFrequencyData(dataArray);
ctx.clearRect(0, 0, width, height);
drawBars(dataArray);
}
// 繪制音樂柱形圖
function drawBars(dataArray) {
var barWidth = width / dataArray.length;
var barHeight;
var x = 0;
for (var i = 0; i < dataArray.length; i++) {
barHeight = dataArray[i] / 2;
ctx.fillStyle = 'rgb(' + (barHeight + 100) + ', 50, 50)';
ctx.fillRect(x, height - barHeight, barWidth, barHeight);
x += barWidth + 1;
}
}
// 初始化Web Audio API
var context = new AudioContext();
var analyser = context.createAnalyser();
analyser.fftSize = 1024;
var source = context.createMediaElementSource(audio);
source.connect(analyser);
analyser.connect(context.destination);
// 開始處理音頻數據
getAudioData();
</script>
</body>
</html>以上代碼中，關鍵點在于使用Web Audio API獲取音頻數據，并使用canvas繪制音樂柱形圖。通過setInterval或requestAnimationFrame獲取音頻數據，再通過canvas繪制音樂可視化效果。該技術可應用于音樂網站、多媒體設計和游戲等領域。