Web 上的音频

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

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

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

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

音频格式

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

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

如何工作

如需在 HTML5 中播放音频,您所有需要的是:

<audio src="song.ogg" controls="controls">
</audio>

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

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

实例

<audio src="song.ogg" controls="controls">
Your browser does not support the audio tag.
</audio>

上面的例子使用一个 Ogg 文件,适用于Firefox、Opera 以及 Chrome 浏览器。

要确保适用于 Safari 浏览器,音频文件必须是 MP3 或 Wav 类型。

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

实例

<audio controls="controls">
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>

Internet Explorer

Internet Explorer 8 不支持 audio 元素。在 IE 9 中,将提供对 audio 元素的支持。

<audio> 标签的属性

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

如果出现该属性,则音频在页面加载时进行加载,并预备播放。

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

src url 要播放的音频的 URL。
 

HTML5实现音频播放的更多相关文章

  1. html5 audio音频播放全解析

    序 html5开启了一个新时代,因为它让浏览器本身变得不那么被动,audio api就是一个典型的列子,在html5还没确定之前,如果想要在网页上听音乐看视频唯一的办法就是用flash意思是当你没有给 ...

  2. HTML5的音频播放和视频播放

    1.音频播放 audio(音频) html5提供了播放音频文件的标准   <audio src="anli.mp3" controls="controls" ...

  3. 用html5实现音频播放器

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  4. css总结16:HTML5 多媒体音频(Audio)视频(video )

    1 显示嵌入网页中的 MP3 文件: <embed height="50" width="100" src="horse.mp3"&g ...

  5. HTML5 音频播放器-Javascript代码(短小精悍)

    直接上干货咯! //HTML5 音频播放器 lzpong 2015/01/19 var wavPlayer = function () { if(window.parent.wavPlayer) re ...

  6. 二、深度解析HTML5之视频播放和音频播放

    一:视频播放 传统的视频音频播放是通过flash插件的形式完成,不是所有的浏览器都安装了flash插件,而且手机端不支持flash,这就导致视频和音频的播放会有很大的麻烦. 于是,HTML5增加音频和 ...

  7. html5页面怎么播放音频和视频

    html5页面怎么播放音频和视频 一.总结 一句话总结:html5 音频和视频标签:(audio And video),局限是不同浏览器对音频视频的格式支持很让人头痛 1.最基础的音频和视频标签的使用 ...

  8. HTML5 音频播放

    代码实例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  9. 【jquery】一款不错的音频播放器——Amazing Audio Player

    前段时间分享了一款视频播放器,点击这里.今天介绍一款不错的音频播放器——Amazing Audio Player. 介绍: Amazing Audio Player 是一个使用很方便的 Windows ...

随机推荐

  1. Win7下VS2010使用“ASP.Net 3.5 Claims-aware Template”创建ClaimsAwareWebSite报&quot;HRESULT: 0x80041FEB&quot;错误的解决办法

    问题描述: 使用VS2010的WIF开发模板创建“Claims-aware ASP.NET Site”.“Claims-aware WCF Service”,下载安装后,创建网站时,报错"H ...

  2. String to Date 多种格式转换

    在做Excel数据导入的时候,有些日期文本转换为日期格式时,需要适应多种格式,转换代码如下: static Date multiParse(String strDate){ if (strDate?. ...

  3. Apache 禁止访问目录

    1.打开apache配置文件httpd.conf 2.找到 <Directory /> Options Indexes AllowOverride None Order allow,den ...

  4. C#-循环滚动字幕,timer,从左至右,从右至左,暂停---ShinePans

    Lable的Left属性是能够更改的,可是 Right属性不能够更改,所以我们能够利用 这个特点做自加 自减运算 using System; using System.Collections.Gene ...

  5. vimgdb安装以及使用

    vimgdb安装 vim-7.3.tar.bz2http://www.vim.org/sources.phpvimgdb-for-vim7.3 (this patch) https://github. ...

  6. 如何在Visual Studio 2017中使用C# 7+语法

    前言 之前不知看过哪位前辈的博文有点印象C# 7控制台开始支持执行异步方法,然后闲来无事,搞着,搞着没搞出来,然后就写了这篇博文,不喜勿喷,或许对您有帮助. 在Visual Studio 2017配置 ...

  7. 伪Ap接入点

    1.创建一个伪造的Ap接入点,必须购买一个无线网卡的设备,接受功率在300Mbps ,低于这个传输速率的值,效果很差,都达到用户可以连接验证的效果.其芯片必须支持kali linux 内核系统. 2. ...

  8. python环境安装selenium和手动下载安装selenium的方法

    方法1:cmd环境下,用pip install selenium 可能会很慢 方法2:下载selenium安装包手动安装 下载地址:https://pypi.org/project/selenium/ ...

  9. windows server服务器上部署java+tomcat网站域名配置

    如果只是部署java项目的话,可以把IIS删除,然后在服务器上安装jdk tomcat 配置好环境变量,就和你在自己计算机上开发一样,把你的项目war包拷到tomcat下的webapps里(任意目录都 ...

  10. 小白学习之Code First(四)

    code first :约定大于配置(通过配置实体重写约定) 通过两种方式配置实体:DataAnnotations      Fluent Api System.ComponentModel.Data ...