html5 Audio标签的使用详解及示例
互广建站
在HTML5 中，<audio> 标签用于在网页中嵌入音频。以下是 <audio> 标签的使用详解及示例：
html：
<audio controls> <source src="audio.mp3" type="audio/mpeg"> <source src="audio.ogg" type="audio/ogg"> 您的浏览器不支持音频播放。 </audio>
属性解释：
controls：显示音频播放器的控制界面，如播放/暂停、音量控制等。
<source> 元素：
用于为 <audio> 标签提供多个不同格式的音频源，以便浏览器根据自身支持的格式选择合适的音频进行播放。
src：音频文件的路径。
type：指定音频的 MIME 类型，如 audio/mpeg 表示 MP3 格式的音频，audio/ogg 表示 OGG 格式的音频。
如果浏览器不支持 <audio> 标签或无法播放指定的音频格式，将会显示 <audio> 标签内的文本内容（如 “您的浏览器不支持音频播放。”）
以下是一个更复杂的示例，包含了更多的属性和事件处理：
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 Audio 示例</title>
</head>
<body>
<audio id="myAudio" controls loop preload="auto">
<source src="music.mp3" type="audio/mpeg">
<source src="music.ogg" type="audio/ogg">
互广提醒您，您的浏览器不支持音频播放。
</audio>
<script>
var audio = document.getElementById('myAudio');
// 播放事件
audio.addEventListener('play', function () {
console.log('音频开始播放');
});
// 暂停事件
audio.addEventListener('pause', function () {
console.log('音频暂停');
});
// 播放完成事件
audio.addEventListener('ended', function () {
console.log('音频播放完成');
});
</script>
</body>
</html>在上述示例中，我们为音频添加了事件监听器，以便在播放、暂停和播放完成时进行相应的处理。
猜你喜欢