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

创建音乐播放/暂停按钮：基于HTML、CSS和JavaScript的实现教程

霞舞

发布： 2025-09-23 19:47:01

原创

311人浏览过

创建音乐播放/暂停按钮：基于html、css和javascript的实现教程

本文将引导你使用HTML、CSS和JavaScript创建一个简单的音乐播放/暂停按钮。通过这个教程，你将学习如何控制音频元素的播放状态，并动态更新按钮的样式以反映当前状态。我们将提供完整的代码示例，并解释关键步骤，帮助你理解并应用这些技术。

HTML结构

首先，我们需要定义HTML结构。这包括一个audio元素用于加载和控制音频，以及一个div元素作为播放/暂停按钮的容器。

<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访问。<source> 元素指定音频文件的路径和类型。preload="auto" 属性建议浏览器预先加载音频。
div元素： id 属性设置为 "music-button-container"，包含播放/暂停按钮。内部的 div 元素（id="play-pause"）是实际的按钮，初始类名为 "play"。

CSS样式

接下来，我们使用CSS来设置按钮的样式。

#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：设置暂停状态下的背景图片，使用 !important 确保样式覆盖。

JavaScript逻辑

现在，我们使用JavaScript来控制音频的播放和暂停，并更新按钮的样式。

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

海螺音乐

海螺AI推出的AI音乐生成工具，可以生成个性化的音乐作品。

查看详情

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

function musicPlay() {
  if (music.paused) {
    music.play();
    controlButton.className = "pause";
  } else {
    music.pause();
    controlButton.className = "play";
  }
}

controlButton.addEventListener("click", musicPlay);
music.addEventListener("ended", function () {
  controlButton.className = "play";
});

登录后复制

获取元素：使用 document.getElementById 获取 audio 元素和按钮元素。
musicPlay 函数：
- 检查 music.paused 属性来确定音频是否暂停。
- 如果暂停，则调用 music.play() 播放音频，并将按钮的类名更改为 "pause"。
- 如果正在播放，则调用 music.pause() 暂停音频，并将按钮的类名更改为 "play"。
事件监听器：
- 为按钮添加 click 事件监听器，当点击按钮时调用 musicPlay 函数。
- 为 audio 元素添加 ended 事件监听器，当音频播放结束时将按钮的类名更改为 "play"。

改进方案

以下是一些可以改进代码的建议：

使用常量： 将选择器字符串存储在常量中，提高代码的可读性和可维护性。
箭头函数： 使用箭头函数简化事件监听器的回调函数。
classList： 使用 classList.add 和 classList.remove 方法来操作类名，避免覆盖其他类名。
简化条件判断： 可以使用三元运算符简化 musicPlay 函数。

改进后的代码：

const MUSIC_BUTTON_ID = 'music-button';
const PLAY_PAUSE_ID = 'play-pause';
const PLAY_CLASS = 'play';
const PAUSE_CLASS = 'pause';

const music = document.getElementById(MUSIC_BUTTON_ID);
const controlButton = document.getElementById(PLAY_PAUSE_ID);

const musicPlay = () => {
  music.paused ? (music.play(), controlButton.classList.remove(PLAY_CLASS), controlButton.classList.add(PAUSE_CLASS)) : (music.pause(), controlButton.classList.remove(PAUSE_CLASS), controlButton.classList.add(PLAY_CLASS));
};

controlButton.addEventListener("click", musicPlay);
music.addEventListener("ended", () => {
  controlButton.classList.remove(PAUSE_CLASS);
  controlButton.classList.add(PLAY_CLASS);
});

登录后复制