当前位置：首页 > news >正文

HTML5 Audio（音频）学习笔记

news 来源：原创 2025/5/15 1:57:22

一、HTML5 音频简介

HTML5 引入了 <audio> 元素，用于在网页中播放音频文件。这使得音频的嵌入变得更加简单和标准化。在 HTML5 之前，大多数音频是通过插件（如 Flash）来播放的，但这种方式存在兼容性问题，因为并非所有浏览器都支持相同的插件。HTML5 的 <audio> 元素为音频播放提供了一种标准方法。

二、浏览器支持情况

Internet Explorer 9+、Firefox、Opera、Chrome 和 Safari 都支持 <audio> 元素。
注意：Internet Explorer 8 及更早版本不支持 <audio> 元素。

三、基本用法

1. 基本语法

在 HTML5 中嵌入音频的基本语法如下：

HTML复制

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  您的浏览器不支持 audio 元素。
</audio>

预览

<audio> 元素提供了播放、暂停和音量控件来控制音频。
<audio> 标签之间插入的内容是为不支持 <audio> 元素的浏览器提供的备用内容。
<audio> 元素允许使用多个 <source> 元素，<source> 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件。

2. 支持的音频格式

目前，<audio> 元素支持三种音频格式：

MP3：MIME 类型为 audio/mpeg。
Wav：MIME 类型为 audio/wav。
Ogg：MIME 类型为 audio/ogg。

不同浏览器对这些格式的支持情况如下表所示：

浏览器	MP3	Wav	Ogg
Internet Explorer 9+	YES	NO	NO
Chrome 6+	YES	YES	YES
Firefox 3.6+	YES	YES	YES
Safari 5+	YES	YES	NO
Opera 10+	YES	YES	YES

四、使用 DOM 控制音频

<audio> 元素支持多种方法、属性和事件，可以通过 JavaScript 进行控制。例如：

方法：play()、pause() 等，用于控制音频的播放和暂停。
属性：paused、currentTime 等，可以读取或设置音频的状态和播放时间。
事件：play、pause 等，可以监听音频的播放和暂停事件。

示例代码

以下是一个简单的示例，展示如何使用 JavaScript 控制 <audio> 元素：

HTML复制

<audio id="myAudio" controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  您的浏览器不支持 audio 元素。
</audio>
<button onclick="playAudio()">播放</button>
<button onclick="pauseAudio()">暂停</button>

<script>
  function playAudio() {
    document.getElementById("myAudio").play();
  }

  function pauseAudio() {
    document.getElementById("myAudio").pause();
  }
</script>

预览