让音乐动起来：用CSS和JavaScript自定义Audio标签

2023-04-16 01:11:05

打造属于你的音乐播放器：用HTML、CSS和JavaScript谱写旋律

音乐，生活中不可或缺的一部分，它抚慰心灵、激发灵感，更重要的是，它是我们娱乐和减压的良方。想要拥有一个专属的音乐播放器，掌控播放进度，随心所欲地享受音乐吗？那就让我们一起用HTML、CSS和JavaScript来创造它吧！

构建音乐播放器的第一步：HTML结构

一切始于HTML结构，它为我们的音乐播放器提供了骨架。创建一个HTML文件，输入如下代码：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <audio id="audio-player" controls>
    <source src="music.mp3" type="audio/mpeg">
  </audio>
</body>
</html>

这里，我们使用了

用CSS为播放器披上外衣

有了HTML结构，接下来是为播放器添加视觉效果。通过CSS，我们可以定义播放器的外观：

audio {
  width: 300px;
  height: 50px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 5px;
}

#audio-player {
  margin: 0 auto;
}

.button {
  width: 20px;
  height: 20px;
  background-color: #ccc;
  border: 1px solid #999;
  border-radius: 50%;
  cursor: pointer;
}

.play-button {
  background-image: url("play.png");
}

.pause-button {
  background-image: url("pause.png");
}

这些CSS样式为播放器设定了宽度、高度、背景色、边框和内边距，并为播放和暂停按钮定义了样式。

用JavaScript赋予播放器交互性

现在是让播放器动起来的时候了，我们需要JavaScript来实现播放、暂停和进度条控制。在HTML文件中添加以下代码：

const audioPlayer = document.getElementById("audio-player");
const playButton = document.querySelector(".play-button");
const pauseButton = document.querySelector(".pause-button");

playButton.addEventListener("click", () => {
  audioPlayer.play();
});

pauseButton.addEventListener("click", () => {
  audioPlayer.pause();
});