Html5播放音频格式

HTML5定义了一个新的元素用来指定标准的方式来插入音频文件到web页面中:<audio>标签。使用audio标签可以控制音频的播放与停止,循环播放与播放次数设置,以及播放位置等等,详情请看下表。





如何使用Audio

要在HTML5中播放音频,需要在body中插入以下代码:

<audio controls="controls">  
   <source src="music.ogg" /> 
   <source src="music.mp3" /> 
   <source src="music.wav" /> 
</audio> 

奇怪为什么要引用三个resource?因为这是为了方便浏览器兼容mp3,war格式的音频。说明如下:



        HTML5 让开发人员可以更轻松地提供大量WEB体验。<audio>标签是令人兴奋的新添内容,不再需要外部音乐播放器,使音频的提供像显示图像一样简单。有了基于标准的音频控件和让用户更易于与声音进行交互的新浏览器功能,你可以轻松的在WEB页面上定制MP3播放器了。



我的Demo:

Html源码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>音频播放器</title>
</head>

<body>
		<h1>音乐播放器</h1>
		
		
		<div style="width:300px; height:100px; margin:100px auto;">
			 <!--
			 	controls=true 像用户指定显示播放按钮
				autoplay=true 自动播放
			  -->
        	 <audio controls=true autoplay=true>
				   <source src="good-friend.mp3" />
				   <source src="music.ogg" />
				   你的浏览器不支持video标签。
       		 </audio>
   		</div>
</body>
</html>

同时在该目录下要有:music.ogg和good-friend.mp3这两个文件。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值