Html5播放音频格式

最新推荐文章于 2024-08-24 11:08:43 发布

小勇Oo

最新推荐文章于 2024-08-24 11:08:43 发布

阅读量2.4k

点赞数 1

分类专栏： js篇

js篇专栏收录该内容

29 篇文章 0 订阅

订阅专栏

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这两个文件。