<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 Audio 示例</title>
</head>
<body>
<h1>HTML5 Audio 示例</h1>
<audio controls>
<source src="sample.mp3" type="audio/mp3">
<source src="sample.ogg" type="audio/ogg">
Your browser does not support the audio tag.
</audio>
</body>
</html>
在这个示例中,<audio> 元素包含了两个 <source> 子元素,分别指定了不同格式的音频文件(MP3 和 Ogg)。浏览器将自动选择支持的第一个格式进行播放。controls 属性添加了一个默认的音频控制面板,允许用户播放、暂停、调整音量和查看音频时长等。
<audio> 元素的一些重要属性和事件:
- src:
- 指定音频文件的 URL。
- controls:
- 启用默认的控制面板。
- autoplay:
- 指定在页面加载时自动播放音频。
- loop:
- 指定循环播放音频。
- preload:
- 指定在页面加载时是否预加载音频。
- currentTime:
- 获取或设置当前播放的时间。
- play() 和 pause() 方法:
- 控制音频的播放和暂停。
- ended 事件:
- 在音频播放结束时触发。
HTML5 音频支持多种音频格式,例如 MP3、Ogg、Wav 等。通过提供多个 <source> 元素,你可以确保在不同的浏览器中选择合适的音频格式。音频在 Web 开发中广泛应用于音乐播放器、语音提示、游戏等场景。
转载请注明出处:http://www.pingtaimeng.com/article/detail/12431/HTML