以下是一个使用JavaScript制作的带有动态背景音乐播放器的页面的示例代码:

html

背景音乐播放器

body {
background-image: url('background.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.player {
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.5);
padding: 20px;
border-radius: 10px;
color: #fff;
}
.control-button {
margin: 0 10px;
padding: 10px;
background-color: #333;
border: none;
border-radius: 5px;
color: #fff;
cursor: pointer;
}



document.getElementById('playButton').addEventListener('click', function() {
var audio = document.getElementById('audio');
audio.play();
});

document.getElementById('pauseButton').addEventListener('click', function() {
var audio = document.getElementById('audio');
audio.pause();
});

在上述示例代码中,我们使用了一个`

`元素来创建一个播放器的容器,然后在其中放置了一个`