HTML5 audio 标签-在html中定义声音的标签

2019独角兽企业重金招聘Python工程师标准>>>

本文来源 169it

HTML 5 <audio> 标签定义和用法

<audio> 标签定义声音，比如音乐或其他音频流。

HTML5 <audio> 元素使 Web 开发人员可以将声音嵌入他们的应用程序。控制的灵活性加上平台其他功能的集成，使多个应用场景得以实现，包括从简单的声音效果到背景音频，再到游戏体验以及更复杂的音频引擎。

HTML 4.01 与 HTML 5 之间的差异

<audio> 标签是 HTML 5 的新标签。

HTML 5 <audio> 标签属性

属性值描述

autoplay true | false 如果是 true，则音频在就绪后马上播放。

controls true | false 如果是 true，则向用户显示控件，比如播放按钮。

end numeric value 定义播放器在音频流中的何处停止播放。默认地，声音会播放到结尾。

loopend numeric value 定义在音频流中循环播放停止的位置，默认是 end 属性的值。

loopstart numeric value 定义在音频流中循环播放的开始位置。默认是 start 属性的值。

playcount numeric value 定义音频片断播放多少次。默认是 1。

src url 所播放音频的 url。

start numeric value 定义播放器在音频流中开始播放的位置。默认地，声音在开头进行播放。

HTML 5 <audio> 标签标准属性

class, contenteditable, contextmenu, dir, draggable, id, irrelevant,

lang, ref, registrationmark, tabindex, template, title如需完整的描述，请访 HTML 5 中标准属性。

HTML 5 <audio> 标签事件属性

onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu,

ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover,

ondragstart, ondrop, onerror, onfocus, onkeydown, onkeypress, onkeyup,

onload, onmessage, onmousedown, onmousemove, onmouseover, onmouseout,

onmouseup, onmousewheel, onresize, onscroll, onselect, onsubmit, onunload

HTML 5 <audio> 标签--在播放之前预加载音频

只要您准备好了音频元素，您就可以选择最佳预加载策略。HTML5 <audio> 规范用三个可能的值描述预加载属性：

“none”：提示用户代理，作者不希望用户需要媒体资源，或者是，服务器要尽量减少不必要的流量。如果您的应用场景是每个帖子都带有音频文件的一个播客，这就是一个非常合适的选项，因为它减少了初始预加载的带宽。只要用户播放文件（无论是通过默认可视控件还是 JavaScript 方法 load() 或 play()），浏览器将开始提取音频流。

“metadata”：提示用户代理，作者不希望用户需要媒体资源，但提取资源元数据（维度、持续时间等）是合理的。如果您在构建音频播放器控件，并且您需要关于音频剪辑的基本信息，但尚不需要播放它，推荐该选项。

“auto”：提示用户代理，用户代理可以在对服务器不构成风险的情况下把用户的需求放在首位，直至并包括乐观地下载全部资源。

如果您正在构建一个游戏，这可能是最合适的方式，因为它使您可以在真正开始游戏体验之前预加载全部音频剪辑。

请注意，当您以编程方式设置音频元素的 src 属性时，浏览器将设置preload（预加载）属性，除非它已被设置为 “auto”。基于此原因，如果您的应用场景需要一个不同的值，请务必在设置 src 之前在代码行中指定它。

请注意，当您以编程方式设置音频元素的 src 属性时，浏览器将设置preload（预加载）属性，除非它已被设置为 “auto”。基于此原因，如果您的应用场景需要一个不同的值，请务必在设置 src 之前在代码行中指定它.

HTML 5 <audio> 标签例子1：

1
<audio src="someaudio.wav">您的浏览器不支持 audio 标签。</audio>

HTML 5 <audio> 标签例子2：

HTML 5 <audio> 标签例子3：

<audio src="audio/sample.mp3" autoplay>
</audio>
var audio = document.createElement("audio");
if (audio != null && audio.canPlayType && audio.canPlayType("audio/mpeg"))
{
audio.src = "audio/sample.mp3";
audio.play();
}

HTML 5 <audio> 标签例子4:

本文来源 HTML5 <audio> 标签-在html中定义声音的标签

转载于:https://my.oschina.net/u/1766067/blog/287108

HTML5 audio 标签-在html中定义声音的标签相关推荐

火车头如何把标题加html标签,火车头采集中内容页及标签Xpath可视化提取功能的使用...
在上一篇文章<火车头采集中列表页及标签Xpath可视化提取功能的使用>中,我们讲解了火车头采集器如何利用Xpath来采集列表页.今天,我们就说说如何火车头采集器如何利用Xpath来采集内容 ...
html文本字段标签居中,html中实现文本与标签居中的方法
html中实现文本与标签居中的方法发布时间:2020-08-31 09:44:08 来源:亿速云阅读:66 作者:小新这篇文章主要介绍html中实现文本与标签居中的方法,文中介绍的非常详细,具有 ...
Android fragmnet标签,在Android中为Fragment添加标签？
我试图在Fragment中添加一个TabHost.代码如下.这里里面的Fragment.我试图添加TabHost显示两个标签: package com.nordicsoft.dilosysNewVer ...
css tr标签自动换行,HTML中table设置td标签内容过多自动换行
今天遇到一个小问题,需要解决table标签中td标签内容过多自动换行的问题. 因为之前有经验(无论是内容过多省略显示还是内容过多换行都做过),这次的需求是内容过多换行显示. 首先在 table 上增加 ...
自定义标签TLD文件中，rtexprvalue子标签的意思
rtexprvalue的全称是 Run-time Expression Value, 它用于表示是否能够利用JSP表达式. 举例子: 1.定义一个TLD文件: <tag><name& ...
html 怎么引入c标签库,JSP taglib指令：引入标签库指令
通过使用 JSP taglib 指令,开发者就可以在页面中使用这些基本标记或自定义的标记来完成特殊的功能. 语法: 参数说明: uri:该属性指定了 JSP 要在 web.xml 文件中查找的标签库描 ...
标签打印软件中如何设置镜像
在用标签打印软件设计标签的时候有些客户可能会用到镜像功能,在标签打印软件中镜像的设置有两种情况,第一种是把某个对象设置镜像, 第二种是把整个标签设置镜像,接下来我们就看下这两种镜像功能如何设置. 第一 ...
标签打印软件中“打印背景”的应用
在用标签打印软件添加背景图打印标签的时候,可能会遇到不需要打印背景图的情况,因为有的标签纸是空白的标签纸,有的标签纸上面是有模板信息的,比如超市中的一些商品标签纸,标签纸上有商品标签模板,只需要打印商 ...
自定义标签的使用jsp实例_JSP自定义标签示例教程
自定义标签的使用jsp实例 Today we will look into JSP custom tags. Earlier we learned about JSP Action Elements, ...

HTML5 audio 标签-在html中定义声音的标签

HTML5 audio 标签-在html中定义声音的标签相关推荐

最新文章

热门文章