HTML 音频(Audio)
创始人
2025-05-30 01:17:18

HTML 音频(Audio)


声音在HTML中可以以不同的方式播放.


问题以及解决方法

在 HTML 中播放音频并不容易!

您需要谙熟大量技巧,以确保您的音频文件在所有浏览器中(Internet Explorer, Chrome, Firefox, Safari, Opera)和所有硬件上(PC, Mac , iPad, iPhone)都能够播放。

在本章,W3Cschool为您总结了问题和解决方法。

您可以参考本站的 HTML 参考手册的


使用插件

浏览器插件是一种扩展浏览器标准功能的小型计算机程序。

插件可以使用 标签 或者 标签添加在页面上. 

这些标签定义资源(通常非 HTML 资源)的容器,根据类型,它们即会由浏览器显示,也会由外部插件显示。


使用 元素

标签定义外部(非 HTML)内容的容器。(这是一个 HTML5 标签,在 HTML4 中是非法的,但是所有浏览器中都有效)。

下面的代码片段能够显示嵌入网页中的 MP3 文件:

实例


尝试一下 »

问题:

  • 标签在 HTML 4 中是无效的。页面无法通过 HTML 4 验证。

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

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

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

  • 如果把该文件转换为其他格式,仍然无法在所有浏览器中播放。


使用 元素

标签也可以定义外部(非 HTML)内容的容器。

下面的代码片段能够显示嵌入网页中的 MP3 文件:

实例


尝试一下 »

问题:

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

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

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

  • 如果把该文件转换为其他格式,仍然无法在所有浏览器中播放。


使用 HTML5

HTML5

The

浏览器兼容

格中的数字表示支持该属性的第一个浏览器版本号。

以下我们将使用

实例


尝试一下 »

问题:

  • 您必须把音频文件转换为不同的格式。


最好的 HTML 解决方法

下面的例子使用了两个不同的音频格式。HTML5

实例


尝试一下 »

问题:

  • 您必须把音频转换为不同的格式。

  • 元素无法回退来显示错误消息。


雅虎媒体播放器 - 一个简单的添加音频到你网站上的方式

使用雅虎播放器是免费的。如需使用它,您需要把这段 JavaScript 插入网页底部:

雅虎播放器可以播放 MP3 以及其他各种格式。你只需添加一行代码到你的页面或 博客中就可以轻松地将您的 HTML 页面制作成专业的播放列表:

实例

Play Sound


尝试一下 »

如果你要使用它,您需要把这段 JavaScript 代码插入网页底部:

然后只需简单地把 MP3 文件链接到您的 HTML 中,JavaScript 会自动地为每首歌创建播放按钮:

Play Song 1
Play Song 2
...
...

雅虎媒体播放器为您的用户提供的是一个小型的播放按钮,而不是完整的播放器。不过,当您点击该按钮,会弹出完整的播放器。

请注意,这个播放器始终停靠在窗框底部。只需点击它,就可将其滑出。


使用超链接

如果网页包含指向媒体文件的超链接,大多数浏览器会使用"辅助应用程序"来播放文件。

以下代码片段显示指向 MP3 文件的链接。如果用户点击该链接,浏览器会启动"辅助应用程序"来播放该文件:

实例

Play the sound


尝试一下 »


内联的声音说明

当您在网页中包含声音,或者作为网页的组成部分时,它被称为内联声音。

如果您打算在 Web 应用程序中使用内联声音,您需要意识到很多人都觉得内联声音令人恼火。同时请注意,用户可能已经关闭了浏览器中的内联声音选项。

我们最好的建议是只在用户希望听到内联声音的地方包含它们。一个正面的例子是,在用户需要听到录音并点击某个链接时,会打开页面然后播放录音。


HTML 多媒体标签

New : HTML5 新标签

