HTML5 audio标签

最新推荐文章于 2025-04-26 07:37:11 发布

彦祖你来了

最新推荐文章于 2025-04-26 07:37:11 发布

阅读量415

点赞数

文章标签： html5 前端 html

本文链接：https://blog.youkuaiyun.com/weixin_45146319/article/details/131776457

版权

本文介绍了HTML5中用于嵌入音频的<audio>元素，包括支持的音频格式及常用属性如controls、autoplay、loop和preload。还详细讲解了audio元素的方法如load()、play()和pause()，以及DOM事件如canplay、pause和play。通过示例展示了如何控制音频的播放、暂停、重播、调整播放速度和音量，以及使用原生滑块控制播放进度。

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

audio标签：

1.HTML5 规定了在网页上嵌入音频元素的标准，即使用元素
2.audio元素支持mp3，wav，ogg三种格式

audio常用属性

 1. controls 显示控制条
 2. autoplay 自动播放，在最新版本谷歌浏览器不支持自动播放
 3. loop 循环播放
 4. preload 预加载音频资源
 5. src 加载音频资源

audio常用方法

 1. load() 重新加载音频元素
 2. play() 开始播放音频
 3. pause() 暂停当前播放的音频

audio常用DOM属性

 1. canplay 当浏览器可以播放音频时
 2. pause 当音频已暂停时
 3. play 当视频已开始时
 4. timeupdate 当目前的播放位置已更改时

示例

控制音频的播放、暂停、重新播放、设置播放倍速、设置音量、获取进度、原生步进器控制播放进度

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <audio id="myAudio" autoplay src="你的音频路径"></audio>

  <button onclick="player.play()">播放</button>
  <button onclick="player.pause()">暂停</button>
  <button onclick="player.restart()">重新播放</button>
  <button onclick="player.setSpeed(1.5)">1.5x 倍速</button>
  <button onclick="player.setSpeed(1)">正常速度</button>
  <button onclick="player.setVolume(0.5)">50% 音量</button>
  <button onclick="player.setVolume(1)">100% 音量</button>
  <div>
    <span id="currentTime"></span> / <span id="duration"></span>
  </div>
  <div>
    <input type="range" min="0" max="100" step="0.01" value="0" onchange="seek(this.value)">
  </div>

  <script>
    class AudioPlayer {
      constructor(audioElement) {
        this.audio = audioElement;
      }

      // 播放
      play() {
        this.audio.play();
      }

      // 暂停
      pause() {
        this.audio.pause();
      }

      // 重新播放，设置当前播放时间为0,再播放
      restart() {
        this.audio.currentTime = 0;
        this.audio.play();
      }

      // 设置播放速度
      setSpeed(speed) {
        this.audio.playbackRate = speed;
      }

      // 设置播放音量
      setVolume(volume) {
        this.audio.volume = volume;
      }

      // 获取播放进度
      getTime() {
        const currentTime = this.audio.currentTime; // 当前时长
        const duration = this.audio.duration; // 总时长
        const percentage = duration ? (currentTime / duration) * 100 : 0;
        return {
          currentTime: currentTime,
          duration: duration,
          percentage: percentage
        };
      }
    }

    let audio = document.getElementById('myAudio');
    let player = new AudioPlayer(audio);

    // 回显播放时间
    function updateTime() {
      const time = player.getTime();
      document.getElementById('currentTime').innerHTML = formatTime(time.currentTime);
      document.getElementById('duration').innerHTML = formatTime(time.duration);
      document.querySelector('input[type="range"]').value = time.percentage;
    }

    // 格式化播放时间
    function formatTime(time) {
      const minutes = Math.floor(time / 60);
      const seconds = Math.floor(time % 60);
      return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
    }

    // 步进器控制播放进度
    function seek(percentage) {
      const duration = player.getTime().duration;
      player.audio.currentTime = duration * (percentage / 100);
    }

    setInterval(updateTime, 1000);
  </script>

</html>