知识点
相关文章
更多最近更新
更多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免费教程网盘下载[2024-01-28]
可以去千峰官网找自己喜欢的下载观看，网盘的不一定是你正好需要的。 -
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游戏啊？[2023-10-26]
只用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?)[2023-05-04]
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)[2024-01-07]
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