知识点
相关文章
更多最近更新
更多HTML5 Audio元素【HTML5教程 - 第五篇】
2019-03-17 22:39|来源: 未知
HTML5 提供了标准的方式来播放音频文件。
Web中的Audio
直到目前为止,web页面上没有标准的方式来播放音频文件。
目前大多数的音频文件是使用插件来播放。但是,很多的浏览器都拥有不同的插件。
HTML5定义了一个新的元素用来指定标准的方式来插入音频文件到web页面中:<audio>元素。
支持的浏览器
IE9,Firefox, Opera,Chrome和Safari都支持<audio>元素。
注意:IE8和更早的版本,不支持<audio>元素。
HTML5 audio - 如何工作
为了在HTML5中播放音频,你需要:
<audio controls="controls"> <source src="song.ogg" type="audio/ogg" /> <source src="song.mp3" type="audio/mpeg" /> Your browser does not support the audio element. </audio>
控制属性包含了,播放,暂停,音量。
你可以在<audio>和</audio>标签之间插入文字内容,这样如果浏览器不支持audio,那么会显示这些文字。
<audio>元素允许有多个播放来源。<source>元素可以链接到不同的audio文件。浏览器将会使用第一个支持的格式播放音频。
支持的音频格式和浏览器支持
目前来说,这里有3个支持文件格式:MP3,Wav和Ogg,如下:
Browser | MP3 | Wav | Ogg |
---|---|---|---|
Apple Safari 5 | YES | YES | NO |
Firefox 4.0 | NO | YES | YES |
Google Chrome 6 | YES | YES | YES |
Internet Explorer 9 | YES | NO | NO |
Opera 10.6 | NO | YES | YES |
HTML5 audio 标签
Tag | Description |
---|---|
<audio> | Defines sound content |
<source> | Defines multiple media resources for media elements, such as <video> and <audio |
本文链接:HTML5教程 - 第五篇:HTML5 Audio元素,转自:http://www.gbin1.com/tutorials/html5-tutorial/html5-audio/
相关问答
更多-
html5免费教程网盘下载[2022-07-06]
可以去千峰官网找自己喜欢的下载观看,网盘的不一定是你正好需要的。 -
HTML 和 HTML5 有什么不同吗?[2022-06-09]
HTML5是HTML标准的下一个版本 平时说的HTML应该是实现HTML4的版本 HTML5没有完全颠覆HTML4 做到完全兼容 相对于4 新加入了一些标签 比如 对某些标签添加了大量新的属性 HTML5和 CSS3.0都是 W3C最新的两个规范 没有 直接联系 但是为了做到最兼容新标准 这俩好基友会经常一起被提及 HTML5只是一种标准 可以用到所有用到html技术的地方 of course 可以用到WEB项目上 而且我觉得用到HTML5的项目都是很流行的项目 -
HTML5比以前的版本都有哪些改变,大家说说[2022-09-18]
不错!!!!!!!!! 顶 ! 顶 ! 顶 ! 顶 ! 顶 ! 顶 ! 顶 ! 顶 ! 顶 ! 顶 ! 顶 ! 无锡无缝钢管厂 无锡钢管厂 无锡无缝钢管 无锡钢管 无锡钢管价格 -
HTML5游戏很火么?到底说明是HTML5游戏啊?[2022-01-21]
只用HTML5和JS,CSS写的游戏(2048,围住神经猫,flappy bird),之前火过一段时间,现在还好,有发展前景,但是只适合轻中度游戏,不能做大型重度游戏 -
2个音频声音,我想一次播放一个HTML5音频元素(2 audio sounds and I want to play one HTML5 audio element at a time)[2022-05-21]
我认为问题是你列出了click事件,当你应该听play事件时,也出于某种原因, window.onload在jsfiddle中无法正常工作,所以替换 window.onload = function () { $("sound1").onclick = sound1_click; $("sound2").onclick = sound2_click; } 同 $("sound1").onplay = sound1_click; $("sound2").onplay = sound2_cli ... -
不会喜欢这个答案,但Chromecast根本不支持自签名证书。 它构建在Chromium安全模型中。 如果您可以将证书装载到证书商店中,它就可以工作(Android和Fire平板电脑和电视可以做到这一点),但这可能会有所帮助,但Chromecast(和FireStick)无法做到这一点。 Not gonna like this answer, but Chromecast simply won't support self-signed certs. It is built into the Chromiu ...
-
你必须注意HTMLAudioElement( $('#musicBeat')[0] )和jQuery Object( $('#musicBeat') )之间的$('#musicBeat') 。 play是HTMLAudioElement的一个方法,所以你必须通过它访问它(就像你一样),但.animate是一个jQuery方法,只能在jQuery对象上调用。 而且你必须指定newVolume(不能将其留空)。 var beepTwo = $("#musicBeat"); beepTwo[0].play(); ...
-
根据这个用于标记博客摘录的最佳HTML5标记是什么? 使用
是最好的。 According to this What's the best HTML5 tag to use for marking up blog excerpts? Using a
is the best.
-
我在哪里可以开始学习如何设置HTML5视频和音频元素的样式?(Where can I start learning how to style the HTML5 Video and Audio elements?)[2022-02-21]
http://videojs.com - 只使用CSS轻松设置HTML5视频播放器的样式。 我过去一直在使用它,它很容易上手。 http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-and-audio/ - Opera的这篇文章详细介绍了整个规范,编码,等等,并有一篇关于通过添加Javascript侦听器来创建自己的控件的非常深入的文章。 不适合新手,但增加了大量的控制和灵活性(搜索“滚动我自己的控件 ... -
HTML5音频参考(HTML5 audio reference)[2022-11-11]
play(),pause()等来自HTMLMediaElement接口,这里记录: http : //www.w3.org/TR/html5/video.html#htmlmediaelement play(), pause() etc come from HTMLMediaElement interface, documented here: http://www.w3.org/TR/html5/video.html#htmlmediaelement