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

桃园码工2024-12-23 14:52

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

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

基本语法

html 复制代码 
<audio src="URL" controls>
  您的浏览器不支持 HTML5 音频。
</audio>
  • src 属性指定了要播放的音频文件的 URL。
  • controls 属性是一个布尔属性，如果存在，则向用户显示控件（如播放/暂停按钮、音量控制等）。

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

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

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

html 复制代码 
<!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> 标签的老式浏览器来说，这是一个很好的降级处理方式。

html 复制代码 
<!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)：开源且免费，但在某些浏览器上支持不佳。

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

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

HTML5 <audio> 标签支持多种音频格式，以确保在不同浏览器上的兼容性。主要支持的格式包括 MP3、WAV 和 Ogg Vorbis。下面我将给出一个示例，该示例为不同的浏览器提供了多个音频文件来源，以确保尽可能广泛的兼容性。

示例：提供多格式音频文件

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Audio Format Support Example</title>
</head>
<body>
    <h2>带有多种格式支持的 HTML5 音频播放器</h2>
    <audio controls>
        <!-- MP3 文件，广泛支持 -->
        <source src="https://www.example.com/path/to/audio.mp3" type="audio/mpeg">
        <!-- Ogg 文件，适用于 Firefox 和 Chrome 等 -->
        <source src="https://www.example.com/path/to/audio.ogg" type="audio/ogg">
        <!-- WAV 文件，适用于几乎所有浏览器，但文件较大 -->
        <source src="https://www.example.com/path/to/audio.wav" type="audio/wav">
        <!-- 如果浏览器不支持 <audio> 元素，则显示以下信息 -->
        您的浏览器不支持 HTML5 音频标签。请使用现代浏览器访问。
    </audio>
</body>
</html>

在这个例子中：

  • src 属性指定了音频文件的位置。
  • type 属性指定了音频文件的 MIME 类型，帮助浏览器快速识别它是否能够播放该类型的文件。
  • 当浏览器遇到 <audio> 标签时，它会依次检查每个 <source> 标签，并尝试加载第一个它能识别和播放的格式。如果浏览器无法播放任何一个提供的格式，它将忽略这些 <source> 标签并显示最后面的文字提示。

