HTML 音频(Audio)

HTML5 提供了 <audio> 元素来嵌入音频文件到网页中。使用 <audio> 元素可以轻松地在网页中添加音频播放功能。

基本用法

要在网页中添加音频，首先需要在 <audio> 元素中指定音频文件的地址。例如：

<audio src="audio.mp3" controls></audio>

在上面的示例中，src 属性指定了音频文件的地址，controls 属性添加了一个播放器控件，使用户可以控制音频的播放。

控制属性

除了 controls 属性外，<audio> 元素还支持其他控制属性，例如：

• autoplay：自动播放音频。
• loop：循环播放音频。
• muted：静音音频。
• preload：预加载音频文件。

示例代码：

<audio src="audio.mp3" controls autoplay loop muted preload="auto"></audio>

支持的音频格式

不同的浏览器支持不同的音频格式，因此通常需要提供多个格式的音频文件以确保兼容性。常见的音频格式包括 MP3、Ogg 和 WAV。

示例代码：

<audio>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  <source src="audio.wav" type="audio/wav">
</audio>

在上面的示例中，<source> 元素用于提供不同格式的音频文件，浏览器会自动选择支持的格式进行播放。

事件

<audio> 元素还支持一些事件，可以通过 JavaScript 来监听这些事件并执行相应的操作。常见的事件包括 play、pause、ended 等。

示例代码：

// www.javascriptcn.com code example
<audio id="myAudio" src="audio.mp3"></audio>

<script>
  var audio = document.getElementById('myAudio');
  
  audio.addEventListener('play', function() {
    console.log('音频开始播放');
  });

  audio.addEventListener('pause', function() {
    console.log('音频暂停播放');
  });

  audio.addEventListener('ended', function() {
    console.log('音频播放结束');
  });
</script>

以上就是关于 HTML 音频的基本用法和相关属性、事件的介绍。希望能帮助你更好地使用 <audio> 元素在网页中添加音频功能。