HTML5音频audio详解

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

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

HTML5 规定了一种通过 audio 元素来包含音频的标准方法。

audio 元素能够播放声音文件或者音频流。

当前,audio 元素支持三种音频格式

  IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0
Ogg Vorbis    
MP3    
Wav    

开发例子源码如下

<!DOCTYPE HTML>
<html>
<body>
Internet Explorer 8 不支持 audio 元素。在 IE 9 中,对 audio 元素的支持。
<audio controls="controls" autoplay="autoplay">
  <source src="http://www.w3school.com.cn/i/song.ogg" type="audio/ogg">
  <source src="http://www.w3school.com.cn/i/song.mp3" type="audio/mpeg">
你的浏览器不支持html5的audio标签
</audio>
</body>
</html>

解释:

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

2、<audio> 与 </audio> 之间插入的内容是供不支持 audio 元素的浏览器显示的。

3、audio 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式

支持的部分属性列举:

4、autoplay 是否自动播放。

属性 描述
autoplay autoplay 如果出现该属性,则音频在就绪后马上播放。
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
loop loop 如果出现该属性,则每当音频结束时重新开始播放。
preload preload
如果出现该属性,则音频在页面加载时进行加载,并预备播放。

如果使用 "autoplay",则忽略该属性。

src url 要播放的音频的 URL。

欢迎大家关注我的博客!如有疑问,请加QQ群:135430763共同学习!

时间: 2024-07-29 15:56:35

HTML5音频audio详解的相关文章

jqm的多列布局demo,html5的多列布局demo,多列布局的详细讲解,html5开发实例详解

由于移动设备屏幕宽度较小,所以一般不建议使用多列布局.但有时你可能需要并排放置一些元素(如按钮之类的). jQuery Mobile通过约定的类名ui-grid来提供了一种基于css的多列布局方法.共提供了五种布局方式,分别是:ui-gird-solo:单列布局,ui-gird-a:双列布局,ui-gird-b:三列布局,ui-gird-c:四列布局,ui-gird-d:五列布局.布局网格总宽度100%,完全不可见(无边框无背景),没有任何内边距或外边距,不会对网格中的内容产生任何干扰. 今天我

音频 属性详解(涉及采样率、通道数、位数、比特率、帧等)

[音频] 指人耳可以听到的声音频率在20HZ~20kHz之间的声波,称为音频. [采样频率] 即取样频率, 指每秒钟取得声音样本的次数.采样频率越高,声音的质量也就越好,声音的还原也就越真实,但同时它占的资源比较多.由于人耳的分辨率很有限,太高的频率并不能分辨出来. 22050 的采样频率是常用的, 44100已是CD音质, 超过48000或96000的采样对人耳已经没有意义.这和电影的每秒 24 帧图片的道理差不多. 如果是双声道(stereo), 采样就是双份的, 文件也差不多要大一倍. [

音频 PCM音频编码格式详解

[概念] PCM(Pulse Code Modulation)音频编码格式也被称为脉冲编码调制.就是将声音等模拟信号变成符号化的脉冲列,再进行记录存储. [原理] 把一个时间连续,取值连续的模拟信号变换成时间离散,取值离散的数字信号后在信道中传输.脉冲编码调制就是对模拟信号先抽样,再对样值幅度量化,编码的过程. 抽样,就是对模拟信号进行周期性扫描,把时间上连续的信号变成时间上离散的信号.该模拟信号经过抽样后还应当包含原信号中所有信息,也就是说能无失真的恢复原模拟信号.它的抽样速率的下限是由抽样定

音频知识详解

引言 现实生活中,我们听到的声音都是时间连续的,我们称为这种信号叫模拟信号.模拟信号需要进行数字化以后才能在计算机中使用. 目前我们在计算机上进行音频播放都需要依赖于音频文件.音频文件的生成过程是将声音信息采样.量化和编码产生的数字信号的过程,人耳所能听到的声音,最低的频率是从 20Hz 起一直到最高频率 20KHZ,因此音频文件格式的最大带宽是 20KHZ.根据奈奎斯特的理论,只有采样频率高于声音信号最高频率的两倍时,才能把数字信号表示的声音还原成为原来的声音,所以音频文件的采样率一般在 40

HTML5之Viewport详解

做移动Web开发也有一年多的时间了,虽然手机上浏览器对于PC上来说很友好了,但是手机各种设备的显示尺寸分辨率大小不一也要花大心思兼容它们. 关于HTML5中Viewport的文章Google,百度一搜有很多.记录一些自己理解的内容: Viewport属性详解 Viewport:字面意思为视图窗口,在移动 web 开发中使用.表示将设备浏览器宽度虚拟成一个特定的值(或计算得出)这样利于移动 web 站点跨设备显示效果基本一致. 基础写法: <meta name="viewport"

HTML5音频audio元素

一.音频文件格式.ogg/.mp3/.wav/.aac/.mp4/.opus,最后一种新的音频文件格式,在本书写作之时只有 Firefox 支持.对于音频,最好的两种格式是 Ogg 和 MP3. 二.在网页中添加带控件的单个音频文件<audio src="my-audio.ext" autoplay controls muted loop preload></audio>注意,包含 autoplay 属性会覆盖 preload 属性的设置,因为只有加载音频文件才

HTML5 音频 &lt;audio&gt;

HTML5 提供了播放音频的标准. 一.Web 上的音频 直到现在,仍然不存在一项旨在网页上播放音频的标准. 今天,大多数音频是通过插件(比如 Flash)来播放的.然而,并非所有浏览器都拥有同样的插件. HTML5 规定了一种通过 audio 元素来包含音频的标准方法. audio 元素能够播放声音文件或者音频流. 二.使用audio标签 <audio src="song.ogg" controls="controls"> </audio>

HTML5 音频audio 和视频video实用基础教程

1.音频(audio)<audio controls="controls"><source src="这里面放入音频文件路径"></source></audio>2.视频(video) <video controls="controls" loop="loop" autoplay="autoplay" id="video">&l

HTML5——音频audio与视频video

文件日志地址  http://blog.csdn.net/q1056843325/article/details/60336226 音频与视频现在已经变得越来越流行 各个网站为了保证跨浏览器的兼容性 仍然选择使用flash (源码截自优酷) 多媒体标签 使用 HTML5增加了audio与video两个多媒体标签 兼容性还不错,低版本IE不支持 可以使我们不需要使用任何浏览器插件就能够插入音频与视频控件 而且非常的简单 (源码截自Bilibili) 元素用法如下 1 <audio src="