html5 Audio 对象

最新推荐文章于 2024-05-31 22:11:41 发布

#麻辣小龙虾#

最新推荐文章于 2024-05-31 22:11:41 发布

阅读量293

点赞数 3

分类专栏： HTML5

本文链接：https://blog.youkuaiyun.com/CodingNoob/article/details/87929524

版权

HTML5 专栏收录该内容

27 篇文章

订阅专栏

本文介绍了一个使用HTML和JavaScript实现的音频播放器，具备播放、暂停、静音及显示当前播放时间的功能。通过简单的代码示例，展示了如何在网页中嵌入音频文件并进行基本的播放控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最终效果如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div class="view">
    <audio id="audio" loop controls>
      <!-- <source src="horse.ogg" type="audio/ogg"> -->
      <source src="warn1.mp3" type="audio/mpeg">
    您的浏览器不支持 audio 元素。
    </audio>
  </div>
  <h1>时间：<span id="time"></span></h1>
  <button id="play">播放</button>
  <button id="pause">暂停</button>
  <button id="jy">静音</button>
</body>
<script>
  function $(str) {
    return document.querySelector(str);
  }
  let obj = $('#audio');
  $('#jy').onclick = function () {
    // 静音状态
    if (obj.muted) {
      this.innerHTML = '静音';
      obj.muted = false; // 是否静音
    } else {
      this.innerHTML = '取消静音';
      obj.muted = true; // 是否静音
    }
  };
  $('#play').onclick = function () {
    obj.controls = true; // 显示控制条
    // obj.load(); // 重载
    obj.play(); // 是否暂停
    console.log(obj.controls); // 获取控制条
    console.log(obj.currentTime); // 获取时间
    $('#time').innerHTML = obj.currentTime;
    clearInterval(window.$time);
    window.$time = setInterval(() => {
      $('#time').innerHTML = obj.currentTime;
    }, 1000);
    console.log(obj.currentSrc);
  };
  $('#pause').onclick = function () {
    obj.pause(); // 是否暂停
  };
</script>
</html>