HTML5+CSS3_02_常用标签_09_音频标签

最新推荐文章于 2023-12-18 09:00:00 发布
最新推荐文章于 2023-12-18 09:00:00 发布
阅读量153 收藏
点赞数
分类专栏： HTML5+CSS3 文章标签： html5 css3 音视频 常用标签 音频标签
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42548459/article/details/132202986
版权
本文介绍了HTML5中的<audio>标签用于在网页嵌入音频，支持MP3、Wav和Ogg格式。详细列出了各主流浏览器对这些格式的兼容情况，并阐述了<audio>和<source>标签的用法及MIME类型。
摘要由CSDN通过智能技术生成

2.9.1 音频标签介绍

HTML5提出了播放音频文件的标准：在网页上嵌入音频元素使用<audio>标签。目前“<audio>”标签支持三种音频格式文件“MP3”、“Wav”和“Ogg”。

目前浏览器对于音频文件的支持情况：

序号浏览器MP3WavOgg
1Internet Explorer 9+√
2Chrome 6+√√√
3Firefox 3.6+√√√
4Safari 5+√√
5Opera 10+√√√

2.9.2 音频格式MIME类型

序号格式MIME类型
1MP3audio/mpeg
2Oggaudio/ogg
3Wavaudio/wav

2.9.3 播放音频所需使用标签

序号标签说明
1<audio>定义一个音频
2<source>定义多种媒体资源，包括音频和视频

2.9.4 音频标签语法格式

音频标签语法格式
音频标签

