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