13_HTML5 Audio(音频) --[HTML5 API 学习之旅]-CSDN博客

本文链接：https://blog.csdn.net/weixin_42478311/article/details/144643716

HTML5 引入了 <audio> 标签，使得在网页中嵌入音频文件变得更加简单和直接。使用 <audio> 标签，开发者可以为网站添加音频播放功能而不需要依赖第三方插件，比如 Flash。

以下是 HTML5 <audio> 标签的一些基本用法：

基本语法

<audio src="URL" controls>
  您的浏览器不支持 HTML5 音频。
</audio>

src 属性指定了要播放的音频文件的 URL。
controls 属性是一个布尔属性，如果存在，则向用户显示控件（如播放/暂停按钮、音量控制等）。

下面我将给出两个使用 HTML5 <audio> 标签的基本示例。这两个示例展示了如何在网页中嵌入音频播放器，并为不同的浏览器提供多种音频格式以确保更好的兼容性。

示例 1：简单的音频播放器

这个例子创建了一个简单的音频播放器，它包含了控制按钮（如播放、暂停等）。这里只提供了一种音频格式，即 MP3，适用于大多数现代浏览器。

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Audio Example 1</title>
</head>
<body>
    <h2>简单音频播放器</h2>
    <audio controls>
        <source src="audio.mp3" type="audio/mpeg">
        您的浏览器不支持 HTML5 音频标签。
    </audio>
</body>
</html>

在这里插入图片描述

示例 2：多格式音频文件以确保兼容性

这个例子不仅提供了 MP3 格式的音频文件，还提供了 Ogg 和 WAV 格式，以确保即使某些浏览器不支持 MP3，用户仍然能够听到音频。此外，还包含了一个文本提示，对于不支持 <audio> 标签的老式浏览器来说，这是一个很好的降级处理方式。

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Audio Example 2</title>
</head>
<body>
    <h2>带有多格式支持的音频播放器</h2>
    <audio controls>
        <source src="audio.mp3" type="audio/mpeg">
        <source src="audio.ogg" type="audio/ogg">
        <source src="audio.wav" type="audio/wav">
        您的浏览器不支持 HTML5 音频标签。请下载音频文件：
        <a href="audio.mp3">下载 MP3 文件</a>
    </audio>
</body>
</html>

在这里插入图片描述

请注意，在上述示例代码中的 src 属性值（URL）仅为示意，请替换为实际存在的音频文件路径。这些示例展示了如何使用 <audio> 标签来增强网站的多媒体功能。

支持的格式

并不是所有的浏览器都支持相同的音频格式。主流的音频格式包括：

MP3 (audio/mpeg)：几乎被所有现代浏览器支持。
WAV (audio/wav)：无损音频，但文件较大。
Ogg Vorbis (audio/ogg)：开源且免费，但在某些浏览器上支持不佳。

为了确保兼容性，你可以提供多个来源的音频文件，浏览器会尝试加载第一个它能识别的格式：

<audio controls>
  <source src="example.mp3" type="audio/mpeg">
  <source src="example.ogg" type="audio/ogg">
  您的浏览器不支持 HTML5 音频标签。
</audio