<!DOCTYPE html>
<html>
<head>
<title>Music Player</title>
<style>
body {
background-image: url('');
font-family: Arial, sans-serif;
color: white;
}
h1 {
margin: 20px;
text-align: center;
}
margin: 50px auto;
display: flex;
flex-direction: column;
align-items: center;
width: 500px;
}
margin-bottom: 20px;
height: 300px;
object-fit: cover;
border-radius: 10px;
}
background-color: rgba(0, 0, 0, 0.5);
border-radius: 10px;
}
margin: 20px auto;
text-align: center;
font-size: 24px;
line-height: 36px;
height: 200px;
overflow-y: scroll;
border-radius: 10px;
background-color: rgba(255, 255, 255, 0.5);
padding: 20px;
}
</style>
</head>
<body>
<h1>My Music Player</h1>
<div id="music-player">
<video id="music" src="song.mp3" controls></video>
<canvas id="visualization"></canvas>
</div>
<div id="lyrics">
<p>[00:10] This is the first line of lyrics</p>
<p>[00:20] This is the second line of lyrics</p>
<p>[00:30] This is the third line of lyrics</p>
<p>[00:40] This is the fourth line of lyrics</p>
<p>[00:50] This is the fifth line of lyrics</p>
<p>[01:00] This is the sixth line of lyrics</p>
<p>[01:10] This is the seventh line of lyrics</p>
<p>[01:20] This is the eighth line of lyrics</p>
<p>[01:30] This is the ninth line of lyrics</p>
<p>[01:40] This is the tenth line of lyrics</p>
</div>
<script>
// Get the canvas and context
var canvas = document.getElementById('visualization');
var context = canvas.getContext('2d');
// Set the canvas size
= 500;
= 300;
// Get the audio element
var audio = document.getElementById('music');
// Set up the animation loop
requestAnimationFrame(draw);
function draw() {
// Clear the canvas
context.clearRect(0, 0, , );
// Draw the visualization
var frequencyData = new Uint8Array(200);
.getByteFrequencyData(frequencyData);
= 'white';
context.beginPath();
context.moveTo(0, );
for (var i = 0; i < ; i++) {
var x = i / * ;
var y = frequencyData[i] / 255 * ;
context.lineTo(x, - y);
}
context.lineTo(, );
context.closePath();
context.fill();
// Update the lyrics
var currentTime = ;
var lyrics = document.getElementById('lyrics');
for (var i = 0; i < ; i++) {
var lyric = [i];
var time = parseTime();
if (currentTime >= time) {
= 'red';
lyric.scrollIntoView({ behavior: 'smooth' });
} else {
= 'black';
}
}
// Request the next animation frame
requestAnimationFrame(draw);
}
function parseTime(text) {
var parts = text.substring(1, text.indexOf(']')).split(':');
var minutes = parseInt(parts[0], 10);
var seconds = parseFloat(parts[1]);
return minutes * 60 + seconds;
}
</script>
</body>
</html>