HTML Academy · 课时

audio 元素：src、controls、loop 和 autoplay

Q: 「audio 元素：src、controls、loop 和 autoplay」这节课中我会学到什么？

使用原生 HTML5 属性嵌入音频播放器 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用原生 HTML5 属性嵌入音频播放器

audio 元素：src、controls、loop 和 autoplay 是 CoddyKit 上的免费 HTML Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。

HTML5 中的原生音频

HTML5 引入了 <audio> 元素，无需插件即可嵌入音频：

<audio src="podcast.mp3" controls>
  Your browser does not support audio.
</audio>
<!-- controls: show the default player UI (play, pause, volume) -->
<!-- Fallback text is shown to browsers that don't support audio -->

控件属性

controls 属性会显示浏览器内置的音频播放器：

<!-- Without controls: audio plays but no UI is visible -->
<audio src="bg-music.mp3"></audio>

<!-- With controls: browser shows play/pause, volume, scrubber -->
<audio src="podcast.mp3" controls></audio>

<!-- Always include controls for user-accessible audio
     Unless it is a background ambient sound (use controls anyway for accessibility) -->

循环属性

loop 属性会在音频结束时重新播放：

<audio src="bg-music.ogg" controls loop></audio>
<!-- loop is a boolean attribute -->
<!-- Good for: background music, demo soundscapes -->
<!-- Bad UX: loops without user consent are annoying -->

自动播放属性

autoplay 属性会在页面加载时开始播放：

<audio src="alert.mp3" autoplay></audio>
<!-- Most modern browsers BLOCK autoplay for audio by default -->
<!-- Exception: autoplay + muted is allowed -->
<!-- Browsers allow autoplay if the user has interacted with the page -->

<!-- The muted workaround: -->
<audio src="bg.mp3" autoplay muted loop></audio>

静音属性

muted 属性会使音频以静音状态开始：

<!-- Muted audio can autoplay in most browsers: -->
<audio src="ambient.mp3" autoplay muted loop></audio>

<!-- User can unmute with the controls -->
<audio src="ambient.mp3" autoplay muted loop controls></audio>

预加载属性

preload 属性提示要加载多少数据：

<audio src="podcast.mp3" controls preload="none">...</audio>
<!-- none: don't preload anything (saves bandwidth on mobile) -->

<audio src="short-clip.mp3" controls preload="auto">...</audio>
<!-- auto: preload the entire file (browser decides) -->

<audio src="song.mp3" controls preload="metadata">...</audio>
<!-- metadata: preload only duration and basic info (good default) -->

使用 JavaScript 控制音频

使用 JavaScript 控制音频：

const audio = document.getElementById('my-audio');

// Play:
audio.play();

// Pause:
audio.pause();

// Current time (seconds):
audio.currentTime = 30;  // jump to 30 seconds

// Volume (0 to 1):
audio.volume = 0.5;

// Duration:
console.log(audio.duration);

音频事件

常见的音频事件：

audio.addEventListener('play', () => console.log('Playing'));
audio.addEventListener('pause', () => console.log('Paused'));
audio.addEventListener('ended', () => console.log('Finished'));
audio.addEventListener('timeupdate', () => {
  console.log('Position:', audio.currentTime);
});
audio.addEventListener('error', () => console.log('Error loading audio'));

自定义音频播放器

使用 JavaScript 和 CSS 构建自定义播放器：

<div class="audio-player">
  <audio id="player" src="podcast.mp3" preload="metadata"></audio>
  <button id="play-btn" aria-label="Play">▶</button>
  <input type="range" id="scrubber" value="0" min="0" max="100">
  <span id="time">0:00</span>
</div>
<script>
const audio = document.getElementById('player');
document.getElementById('play-btn').addEventListener('click', () => {
  audio.paused ? audio.play() : audio.pause();
});
</script>

音频的无障碍性

音频的无障碍性要求：

为所有音频内容提供文字记录
对于播客：提供文字记录链接
如果自动播放的音频持续时间超过 3 秒，就会违反 WCAG 1.4.2
确保控件可通过键盘操作（原生控件可以）

src 与源元素对比

使用 <source> 指定格式备选项（下一课）：

<!-- Single format: -->
<audio controls src="podcast.mp3">...</audio>

<!-- Multiple formats: -->
<audio controls>
  <source src="podcast.opus" type="audio/ogg; codecs=opus">
  <source src="podcast.mp3" type="audio/mpeg">
  Your browser does not support audio.
</audio>

快速检查

哪个音频属性会显示浏览器内置的播放器界面？

回顾：audio 元素

音频元素要点：

controls — 显示播放器界面（几乎总应包含）
loop — 播放结束后重新开始
autoplay — 加载时播放（大多数浏览器会阻止）
muted — 以静音状态开始（可在大多数浏览器中启用自动播放）
preload="metadata" — 适合播客/音乐的默认设置
为无障碍性提供文字记录

常见问题解答

「audio 元素：src、controls、loop 和 autoplay」课时是免费的吗？

是的 — 「audio 元素：src、controls、loop 和 autoplay」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。

「audio 元素：src、controls、loop 和 autoplay」这节课中我会学到什么？

使用原生 HTML5 属性嵌入音频播放器你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 HTML Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「audio 元素：src、controls、loop 和 autoplay」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 HTML Academy 课中编写并运行代码吗？

能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 HTML Academy