如何播放 jquery 音频

📌 相关文章

📜 如何播放 jquery 音频 - Javascript (1)

📅 最后修改于: 2023-12-03 15:24:47.734000 🧑 作者: Mango

在 Web 开发中，经常需要在网页上播放音频文件。使用 jQuery 可以方便地在页面中添加音频播放器和控制器，同时支持多种格式的音频文件。

准备工作

在开始之前，我们需要下载和引入 jQuery 库以便在网页中使用。可以在 jQuery 官网下载并引入，或者使用以下 CDN 引用：

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>

添加音频播放器和控制器

首先，我们需要在网页中添加一个音频元素 <audio>，并设置其 src 属性为要播放的音频文件路径。同时，为了方便控制音频的播放、暂停、音量等功能，我们需要添加一些控制按钮和显示控制信息的 HTML 元素。可以参考以下 HTML 代码：

<audio id="my-audio" src="music.mp3"></audio>

<div class="player">
  <button id="play-btn">播放</button>
  <button id="pause-btn">暂停</button>
  <div class="time">00:00 / 00:00</div>
  <input id="volume-input" type="range" min="0" max="1" step="0.01" value="1">
</div>

以上代码中，我们为音频元素设置了 id="my-audio"，并将音频文件路径设置为 src="music.mp3"。控制按钮分别设置了 id="play-btn" 和 id="pause-btn"，用于播放和暂停音频。时间显示元素设置了 class="time"，用于显示当前时间和音频总时长。音量控制器设置了 id="volume-input"，用于控制音频的音量大小。

使用 jQuery 操作音频

有了 HTML 结构之后，我们需要使用 jQuery 来操作音频元素和控制器。可以参考以下 jQuery 代码：

$(function() {
  var audio = $('#my-audio').get(0);

  $('#play-btn').click(function() {
    audio.play();
  });

  $('#pause-btn').click(function() {
    audio.pause();
  });

  $(audio).on('timeupdate', function() {
    var time = formatTime(audio.currentTime) + ' / ' + formatTime(audio.duration);
    $('.time').text(time);
  });

  $('#volume-input').change(function() {
    audio.volume = $(this).val();
  });

  function formatTime(time) {
    var minutes = Math.floor(time / 60);
    var seconds = Math.floor(time % 60);
    return ('0' + minutes).slice(-2) + ':' + ('0' + seconds).slice(-2);
  }
});

以上代码中，我们首先使用 $ 函数获取音频元素对象，并将其保存在变量 audio 中。然后，使用 $ 函数和相应的选择器获取控制按钮和控制器元素，并为其添加点击或改变事件的监听器。在 play 和 pause 事件中，分别使用 audio.play() 和 audio.pause() 方法控制音频的播放和暂停。在 timeupdate 事件中，使用 audio.currentTime 和 audio.duration 属性获取音频的当前时间和总时长，然后调用 formatTime 函数将时间格式化后更新到时间显示元素中。在音量控制器的 change 事件中，使用 $(this).val() 获取当前音量大小，并将其设置为 audio.volume 的值。

最后，在代码中定义了一个 formatTime 函数，用于将时间转换为 mm:ss 格式的字符串。

到这里，一个基本的 jQuery 音频播放器就完成了。可以根据需要添加更多的控制功能和样式，完整的代码请参考以下 Markdown 代码块：

```html
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery 音频播放器</title>
</head>
<body>

<audio id="my-audio" src="music.mp3"></audio>

<div class="player">
  <button id="play-btn">播放</button>
  <button id="pause-btn">暂停</button>
  <div class="time">00:00 / 00:00</div>
  <input id="volume-input" type="range" min="0" max="1" step="0.01" value="1">
</div>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script>
$(function() {
  var audio = $('#my-audio').get(0);

  $('#play-btn').click(function() {
    audio.play();
  });

  $('#pause-btn').click(function() {
    audio.pause();
  });

  $(audio).on('timeupdate', function() {
    var time = formatTime(audio.currentTime) + ' / ' + formatTime(audio.duration);
    $('.time').text(time);
  });

  $('#volume-input').change(function() {
    audio.volume = $(this).val();
  });

  function formatTime(time) {
    var minutes = Math.floor(time / 60);
    var seconds = Math.floor(time % 60);
    return ('0' + minutes).slice(-2) + ':' + ('0' + seconds).slice(-2);
  }
});
</script>

</body>
</html>