正在加载...

HTML 音频

视频课教你托管带动画的片段。音频是只有声音的近亲：播客、语音备忘、课程开场和短音效。元素是 audio。从 controls 开始，让访客自己播放——与视频同样的礼貌——没有 poster、画面框或预留的视频区域。细控制条从 media/ 取文件，布局比完整视频更安静。

audio 做什么

audio 让浏览器获取声音文件并显示紧凑播放器。可用 src 设一个文件，或列出多个 <source> 子元素，让浏览器选能理解的格式。没有像 video 那样的可视画布；有 controls 时通常是细控制条。时间轴、静音和音量仍然重要，因为声音打断安静房间的力度不亚于大声视频。把播放器当作访客操作的工具，而不是自己启动的背景。

直接答案

写 <audio controls src="sound.mp3">，或嵌套多个 <source> 以支持 MP3、Ogg 等格式。在元素内放简短回退文字（可选下载链接）。优先用适合网页的压缩文件。避免带声音的突然自动播放。若片段用语音授课，在播放器旁规划文字稿或清晰笔记。

初学者会遇到的格式

浏览器并不都偏好同一种编解码。初学者常从 MP3 起步，再加 Ogg 作为第二候选。WAV 适合本机剪辑，但作为唯一网页副本往往太大。下表是实用入门图——不是编解码百科。

📊 常见音频类型

Type hint Typical file Beginner note
audio/mpeg .mp3 广泛实用的入门格式
audio/ogg .ogg 有用的第二源以扩大支持
audio/wav .wav 往往很大；能压缩时请为网页压缩

带 controls 的简单音频

一个短 MP3 加上 controls 对许多练习页足够。把文件放在可预期的 media/ 下，像检查图片 URL 一样核对路径。若出现控制条却播不了，打开开发者工具或直接试文件 URL——坏路径会静默失败。

Simple audio

html
HTML Code 
<audio controls src="media/hello.mp3">
Your browser does not support audio.
</audio>

阅读简单示例

  • controls 显示播放、暂停、拖动，常还有音量
  • src 指向相对页面的声音文件（这里在 media/ 下）
  • 内部文字是元素无法播放时的回退
  • 这里没有 poster——那属于 video
  • 基本音频条通常不需要像视频那样的 width

多源与下载链接

用带 MIME type 的 Ogg 与 MP3 提高找到可播放候选的机会。顺序重要：浏览器按列表找能解码的格式。下载链接在播放失败或访客想保存时有用。导出两种格式时，每个文件保持同一课内容。

Multiple audio sources

html
HTML Code 
<audio controls>
<source src="media/hello.ogg" type="audio/ogg">
<source src="media/hello.mp3" type="audio/mpeg">
Download <a href="media/hello.mp3">hello.mp3</a>
</audio>

阅读多源示例

  • 按顺序尝试源，直到浏览器找到可播放的
  • type 帮助快速跳过不支持的格式
  • 下载链接是 audio 内对人友好的回退
  • 保持文件名与文件夹准确——src 拼写错误看起来像“坏播放器”
  • 微型演示仍可用单个 src；多源是稳健性升级

尊重耳朵与带宽

没有明确用户动作的自动播音常被拦截，成功时也往往不礼貌。缺少 controls 会让访客无法礼貌暂停。漫长的未压缩 WAV 在紧凑 MP3 能教同样内容时会浪费移动流量。像导出网页尺寸视频一样导出网页尺寸音频。日后的背景音乐是带同意与静音路径的另一设计决定——不是初学者课文页的默认。

语音授课时的文字稿

若片段用话语解释概念，在页面上规划文字稿或清晰笔记。audio 不像 img 那样用 alt。语音无障碍靠文字替代、播放器旁清晰标题和用户控制——不是海报图。即使一小段复述口头提示的文字，也能帮助此刻无法收听的人。

音频 vs 视频 vs 嵌入

  • 自托管声音文件 → audio
  • 自托管带画面片段 → video
  • 其他站点的播放器页 → 常为 iframe（后续课讲 YouTube 类嵌入）
    不要因为先在 video 里见过 controls 就把播客放进 video。当 audio 足够时，不要把本地 MP3 包进 iframe。让元素匹配媒体种类。

在编辑器中练习

  1. 在 media/ 下加一段短 .mp3（十到三十秒够用）。
  2. 用正确相对路径以 audio controls 嵌入。
  3. 用浏览器 UI 播放、暂停、拖动并调音量。
  4. 可选：加第二种 source 与下载链接。
  5. 若片段有语音，在播放器旁写一句文字稿或笔记。
  6. 确认无人按播放时页面仍有意义。

容易犯的错

  • 没有明确用户动作就自动播音
  • 缺少 controls
  • 在 MP3 够用时链接巨大未压缩 WAV
  • 期望 audio 有 poster
  • 忘记回退文字或下载路径
  • 把 YouTube 类 iframe 嵌入与自托管 audio 混淆
  • 测试时每个 source 里说不同内容
  • media/ 路径坏了却怪浏览器

小结

  • audio 嵌入你托管的声音文件
  • 用 controls 让访客播放、暂停与拖动
  • 多个带 type 的 source 格式改善支持
  • 优先压缩文件与用户启动的播放
  • 当语音承载课时规划文字稿或笔记
  • 声音用 audio，画面+声音用 video，外部播放器用 iframe

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓
6
问题
🎯
70%
及格要求
♾️
∞
时间
🔄
∞
尝试次数

📝 说明

  • 仔细阅读每个问题
  • 为每个问题选择最佳答案
  • 您可以随时重新参加测验
  • 您的进度将显示在顶部
主题 1 的 1
Html 教程