jQuery HTML5音频播放器 – jQuery切换点击播放/暂停

在本文中，我们将介绍如何使用jQuery来创建一个HTML5音频播放器，并实现点击切换播放和暂停功能。

准备工作

首先，我们需要准备一个HTML页面来展示音频播放器。我们可以使用以下代码作为基础结构：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery HTML5音频播放器</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <h1>HTML5音频播放器</h1>
  <audio id="audioPlayer" controls>
    <source src="audio.mp3" type="audio/mpeg">
  </audio>
  <button id="playPauseBtn">播放/暂停</button>
</body>
</html>

在上面的代码中，我们为音频播放器添加了一个id属性为audioPlayer，这将帮助我们在jQuery中找到和控制音频元素。同时，我们也添加了一个id为playPauseBtn的按钮，用于切换播放和暂停音频。

接下来，我们需要引入jQuery库文件。这里使用的是最新版本的jQuery库。

实现切换点击播放/暂停功能

在页面加载完成后，我们可以使用jQuery来选择id为playPauseBtn的按钮，并为其添加点击事件处理程序：

$(document).ready(function() {
  $('#playPauseBtn').click(function() {
    var audioPlayer = document.getElementById('audioPlayer');
    if (audioPlayer.paused) {
      audioPlayer.play();
    } else {
      audioPlayer.pause();
    }
  });
});

上面的代码中，我们使用$(document).ready()来确保页面已完成加载后再执行相关代码。然后我们选择id为playPauseBtn的按钮，并为其添加点击事件处理程序。

在点击事件处理程序中，我们通过获取id为audioPlayer的音频元素，使用document.getElementById()方法获取到音频元素的真正引用。

接下来，我们使用音频元素的paused属性来判断当前音频是否处于暂停状态。如果是暂停状态，则调用play()方法开始播放音频；如果不是暂停状态，则调用pause()方法暂停音频的播放。