抚水青遥
关注
专栏目录
软件测试基础-Web前端/CSS介绍/音频标签/视频标签/字体样式（四）
不问江湖
04-01 737
CSS文件存放位置 CSS 代码习惯的三种写法：内嵌CSS、外链CSS、行内CSS。 内嵌CSS：指将CSS代码写在HRML网页中； 外链CSS：指将CSS代码写在外部的独立CSS文件中； HTML代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 如果想要采用外链CSS写法，就需要在当前的HTML中引
HTML5+CSS3
Sweat_candy的博客
04-04 697
HTML5新特性 概述 HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。 这些新特性都有兼容性问题，基本是 IE9+ 以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。 语义化标签 （★★） 以前布局，我们基本用 div 来做。div 对于搜索引擎来说，是没有语义的 <div class=“header”> </div> <div class=“nav”> </div> <
CSS 音频标签
今年依旧12岁
05-12 1196
1、Css播放背景音乐的多种方式 Css音频 2、audio 元素 autoplay 失效 Chrome浏览器由于限流，禁止了audio元素的自动播放，并且，无法调用audio.play()方法，必须在界面内有操作，才能使用js调用play()方法。 ...
html5 Audio标签
不二的博客
08-25 9697
javascript动态创建audio标签 在页面中添加audio元素的方法主要是两种，一种是在html中加入audio代码，可以加入一些属性（autoplay,preload）等，这些在之前的文章已经说过了。另外一种是js动态加载进来的。代码如下： var audio=document.creatElement(“audio”); audio.src=”audio/source.ogg”;...
Audio-支持多个音频文件格式
weixin_33862041的博客
12-07 389
通过使用 audio 元素或对象支持多个音频格式，你可以将更多的听众从多个浏览器吸引到你的网页上。 使用源元素指定多个音频格式 在将 HTML5 audio 元素添加到代码时，可以指定一条在浏览器不支持 audio 标记时显示的错误消息 如果你使用的浏览器根本不支持音频，这将很有效。但是，如果支持 audio 元素，但不支持文件格式，则不会显示你指定的错误消息。由于在支持 HTML5 的所有...
CSS学习30：多媒体标签（视频&音频）
玉安_ZhangDe的博客
04-10 3404
视频标签- video 使用语法： <!-- 第一种写法 目前用的越来越多 --> <video src="./media/mi.mp4" autoplay="autoplay" muted controls width="100%" loop poster="./images/pink.jpg"></video> 注意，该标签不兼容ie9以下的浏览器 ，且在谷歌浏览器里自动播放视频，视频得默认静音(muted) 常用属性： 兼容写法 &l.
Static-web-pages.zip_DW页面_html+css+js网站_web dw_静态web 例子
09-24
HTML5引入了许多新特性，如音频、视频、canvas画布和离线存储，使得静态网页也能具有丰富的媒体和交互性。 2. CSS：CSS负责网页的视觉表现，包括颜色、字体、布局、响应式设计等。通过选择器匹配HTML元素，CSS可以...
HTML5+CSS3基础
nabirt的博客
10-19 1279
记录一下html+css的基础知识
HTML5 + CSS3 高频面试题合集
蜗牛的博客
11-22 1520
html5 css3 高频面试题合集❗ ❗ ❗
HTML5+CSS3网页设计概述
weixin_62343228的博客
09-29 690
网页概述 什么是网页 网页可以看做承载各种网站应用和信息的容器，所有可视化的内容都会通过网页展示给用户。网页主要由文字、图像和超链接（超链接为单击可以跳转的网页元素）等元素构成。当然除了这些元素，网页中还可以包含音频、视频以及动画等。 静态网页 用户无论何时何地访问，网页都会显示固定的信息，除非网页源代码被重新修改上传。 静态网页更新不方便，但是访问速度快。 动态网页 显示的内容则会随着用户操作和时间的不同而变化。 动态网页可以和服务器数据库进行实时的数据交换。 网页名词解释 名词
HTML5 多媒体音频视频标签
weixin_43312083的博客
09-01 494
多媒体标签 embed：标签定义嵌入的内容 audio：播放音频 video：播放视频 多媒体 embed（会使用） embed可以用来插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU、MP3等等。url为音频或视频文件及其路径，可以是相对路径或绝对路径。 因为兼容性问题，我们这里只讲解 插入网络视频， 后面H5会讲解 audio 和video 视频多...
html、css 背景样式、css三大特性、视频音频标签、iframe标签和视频不兼容的解决办法
Lululovesickness的博客
12-09 261
背景样式 属性 含义 值 background-color 背景颜色 十六进制 / rbg函数 / rgba函数 / 英语单词 background-image 背景图片 url（图片的路径） background-repeat 背景平铺 repeat / no-repeat / repeat-x / repeat-y background-position 背景位置 x、y坐标 / 方位词 / 百分数值 background-attachment 背景固定或滚动 scrol
audio标签详解（属性+js操作+生命周期+播放事件）
qq_54896194的博客
07-25 7673
用来展示音频文件。目前支持的三种音频格式文件：mp3,wav和ogg;
css中，怎么自定义audio标签
m0_68094390的博客
05-15 1541
下面以制作一个有进度条、暂停和播放等按钮的音乐播放器为例，演示如何使用CSS和JavaScript来自定义。这里采用了自己绘制的得到播放和暂停按钮图片，可以使用自己的图片，或者使用在线的图标库来获取对应的图片。最后，我们需要实现播放器的交互效果，包括播放/暂停音乐、调节进度条等。属性来计算音乐当前播放位置，从而可以定位到该位置进行播放或暂停。需要注意的是，上述代码仅是一个简单示例，实际应用中需要根据具体需要。属性的source标签，可以根据实际情况选择使用。方法监听播放和暂停按钮的点击事件，并使用。
CSS学习总结（九）：语义化标签、视频标签、音频标签、新增的表单元素、属性选择器、结构伪类选择器、伪元素选择器、盒子模型、图标变模糊、计算盒子宽度、CSS3 过渡
最新发布
weixin_62764364的博客
12-18 1155
CSS3 中可以通过 box-sizing 来指定盒模型，有2个值：即可指定为 content-box、border-box，这样我们计算盒子大小的方式就发生了改变。匹配父元素的第n个子元素E，也就是说，nth-child 对父元素里面所有孩子排序选择（序号是固定的） 先找到第n个孩子，然后看看是否和E匹配。before 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素伪元素选择器和标签选择器一样，权重为 1。nth-of-type 对父元素里面指定子元素进行排序选择。
【HTML5】HTML5 多媒体标签 ① ( audio 音频标签 | 音频标签常见属性值设置 | 音频标签默认代码设置 | 音频标签设置多种类型音频文件 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
04-19 1万+
一、HTML5 多媒体标签 二、音频标签 三、音频标签代码示例 ( 默认操作 ) 四、音频标签代码示例 ( 插入 mp3 / ogg 两种格式的音频 )
HTML5 Audio的兼容性问题和优化
weixin_30273931的博客
12-21 1304
本人在双十一期间，做的一个移动端互动项目中，遇到一个在 App 、微信、H5页面环境切换选择音频播放的功能，在测试的时候出了不少兼容性问题，这里有很多值得探索的知识，今天我们就来看一下这个 HTML5-Audio。 Audio 标签用于定义声音，比如音乐或其他音频流，HTML5 的 Audio 标签在很大程度上取代了 Flash 来播放音乐。 一、默认样式 Audio 标签在浏览器中...
HTML5中 audio标签的样式修改
热门推荐
l333f的博客
03-08 8万+
由于html5的流行，现在移动端大多数的需求都可以使用audio来播放音频，但您可能只是需要很简单的播放/停止效果，但不同的浏览器上的audio样式却不尽人意，那么要怎么改变这个样式呢，其实它的原理比较简单，就是把写audio的时候不要用controls属性，隐藏原生的audio， 然后用div之类标签，定义css样式美化起来用来显示播放器的效果，最后用js捕获audio事件，基本就是src路径、p
HTML5用audio标签做一个最简单的音频播放器
邱慕夏 没有比脚更长的路，没有比人更高的山
10-27 1万+
在做系统的时候，要求做一个音频播放器，就在网上查找了一些资料，发现这样的资料还是很千篇一律的，EasyUI框架并没有给我们一个音频播放器的功能，在bootstrap上有，但是也是结合html5来写的，因此，我们在这里就用纯的html5血一个音频播放器，如何播放本地的音频。 首先，大家在myeclipse上建立一个自己的web项目： 其实，这里的代码都不难，主
HTML5与CSS3新特性详解：结构元素与多媒体标签
"HTML5和CSS3权威指南学习资料提供了HTML5的新标签和CSS3的常见样式，旨在帮助前端开发者更好地理解和应用这两种技术。" HTML5是下一代网页标记语言，其核心目标是增强网页的语义性和可访问性，同时引入了新的功能...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值