HTML5 音频 Audio

news2025/2/26 9:43:55

文章目录

  • HTML5 音频 Audio
    • 互联网上的音频
    • 浏览器支持
    • HTML5 Audio - 如何工作
    • 音频格式及浏览器支持
    • 音频格式的MIME类型
    • HTML5 Audio 标签


HTML5 音频 Audio

在这里插入图片描述

HTML5 提供了播放音频文件的标准。

互联网上的音频

直到现在,仍然不存在一项旨在网页上播放音频的标准。

今天,大多数音频是通过插件(比如 Flash)来播放的。然而,并非所有浏览器都拥有同样的插件。

HTML5 规定了在网页上嵌入音频元素的标准,即使用 <audio> 元素。

浏览器支持

Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 都支持 <audio> 元素。

注意: Internet Explorer 8 及更早IE版本不支持 <audio> 元素。

HTML5 Audio - 如何工作

如需在 HTML5 中播放音频,你需要使用以下代码:

实例

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">您的浏览器不支持 audio 元素。
</audio>

control 属性供添加播放、暂停和音量控件。

在<audio> 与 </audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本 。

<audio> 元素允许使用多个 <source> 元素. <source> 元素可以链接不同的音频文件,浏览器将使用第一个支持的音频文件。

音频格式及浏览器支持

目前, <audio>元素支持三种音频格式文件: MP3, Wav, 和 Ogg:

浏览器MP3WavOgg
Internet Explorer 9+YESNONO
Chrome 6+YESYESYES
Firefox 3.6+YESYESYES
Safari 5+YESYESNO
Opera 10+YESYESYES

音频格式的MIME类型

FormatMIME-type
MP3audio/mpeg
Oggaudio/ogg
Wavaudio/wav

HTML5 Audio 标签

标签描述
<audio>定义了声音内容
<source>规定了多媒体资源, 可以是多个,在 <video> 与 <audio>标签中使用

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/413054.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【2023】某python语言程序设计跟学第七周内容

目录1.文件的使用1.1.文件的类型1.2.文件的打开和关闭1.3.文件内容的读取1.4.文件内容的写入2.实例&#xff1a;自动轨迹绘制3.一维数据格式化和处理3.1.数据组织维度3.2.一维数据的表示3.3.一维数据的存储3.4.一维数据的处理4.二维数据格式化和处理4.1.二位数据的表示4.2.CSV格…

在 Python 中制作一个字母列表

要列出字母表&#xff1a; 使用 string.ascii_lowercase 属性获取字母表中的字母字符串。使用 list() 类将字符串转换为列表。该列表将包含字母表中的所有字母。 import string# ✅ 获取字母表中小写字母的列表 lower string.ascii_lowercase list_of_lowercase_letters li…

【python数据分析】对乐高、奥特曼、高达进行分析,看看哪个卖的最好

前言 嗨喽~大家好呀&#xff0c;这里是魔王呐 ❤ ~! 前期准备 软件&#xff1a; Jupyter Notebook&#xff1a; 是一个开源的web应用程序&#xff0c;可以使用它来创建和共享包含实时代码、方程、可视化和文本的文档。 Jupyter Notebook是IPython项目的一个派生项目&#x…

基于K-最近邻算法构建鸢尾花分类模型

基于K-最近邻算法构建鸢尾花分类模型 一 任务描述 鸢尾花&#xff08;Iris&#xff09;数据集是机器学习中一个经典的数据集。假设有一名植物学爱好者收集了150朵鸢尾花的测量数据&#xff1a;花瓣的长度和宽度以及花萼的长度和宽度&#xff0c;这些花已经鉴定为属于Setosa、…

多线程 之 CAS与synchronized的优化过程

前言 本篇介绍什么是CAS与synchronized的优化过程&#xff0c;如有错误&#xff0c;请在评论区指正&#xff0c;让我们一起交流&#xff0c;共同进步&#xff01; 文章目录前言1. 什么是CAS&#xff1f;2. CAS实现的操作2.1 实现原子类2.2 实现自旋锁3. CAS的aba问题4. synchr…

QT桌面的构建

文章目录 前言一、按键类的创建二、按键样式设计三、详细代码讲解总结前言 本篇文章开始我将带大家构建一个属于自己的QT桌面,这个桌面将适用于ARM和Linux等。 一、按键类的创建 首先我们需要创建一个按键类,这个按键类需要包含一个按键和一个lable用来显示按键的名字。 效…

2022MathorCup赛题B

以下所有文字均基于作者的实际经验&#xff0c;并不具有完全的合理性&#xff0c;请谨慎参考 目录 一、问题分析 &#xff08;一&#xff09;问题一 &#xff08;二&#xff09;问题二 二、预处理 &#xff08;一&#xff09;训练集预处理 &#xff08;二&#xff09;测…

逻辑回归预测泰坦尼克号乘客生存率

逻辑回归预测泰坦尼克号乘客生存率 描述 RMS泰坦尼克号的沉没是历史上最臭名昭着的沉船之一。1912年4月15日&#xff0c;在她的处女航中&#xff0c;泰坦尼克号在与冰山相撞后沉没&#xff0c;在2224名乘客和机组人员中造成1502人死亡。这场耸人听闻的悲剧震惊了国际社会&…

