什么是 HTML 音频？
HTML 音频指在网页中嵌入音频文件并实现播放的功能。
通过使用 HTML5 提供的<audio>标签，可以轻松地将音频内容（如音乐、语音或其他声音）集成到网页中。
<audio> 基本用法
要在网页中嵌入音频文件，可以使用<audio>标签。以下是一个简单的例子：
<h1>音频示例</h1>
<audio controls>
<source src="/uploads/20250322/audio.mp3" type="audio/mpeg">
您的浏览器不支持音频元素。
</audio><audio> 属性解释
| 属性 | 解释 |
|---|---|
| controls | 这个属性会显示音频控件，如播放、暂停、音量控制等。 |
| <source> | 用于指定音频文件的路径和类型。可以指定多个 <source> 标签，浏览器会使用第一个支持的格式。 |
| src | 指定音频文件的路径。 |
| type | 指定音频文件的 MIME 类型。常见的类型有 audio/mpeg（MP3）、audio/ogg（Ogg Vorbis）、audio/wav（WAV）等。 |
<audio> 多格式支持
为了确保在不同浏览器中都能播放音频，可以提供多种格式的音频文件：
<audio controls>
<source src="/uploads/20250322/audio.mp3" type="audio/mpeg">
<source src="/uploads/20250322/audio.ogg" type="audio/ogg">
<source src="/uploads/20250322/audio.wav" type="audio/wav">
您的浏览器不支持音频元素。
</audio><audio> 自动播放
如果你希望音频在页面加载时自动播放，可以使用autoplay属性：
<h1>音频示例</h1>
<audio controls autoplay>
<source src="/uploads/20250322/audio.mp3" type="audio/mpeg">
您的浏览器不支持音频元素。
</audio>注意: 自动播放可能会被浏览器阻止，特别是在移动设备上。
<audio> 循环播放
如果你希望音频循环播放，可以使用loop属性：
<h1>音频示例</h1>
<audio controls loop>
<source src="/uploads/20250322/audio.mp3" type="audio/mpeg">
您的浏览器不支持音频元素。
</audio><audio> 预加载
你可以使用preload属性来控制音频文件的预加载行为：
auto：浏览器会自动预加载音频文件（默认值）。metadata：只预加载音频文件的元数据（如时长）。none：不预加载音频文件。
<h1>音频示例</h1>
<audio controls preload="metadata">
<source src="/uploads/20250322/audio.mp3" type="audio/mpeg">
您的浏览器不支持音频元素。
</audio><audio> JavaScript控制
你可以使用JavaScript来控制音频的播放、暂停等行为。例如：
auto：浏览器会自动预加载音频文件（默认值）。metadata：只预加载音频文件的元数据（如时长）。none：不预加载音频文件。
<audio id="myAudio">
<source src="audio.mp3" type="audio/mpeg">
您的浏览器不支持音频元素。
</audio>
<button onclick="playAudio()">播放</button>
<button onclick="pauseAudio()">暂停</button>
<script>
var audio = document.getElementById("myAudio");
function playAudio() {
audio.play();
}
function pauseAudio() {
audio.pause();
}
</script><audio> 样式和自定义控件
你可以使用CSS和JavaScript来自定义音频控件的外观和行为。例如，隐藏默认控件并创建自定义按钮：
<style>
button.on{
display:inline-block;
width:120px;
line-height:40px;
border-radius:6px;
border-width:0px;
background-color:#04AA6D;
color:#fff;
font-size:16px;
letter-spacing:0.5px;
text-align:center;
margin-right:8px;
cursor:pointer;
}
button.off{
display:inline-block;
width:120px;
line-height:40px;
border-radius:6px;
border-width:0px;
background-color:#dd0504;
color:#fff;
font-size:16px;
letter-spacing:0.5px;
text-align:center;
margin-right:8px;
cursor:pointer;
}
</style>
<audio id="myAudio">
<source src="audio.mp3" type="audio/mpeg">
您的浏览器不支持音频元素。
</audio>
<button class="on" onclick="playAudio()">播放</button>
<button class="off" onclick="pauseAudio()">暂停</button>
<script>
var audio = document.getElementById("myAudio");
function playAudio() {
audio.play();
}
function pauseAudio() {
audio.pause();
}
</script>
评论区 0
发表评论
教程介绍
HTML 超文本标记语言，一种用于创建网页的标准标记语言，在浏览器上运行和解析。
60
章节
123
阅读
0
评论