在本实验中，你将学习如何使用 HTML5 的 <audio> 标签在网页中嵌入并直接播放音频文件。本实验涵盖了 Web 开发人员所需的关键技能，包括理解 <audio> 标签的基本结构、配置音频控件、添加多种音频源格式、探索高级属性以及创建一个简单的音频播放器网页。通过动手练习，你将获得使用原生 HTML5 功能实现音频播放功能的实践经验，而无需依赖外部插件。
通过遵循逐步的指导，你将了解如何无缝地将音频内容集成到网页中，自定义音频播放器控件，并确保跨浏览器兼容性。本实验全面介绍了如何使用音频元素，使你能够通过丰富的多媒体体验增强 Web 应用程序。
在这一步中，你将学习 HTML5 Audio 标签的基础知识。这是一个强大的功能，允许你直接在网页中嵌入和播放音频文件，而无需使用外部插件。
HTML5 的 <audio> 标签是一个简单但功能丰富的元素，使 Web 开发人员能够无缝地集成音频内容。让我们探索它的基本结构和基本用法。
首先，在 ~/project 目录中创建一个新的 HTML 文件来演示音频标签：
cd ~/project
touch audio-basics.html在 WebIDE 中打开 audio-basics.html 文件，并添加以下基本的 HTML 结构：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>HTML5 Audio Tag Basics</title>
</head>
<body>
<h1>HTML5 Audio 标签示例</h1>
<audio src="sample-audio.mp3"></audio>
</body>
</html>基本的 <audio> 标签语法非常简单：
src 属性指定音频文件的路径基本音频标签的示例输出：
关于 HTML5 Audio 标签的关键点：
当你在 WebIDE 中预览 audio-basics.html 文件时，你会看到一个空白页面，因为音频播放器控件不可见。
注意：了解更多关于如何在 WebIDE 中预览 HTML 文件的信息。
在这一步中，你将学习如何通过添加控件和配置音频源来增强 HTML5 音频标签，从而提供更好的用户体验。
在 WebIDE 中打开 audio-basics.html 文件，并修改音频标签以包含控件：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>HTML5 Audio 标签带控件</title>
</head>
<body>
<h1>带控件的音频播放器</h1>
<audio src="sample-audio.mp3" controls>你的浏览器不支持音频元素。</audio>
</body>
</html>此示例中的关键修改：
controls 属性以显示播放控件controls 属性提供了一个默认的音频播放器界面，包括：
让我们探索更多的音频源配置选项：
<audio controls>
<source src="sample-audio.mp3" type="audio/mpeg" />
<source src="sample-audio.ogg" type="audio/ogg" />
你的浏览器不支持音频元素。
</audio>不同音频源配置的示例：
<source> 标签允许浏览器选择兼容的格式type 属性指定音频文件的 MIME 类型音频播放器的示例输出：
点击播放按钮开始音频播放，确保你的浏览器标签页已取消静音。
在这一步中，你将学习如何提供多种音频文件格式，以确保跨浏览器兼容性并提高音频播放的可靠性。
首先，让我们将 sample-audio.mp3 复制为不同格式（music.ogg、music.wav）到 ~/project 目录中：
cd ~/project
cp sample-audio.mp3 music.mp3
ffmpeg -i sample-audio.mp3 music.ogg
ffmpeg -i sample-audio.mp3 music.wav等待转换过程完成后再继续。
现在，更新 audio-basics.html 文件以包含多个音频源：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>多种音频源格式</title>
</head>
<body>
<h1>跨浏览器音频播放</h1>
<audio controls>
<source src="music.mp3" type="audio/mpeg" />
<source src="music.ogg" type="audio/ogg" />
<source src="music.wav" type="audio/wav" />
你的浏览器不支持音频元素。
</audio>
</body>
</html>关于多个音频源的关键点：
浏览器兼容性示例：
在这一步中，你将了解 HTML5 音频标签的高级属性，这些属性可以更好地控制音频播放和用户体验。
更新 audio-basics.html 文件以演示高级属性：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>高级 Audio 标签属性</title>
</head>
<body>
<h1>高级音频播放选项</h1>
<audio src="music.mp3" controls autoplay loop preload="metadata" muted>
你的浏览器不支持音频元素。
</audio>
</body>
</html>关键高级属性解释：
autoplay：页面加载时自动开始播放音频
loop：连续重复播放音频
preload：指定浏览器应如何加载音频
none：不预加载metadata：仅加载元数据（如时长等）auto：预加载整个音频文件muted：以静音状态开始播放音频
高级音频控件的示例输出：
在这一步中，你将创建一个完整的音频播放器网页，展示你所学到的关于 HTML5 音频标签的所有内容。
首先，在 ~/project 目录中创建一个名为 music-player.html 的新文件：
cd ~/project
touch music-player.html现在，在 WebIDE 中打开 music-player.html 并添加以下代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>简单音乐播放器</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f4f4f4;
}
.player-container {
max-width: 400px;
margin: 50px auto;
padding: 20px;
background-color: white;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<div class="player-container">
<h1>我的音乐播放器</h1>
<audio id="musicPlayer" controls>
<source src="music.mp3" type="audio/mpeg" />
<source src="music.ogg" type="audio/ogg" />
你的浏览器不支持音频元素。
</audio>
<div>
<button onclick="document.getElementById('musicPlayer').play()">
播放
</button>
<button onclick="document.getElementById('musicPlayer').pause()">
暂停
</button>
<button onclick="document.getElementById('musicPlayer').volume += 0.1">
音量增加
</button>
<button onclick="document.getElementById('musicPlayer').volume -= 0.1">
音量减少
</button>
</div>
</div>
<script>
const player = document.getElementById("musicPlayer");
player.addEventListener("ended", () => {
console.log("歌曲播放结束");
});
</script>
</body>
</html>如果你对 CSS 和 JavaScript 还不熟悉，不用担心。上面的代码简单易懂。它包括了对播放器容器的基本 CSS 样式设置和响应式设计。JavaScript 代码为音频播放器添加了一个事件监听器，当歌曲播放结束时，会记录一条消息。
音乐播放器的关键功能：
浏览器中的示例输出：
在本实验中，参与者学习了如何使用 HTML5 的 <audio> 标签直接在网页中嵌入和播放音频文件的基础知识。实验引导学习者理解了 <audio> 标签的基本结构、配置音频控件，并探索了增强音频播放功能的各种属性。
关键学习成果包括使用音频源属性、添加播放控件、支持多种音频格式以及创建一个简单的音频播放器网页。参与者通过实践掌握了在不依赖外部插件的情况下实现原生音频嵌入技术，展示了 HTML5 音频功能在现代 Web 浏览器中的多功能性和易用性。
