HTML5：音频控制

最新推荐文章于 2023-12-09 10:16:22 发布

午-夜

最新推荐文章于 2023-12-09 10:16:22 发布

阅读量2.7k

点赞数

分类专栏： [---h5+c3---] 文章标签： html5

本文链接：https://blog.csdn.net/dzy21/article/details/51733141

版权

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

5 篇文章 0 订阅

订阅专栏

一：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 οnclick="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 οnclick="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>

午-夜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5：音频控制

一：HTML5控制音频常用属性：属性值描述autoplayautoplay如果出现该属性，则音频在就绪后马上播放。controlscontrols如果出现该属性，则向用户显示控件，比如播放按钮。looploop
复制链接

扫一扫

专栏目录