HTML5：音频控制

最新推荐文章于 2022-10-12 17:46:14 发布

原创最新推荐文章于 2022-10-12 17:46:14 发布 · 2.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5

[---h5+c3---] 专栏收录该内容

5 篇文章

订阅专栏

一：HTML5控制音频

<span style="font-size:18px;"><!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<audio controls="controls">
			<source src="img/test.mp3" type="audio/mp3"></source>
		</audio>
	</body>
</html></span>

常用属性：

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

二：DOM方式访问AUDIO元素

<span style="font-size:18px;"><!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h3>DOM方式访问AUDIO元素</h3>
		<audio id="myAudio" controls="controls">
			<source src="img/test.mp3" type="audio/mp3"></source>
		</audio>
		<p id="demo"></p>
		<button onclick="myFunction()">获取音频长度</button>
		<script>
			function myFunction()
			{
				var x = document.getElementById("myAudio").duration;
				document.getElementById("demo").innerHTML = x;
			}
		</script>
	</body>
</html></span>

三：DOM方式创建AUDIO元素

<span style="font-size:18px;"><!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h3>DOM方式创建AUDIO元素</h3>
		<button onclick="myFunction()">创建AUDIO</button>
		<p id="demo"></p>
		<script type="application/javascript">
			function myFunction()
			{
				var x = document.createElement("audio");
				x.setAttribute("src","img/test.mp3");
				x.setAttribute("controls","controls");
				document.body.appendChild(x);
			}
		</script>
	</body>
</html></span>