请注意，上述代码中的 URL (https://www.example.com/path/to/audio.mp3) 是示意性的，请替换为实际存在的音频文件路径。此外，由于不是所有浏览器都支持相同的音频格式，因此提供多种格式是最佳实践，可以确保更广泛的浏览器兼容性。

属性

<audio> 标签还支持许多其他属性，例如：

  • autoplay：页面加载完成后自动播放音频。
  • loop：循环播放音频。
  • muted：静音播放音频。
  • preload：指示浏览器在页面加载时是否应该预加载音频文件（none, metadata, auto）。

HTML5 <audio> 标签有许多属性可以用来控制音频播放的行为。下面我将给出三个使用不同属性的示例，以展示如何利用这些属性来增强用户体验。

示例 1：使用 controls 和 autoplay 属性

这个例子展示了如何使用 controls 属性为用户提供播放、暂停和调整音量等控件，并使用 autoplay 属性使音频在页面加载完成后自动开始播放。

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Audio with Controls and Autoplay</title>
</head>
<body>
    <h2>自动播放并提供控件的音频</h2>
    <audio controls autoplay>
        <source src="https://www.example.com/path/to/audio.mp3" type="audio/mpeg">
        您的浏览器不支持 HTML5 音频标签。
    </audio>
</body>
</html>

示例 2：使用 loop 和 muted 属性

在这个例子中，我们使用 loop 属性让音频循环播放，同时使用 muted 属性使音频静音播放，这可能适用于某些不需要声音输出但需要背景音乐循环的情况。

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Audio Looping and Muted</title>
</head>
<body>
    <h2>循环播放且静音的音频</h2>
    <audio loop muted>
        <source src="https://www.example.com/path/to/audio.mp3" type="audio/mpeg">
        您的浏览器不支持 HTML5 音频标签。
    </audio>
</body>
</html>

示例 3：使用 preload 属性

preload 属性用于指示浏览器是否应该在页面加载时预加载音频文件，或者仅在用户开始播放时加载。这个例子设置了 preload="auto"，这意味着浏览器应该尽可能地提前加载整个音频文件。

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Audio Preload Example</title>
</head>
<body>
    <h2>预加载音频</h2>
    <audio controls preload="auto">
        <source src="https://www.example.com/path/to/audio.mp3" type="audio/mpeg">
        您的浏览器不支持 HTML5 音频标签。
    </audio>
</body>
</html>

请注意，上述代码中的 URL (https://www.example.com/path/to/audio.mp3) 是示意性的，请替换为实际存在的音频文件路径。此外，不同的浏览器对这些属性的支持程度可能有所不同，因此在实际应用中应当进行充分测试。

方法

HTML5 <audio> 元素提供了多种方法，允许开发者通过 JavaScript 来控制音频的播放。以下是一些常用的方法及其简要说明：

常用方法

  1. play()

    • 开始或恢复音频的播放。
    javascript 复制代码 
    var audio = document.getElementById("myAudio");
audio.play();

  2. pause()

    • 暂停当前正在播放的音频。
    javascript 复制代码 
    audio.pause();

  3. load()

    • 重新加载音频元素的内容。这通常在改变了 src 属性之后调用，以确保新的音频文件被加载。
    javascript 复制代码 
    audio.load();

  4. canPlayType(type)

    • 检查浏览器是否能够播放指定类型的音频格式。返回值为 "probably"、"maybe" 或空字符串（表示不支持）。
    javascript 复制代码 
    var canPlayMp3 = audio.canPlayType('audio/mpeg');

  5. addEventLister(event, function)

    • 添加一个事件监听器来响应特定事件，如播放完成 (ended)、暂停 (pause) 等。
    javascript 复制代码 
    audio.addEventListener('ended', function() {
    console.log('音频播放完毕');
});

  6. removeEventListener(event, function)

    • 移除之前添加的事件监听器。

  7. setInterval() 和 clearInterval() (虽然不是 <audio> 的方法，但经常与之结合使用)

    • 可用于定时检查音频状态或执行周期性任务，比如更新进度条。

音频属性的操作

除了上述方法之外，还可以直接操作 <audio> 元素的属性来进行更细粒度的控制：

  • currentTime: 设置或返回当前音频播放的位置（秒）。
  • volume: 设置或返回音频音量（0.0 到 1.0 之间的浮点数）。
  • muted: 设置或返回音频是否静音。
  • loop: 设置或返回音频是否循环播放。

示例：使用这些方法和属性

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Audio Methods and Properties</title>
</head>
<body>
    <audio id="myAudio" controls>
        <source src="https://www.example.com/path/to/audio.mp3" type="audio/mpeg">
        您的浏览器不支持 HTML5 音频标签。
    </audio>
    <script>
        var audio = document.getElementById("myAudio");

        // 播放音频
        function playAudio() {
            audio.play();
        }

        // 暂停音频
        function pauseAudio() {
            audio.pause();
        }

        // 跳转到音频的某个时间点
        function jumpToTime(seconds) {
            audio.currentTime = seconds;
        }

        // 设置音量
        function setVolume(level) {
            audio.volume = level; // 例如 0.5 表示半音量
        }

        // 检查是否支持某种音频类型
        function checkSupportForType(type) {
            return audio.canPlayType(type);
        }

        // 添加播放结束事件监听器
        audio.addEventListener('ended', function() {
            console.log('音频播放完毕');
        });

        // 更改音频源并加载新音频
        function changeSource(newSrc) {
            audio.src = newSrc;
            audio.load(); // 加载新的音频文件
            audio.play(); // 开始播放新音频
        }
    </script>
</body>
</html>

请注意，上述代码中的 URL (https://www.example.com/path/to/audio.mp3) 是示意性的，请替换为实际存在的音频文件路径。此外，对于某些方法，如 canPlayType()，返回的结果可能因浏览器而异，因此在开发时应该考虑到这一点。

JavaScript 控制

除了通过 HTML 标签控制音频外，还可以使用 JavaScript 来动态控制音频元素的行为。例如：

javascript 复制代码 
var audio = document.getElementById("myAudio");
audio.play();
audio.pause();
audio.currentTime = 0; // 重置到开始位置

这只是一个简单的介绍，HTML5 的 <audio> 元素还有更多特性和选项可以根据需要进行探索和应用。

使用 JavaScript 可以动态地控制 HTML5 <audio> 元素，为用户提供更加丰富和互动的体验。下面我将给出两个示例，展示如何通过 JavaScript 来控制音频播放。

示例 1：使用 JavaScript 控制音频播放、暂停和跳转

在这个例子中，我们创建了几个按钮来控制音频的播放、暂停以及跳转到音频的不同位置。这些功能是通过监听按钮点击事件并调用相应的音频对象方法实现的。

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Audio Controlled by JavaScript</title>
    <script>
        function playAudio() {
            var audio = document.getElementById("myAudio");
            audio.play();
        }

        function pauseAudio() {
            var audio = document.getElementById("myAudio");
            audio.pause();
        }

        function rewindAudio() {
            var audio = document.getElementById("myAudio");
            audio.currentTime = 0;
        }
    </script>
</head>
<body>
    <h2>JavaScript 控制的音频播放器</h2>
    <audio id="myAudio" controls>
        <source src="audio.mp3" type="audio/mpeg">
        您的浏览器不支持 HTML5 音频标签。
    </audio>
    <br><br>
    <button onclick="playAudio()">播放</button>
    <button onclick="pauseAudio()">暂停</button>
    <button onclick="rewindAudio()">重置</button>
</body>
</html>

示例 2：使用 JavaScript 动态改变音频源文件

这个例子展示了如何通过 JavaScript 更改音频元素的 src 属性来切换不同的音频文件。这可以用于创建一个简单的音乐播放列表或根据用户的选择播放不同的曲目。

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <title>Change Audio Source with JavaScript</title>
    <script>
        function changeAudioSource(newSrc) {
            var audio = document.getElementById("dynamicAudio");
            audio.src = newSrc;
            audio.load(); // 加载新的音频文件
            audio.play(); // 开始播放新音频
        }
    </script>
</head>
<body>
    <h2>动态改变音频来源</h2>
    <audio id="dynamicAudio" controls>
        <!-- 初始音频文件 -->
        <source src="audio.mp3" type="audio/mpeg">
        您的浏览器不支持 HTML5 音频标签。
    </audio>
    <br><br>
    <button onclick="changeAudioSource('audio1.mp3')">播放音频1</button>
    <button onclick="changeAudioSource('audio2.mp3')">播放音频2</button>
</body>
</html>

请注意，上述代码中的 URL (https://www.example.com/path/to/audio.mp3) 是示意性的，请替换为实际存在的音频文件路径。此外，确保在实际应用中处理好跨域资源共享（CORS）问题，尤其是在音频文件位于不同域名时。

相关推荐
元争栈道27 分钟前
webview+H5来实现的android短视频(短剧)音视频播放依赖控件资源
android·音视频
桃园码工1 小时前
8_HTML5 SVG (4) --[HTML5 API 学习之旅]
html5·svg·滤镜·文本·stroke
羊小猪~~2 小时前
前端入门之VUE--ajax、vuex、router，最后的前端总结
前端·javascript·css·vue.js·vscode·ajax·html5
MediaTea4 小时前
Pr：音频仪表
音视频
Web打印7 小时前
web打印插件 HttpPrinter 使用半年评测
javascript·json·firefox·jquery·html5
安冬的码畜日常9 小时前
【CSS in Depth 2 精译_088】第五部分：添加动效概述 + 第 15 章：CSS 过渡特效概述 + 15.1：状态间的由此及彼
前端·css·css3·html5·css过渡
cuijiecheng201810 小时前
音视频入门基础：MPEG2-TS专题（21）——FFmpeg源码中，获取TS流的视频信息的实现
ffmpeg·音视频
γ..11 小时前
基于MATLAB的图像增强
开发语言·深度学习·神经网络·学习·机器学习·matlab·音视频
cuijiecheng201811 小时前
音视频入门基础：AAC专题（13）——FFmpeg源码中，获取ADTS格式的AAC裸流音频信息的实现
ffmpeg·音视频·aac
热门推荐
01〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇02YOLOv8训练好模型后，追加轮数继续训练、或者提前终止训练，缩减训练轮数03玄机平台应急响应—webshell查杀04机器人编程怎么入门？05HCIA-datacom数通题库和录播视频资料06Docker 夺命连环 15 问07SQL 主从数据库实时备份08校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10VSCode插件 —— Cody AI （免费AI助手！）