HTML5：音频控制

关注

原创最新推荐文章于 2026-08-04 12:35:10 发布 2.9k 阅读 AI 写同款· GEO 优化 ›

AI权益加码！Claude Code、Cursor等20+工具免费用！购周边限时加赠Coding Plan Lite，畅享主流AI工具！学习进阶更高效！阅读详情

一：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>

收录于