创建音乐播放/暂停按钮：JavaScript、HTML和CSS实现指南-js教程-PHP中文网

创建音乐播放/暂停按钮：JavaScript、HTML和CSS实现指南

花韻仙語

发布： 2025-09-23 20:07:26

原创

903人浏览过

创建音乐播放/暂停按钮：javascript、html和css实现指南

本文旨在提供一个清晰、可行的方案，用于创建一个带有播放/暂停功能的音乐按钮。我们将详细讲解HTML结构、CSS样式以及JavaScript逻辑，并提供经过验证的代码示例，帮助开发者轻松实现音乐播放控制功能。通过本文，你将掌握如何使用JavaScript监听点击事件，以及如何根据音乐的播放状态切换按钮的样式。

HTML结构

首先，我们需要构建HTML结构。一个包含音频元素和控制按钮的列表项是基本的框架。音频元素用于加载和播放音乐，控制按钮则用于触发播放和暂停操作。

<ul>
  <li class="nav-item nohover">
    <audio id="music-button">
      <source src="Zara%20Larsson%20Lush%20Life%20Lyrics.mp3" preload="auto" type="audio/mpeg" />
    </audio>
    <div id="music-button-container">
      <div id="play-pause" class="play"></div>
    </div>
  </li>
</ul>

登录后复制

在这个结构中，audio标签的id为music-button，用于JavaScript操作。div标签id为play-pause，初始类名为play，用于显示播放图标。

CSS样式

接下来，我们使用CSS来定义按钮的样式。关键在于使用background-image属性来显示播放和暂停图标，并通过切换类名来改变背景图像。

立即学习“Java免费学习笔记（深入）”；

#music-button-container,
#play-pause {
  cursor: pointer;
  height: 50px;
  width: 70px;
  padding: 12px 18px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50px;
}

.play {
  background-image: url(./music2.png);
}

.pause {
  background-image: url(./equalizer.png) !important;
}

登录后复制

#music-button-container和#play-pause设置了按钮的基本样式，包括光标样式、尺寸、内边距、背景重复方式、背景位置和背景尺寸。.play类设置了播放图标的背景图像，.pause类设置了暂停图标的背景图像。

JavaScript逻辑

JavaScript是实现播放/暂停功能的关键。我们需要获取音频元素和控制按钮的引用，并添加点击事件监听器。

Favird No-Code Tools

无代码工具的聚合器

查看详情

const music = document.getElementById('music-button');
const controlButton = document.getElementById('play-pause');

controlButton.addEventListener("click", () => {
  if (music.paused || music.currentTime >= 0) {
    music.play();
    controlButton.className = "pause";
  } else {
    music.pause();
    controlButton.className = "play";
  }
});

music.addEventListener("ended", () => {
  controlButton.className = "play";
});

登录后复制

这段代码首先获取了audio元素和play-pause元素的引用。然后，它添加了一个点击事件监听器到play-pause元素。当点击发生时，它会检查音频是否暂停。如果暂停或当前播放时间大于等于0，则播放音频并将按钮的类名更改为pause，否则暂停音频并将按钮的类名更改为play。此外，它还添加了一个ended事件监听器到audio元素，当音频播放结束时，将按钮的类名更改为play。

完整示例

将上述HTML、CSS和JavaScript代码整合在一起，就是一个完整的可运行示例。

<!DOCTYPE html>
<html>
<head>
  <title>Music Player</title>
  <style>
    #music-button-container,
    #play-pause {
      cursor: pointer;
      height: 50px;
      width: 70px;
      padding: 12px 18px;
      background-repeat: no-repeat;
      background-position: center;
      background-size: 50px;
    }

    .play {
      background-image: url(./music2.png); /* 替换为你的播放图标路径 */
    }

    .pause {
      background-image: url(./equalizer.png) !important; /* 替换为你的暂停图标路径 */
    }
  </style>
</head>
<body>
  <ul>
    <li class="nav-item nohover">
      <audio id="music-button">
        <source src="Zara%20Larsson%20Lush%20Life%20Lyrics.mp3" preload="auto" type="audio/mpeg" />
      </audio>
      <div id="music-button-container">
        <div id="play-pause" class="play"></div>
      </div>
    </li>
  </ul>

  <script>
    const music = document.getElementById('music-button');
    const controlButton = document.getElementById('play-pause');

    controlButton.addEventListener("click", () => {
      if (music.paused || music.currentTime >= 0) {
        music.play();
        controlButton.className = "pause";
      } else {
        music.pause();
        controlButton.className = "play";
      }
    });

    music.addEventListener("ended", () => {
      controlButton.className = "play";
    });
  </script>
</body>
</html>

登录后复制

注意：