Segment Anything文章要点

核心方法: 1. 数据 Unfortunately, there is no web-scale data source for segmentation; to address this, we build a “data engine” 没有大规模的数据源用于分割; 为了解决这个问题&#xff0c;我们构建了一个“数据引擎” We iterate between using our efficient mo…

SpringBoot整合MongoDB

参考链接 https://www.mongodb.org.cn/ 文章目录一、前言1.1 NoSQL介绍1.1.1 NoSQL 数据库分类1.1.2 NoSQL的优点/缺点1.1.3 BASE1.2 MongoDB介绍1.2.1 MongoDB和SQL对比1.2.2 数据库1.2.3 元数据1.2.4 MongoDB 数据类型二、SpringBoot整合MongDB2.1 环境配置2.2 MongoTemplate…

chatGPT如何助力devops

随着软件开发行业的不断发展&#xff0c;DevOps已成为软件开发的主流方法。DevOps是一种将开发和运维工作结合起来的实践&#xff0c;旨在提高软件交付速度和质量&#xff0c;以及优化整个软件开发过程。最近&#xff0c;聊天机器人技术的崛起为DevOps带来了全新的变革&#xf…

【MySQL】(1)数据库基础,库与表的增删查改,数据库的备份与还原

文章目录服务器&#xff0c;数据库&#xff0c;表关系MySQL 数据存储逻辑SQL 分类存储引擎库的操作查看数据库创建数据库查看创建语句删除数据库选择&#xff08;切换&#xff09;数据库查看当前选择的数据库修改数据库字符集和排序规则表的操作创建表查询表查询表结构插入数据…

2、Git使用不完全指南:Git客户端的使用及使用Token认证方式提交代码详解(详细图文)

本篇介绍如何在Windows、Linux下安装Git客户端以及从远程代码仓库拉取代码。以及介绍2023如何从GitHub上获取Token令牌、使用Pycharm通过Token令牌从本地push上传仓库的方法&#xff0c;用来解决推送代码报Push failed The requested URL returned error:403的错误问题。 安装…

通讯录的实现(初级版本)

思维导图&#xff1a; 目录 思维导图&#xff1a; ​编辑 一&#xff0c;实现通讯录的第一步——实现逻辑 二&#xff0c;头文件内实现的内容 三&#xff0c;contect.c文件内的函数定义 3.1初始化通讯录:void InitContect(cotect*pc) 3.2:实现通讯录内容的增加&#xff…

投稿指南【NO.14】SCI期刊推荐(mdpi旗下)

写在前面&#xff1a;SCI论文发表是我国高校机构与基地评估、成果评奖、项目立项、人才培养等方面的重要考核指标&#xff0c;更不要要说关系到我们个人的毕业、晋升和前途。SCI含金量之高&#xff0c;要是读研读博科研工作期间能发表&#xff0c;将对直博、找工作、国奖申请、…

04 | 连接池:别让连接池帮了倒忙

04 | 连接池&#xff1a;别让连接池帮了倒忙 连接池一般对外提供获得连接、归还连接的接口给客户端使用&#xff0c;并暴露最小空闲连接数、最大连接数等可配置参数&#xff0c;在内部则实现连接建立、连接心跳保持、连接管理、空闲连接回收、连接可用性检测等功能。 注意鉴…

MySQL 主从同步及延迟原因分析

主从同步的基本原理 MySQL主从同步步骤详见 MySQL binlog模式及主备的基本原理 谈到主备的并行复制能力&#xff0c;我们要关注的是图中黑色的两个箭头。一个箭头代表了客户端写入主库&#xff0c;另一箭头代表的是从库上sql_thread执行中转日志&#xff08;relay log&#xff…

《Squeeze-and-Excitation Networks》

Squeeze-and-Excitation Networks1. 摘要2. 介绍3. 网络设计4. 代码实现1. 摘要 卷积操作可以使网络通过在每层的局部感受野内融合空间和通道级信息以构建信息特征&#xff1b;空间信息尝试通过加强CNN整个特征层次的空间编码质量以加强CNN的表示能力&#xff1b;本文主要聚焦…

【计算机网络-应用层】万维网

文章目录1 统一资源定位符 URL2 万维网文档2.1 超文本标记语言 HTML2.2 层叠样式表 CSS2.3 JavaScript3 超文本传输协议 HTTP3.1 HTTP 报文格式3.1.1 HTTP 请求报文3.1.2 HTTP 响应报文3.2 HTTP 的工作过程3.2.1 HTTP/1.03.2.2 HTTP/1.13.2.3 相关例题4 Cookie1 统一资源定位符…

如何从根本上防止服务器被攻击

随着互联网的发展&#xff0c;服务器成为了企业和个人网络应用的重要基础设施。但是&#xff0c;随之而来的网络安全威胁也在不断增加&#xff0c;服务器安全问题也成为了影响企业信息安全的重要因素。针对这种情况&#xff0c;服务器安全防御变得尤为重要。   服务器安全防御…