标签描述
定义内嵌对象。HTML4 中不赞成,HTML5 中允许。
定义内嵌对象。
定义对象的参数。
定义了声音内容
定义一个视频或者影片
New定义了media元素的多媒体资源(
New规定media元素的字幕文件或其他包含文本的文件 (

 

相关内容

热门资讯

在pycharm中使用chat... 目录 前言 一、插件安装 二、使用步骤 总结 前言 ChatGPT是目前最强大的AI,...
Codeforces Roun... G. Subsequence Addition 标签 规律、数学 链接 传送门、 结论 当前前缀和小...
算法leetcode|42. ... 文章目录42. 接雨水:样例 1:样例 2:提示ÿ...
【项目设计】负载均衡在线OJ 🎇Linux: 博客主页:一起去看日落吗分享博主的在L...
Java开发 | 重写 | 多... 前言 大家好,我是程序猿爱打拳,今天给大家带来的是面向对象之封装继承多...
【Unity】NavMesh ... 在Unity中,可以使用自带导航系统(Navigation System...
由文心一言发布会引发的思考,聊... 文章目录前言一. 文心一言的试用1.1 文心一言发布会1.2 文心一言图片生成功能试用1.3 文心一...
java线程之Thread类的... Thread类的基本用法1. Thread类的构造方法2. Thread的几个常见属性常见属性线程中...
css实现3D弹性按钮以及bo... box-shadow 在实现案例之前先了解css的阴影属性box-shadow,该属性...
【Linux】基础命令大全、实... 个人简介:Java领域新星创作者;阿里云技术博主、星级博主、专家博主&#...
R语言基础教程4:列表和数据框 文章目录列表数据帧表头 R语言系列:1 编程基础💎2 循环语句...
Git基础知识 Git基础知识前言一、Git基本概念1、分布式版本控制系统--Git2、Git配置命令3、Git原理...
【JavaWeb】MySQL 一、数据库的相关概念 1.数据库(DB) ==存储和管...
CPU 是如何执行程序的 代码写了那么多,你知道 a = 1 + 2 这条代码是怎么被 CPU ...
从产品的角度看缓存 文章目录 1. What——什么是缓存?2. Why——为什么需要使用缓存?2.1 什么是用户体验2...
vivado 开发过程中所遇错...  [Synth 8-4556] 开辟的数组内存空间大小问题 [Synth 8-4556] size...
1.4 K8S入门之POD和网... POD 分类 自主式POD控制器管理的POD 容器 每个容器独立存在,有自己的IP地址...
【二】一起算法---队列:ST... 纸上得来终觉浅,绝知此事要躬行。大家好!我是霜淮子,欢迎订...
在使用fastjson中遇到的... 一、在使用fastjson中遇到的问题 导论:最近在写一个JavaFx项目的时候使用...
HJ31 单词倒排 描述 对字符串中的所有单词进行倒排。 说明: 1、构成单词的字符只有26个大写或小写英...
普通插槽、具名插槽、作用域插槽 插槽 插槽就是子组件提供给父组件的占位符,用slot来表示,父组件可以在...
Go语言必知必会100问题-0... 减少代码的嵌套层数 软件开发中的“心智模型”用于描述开发人员在编码时心理活动,每段代码...
CSRF漏洞的概念、利用方式、... CSRF漏洞1.CSRF的概念1.1 什么是CSRF?1.2 基本攻击流程2.CSRF...
基于springboot开发的... 基于springboot开发的学生考勤管理系统 如需更多资料请前往文章底部获取联系方式 系统设计主要...
cocosCreator 之 ... cocosCreator版本: 3.7 简介 cocosCreator的工作流程是通...
vue2中$set的原理_它对... $set的作用背景动态添加属性,不使用$set动态添加属性,使用$set...
3/19考后总结 时间安排 8:30–8:50 读题,T1 感觉是乱搞题,T2 貌似可以二...
【JavaWeb】JDBC 目录 一、JDBC概述 1 JDBC概念 2 JDBC本质 3 JDBC好处 二,J...
python 多任务 一些概念 1.多任务 简单地说,就是同时可以运行多个任务。打个比方,你一...
基于springboot框架实... 基于springboot框架实现自习室预订系统的设计与实现 开发语言:Java 框架...