HTML 音频(Audio)学习笔记

一、HTML 音频概述

在 HTML 中,音频可以通过多种方式播放,但要确保音频在不同浏览器和设备上都能正常播放,需要掌握一些技巧。HTML5 引入了 <audio> 元素,为音频播放提供了一种标准方法,但在 HTML4 中,音频播放通常依赖于插件,如 <object><embed> 标签。

二、音频播放方法及问题

(一)使用插件

  1. <object> 标签

    • <object> 标签定义外部内容的容器,可以用来嵌入音频文件。

    • 示例代码:

      HTML复制

      复制代码
      <object height="50" width="100" data="horse.mp3"></object>

      预览

    • 问题

      • 不同浏览器对音频格式的支持不同。

      • 如果浏览器不支持该文件格式,且没有插件,音频无法播放。

      • 用户计算机未安装插件时,音频无法播放。

  2. <embed> 标签

    • <embed> 标签定义外部内容的容器,HTML5 中允许使用,但在 HTML4 中是非法的。

    • 示例代码:

      HTML复制

      复制代码
      <embed height="50" width="100" src="horse.mp3">

      预览

    • 问题

      • <embed> 标签在 HTML4 中无效,页面无法通过 HTML4 验证。

      • 不同浏览器对音频格式的支持不同。

      • 如果浏览器不支持该文件格式,且没有插件,音频无法播放。

      • 用户计算机未安装插件时,音频无法播放。

(二)使用 HTML5 <audio> 元素

  1. <audio> 元素

    • <audio> 元素是 HTML5 新增的标签,用于播放音频文件。

    • 示例代码:

      HTML复制

      复制代码
      <audio controls>
        <source src="horse.mp3" type="audio/mpeg">
        <source src="horse.ogg" type="audio/ogg">
        Your browser does not support this audio format.
      </audio>

      预览

    • 优点

      • 在所有现代浏览器中有效。
    • 问题

      • <audio> 标签在 HTML4 中无效,页面无法通过 HTML4 验证。

      • 需要将音频文件转换为不同格式以兼容不同浏览器。

      • 在老式浏览器中不起作用。

(三)最佳 HTML 解决方法

  1. 结合使用 <audio><embed>

    • 示例代码:

      HTML复制

      复制代码
      <audio controls height="100" width="100">
        <source src="horse.mp3" type="audio/mpeg">
        <source src="horse.ogg" type="audio/ogg">
        <embed height="50" width="100" src="horse.mp3">
      </audio>

      预览

    • 优点

      • 尝试使用 <audio> 元素播放音频,如果失败则回退到 <embed>
    • 问题

      • 需要将音频转换为不同格式。

      • <embed> 元素无法回退显示错误消息。

(四)使用超链接

  1. 超链接播放音频

    • 示例代码:

      HTML复制

      复制代码
      <a href="horse.mp3">Play the sound</a>

      预览

    • 优点

      • 简单,用户点击链接即可播放音频。
    • 问题

      • 音频播放依赖于浏览器的"辅助应用程序",用户体验可能不佳。

三、音频格式与浏览器支持

  • MP3:支持 Internet Explorer、Chrome 和 Safari。

  • OGG:支持 Firefox 和 Opera。

  • WebM:支持 Chrome 和 Opera。

四、内联声音说明

  • 内联声音:当音频作为网页的一部分时,称为内联声音。

  • 注意事项

    • 内联声音可能会让用户感到烦恼,建议仅在用户期望听到声音时使用。

    • 用户可能已关闭浏览器中的内联声音选项。

五、HTML 多媒体标签

标签 描述
<embed> 定义内嵌对象。HTML4 中不赞成,HTML5 中允许。
<object> 定义内嵌对象。
<param> 定义对象的参数。
<audio> 定义声音内容。
<video> 定义视频或影片。
<source> 定义 <video><audio> 的多媒体资源。
<track> 定义 <video><audio> 的字幕文件或其他文本文件。
相关推荐
云上艺旅15 小时前
K8S学习之基础七十四:部署在线书店bookinfo
学习·云原生·容器·kubernetes
你觉得20515 小时前
哈尔滨工业大学DeepSeek公开课:探索大模型原理、技术与应用从GPT到DeepSeek|附视频与讲义下载方法
大数据·人工智能·python·gpt·学习·机器学习·aigc
A旧城以西16 小时前
数据结构(JAVA)单向,双向链表
java·开发语言·数据结构·学习·链表·intellij-idea·idea
无所谓จุ๊บ16 小时前
VTK知识学习(50)- 交互与Widget(一)
学习·vtk
FAREWELL0007517 小时前
C#核心学习(七)面向对象--封装(6)C#中的拓展方法与运算符重载: 让代码更“聪明”的魔法
学习·c#·面向对象·运算符重载·oop·拓展方法
吴梓穆17 小时前
UE5学习笔记 FPS游戏制作38 继承标准UI
笔记·学习·ue5
Three~stone17 小时前
MySQL学习集--DDL
数据库·sql·学习
瞌睡不来18 小时前
(学习总结32)Linux 基础 IO
linux·学习·io
Moonnnn.18 小时前
运算放大器(四)滤波电路(滤波器)
笔记·学习·硬件工程