什么是 HTML 音频?
HTML 音频指在网页中嵌入音频文件并实现播放的功能。
通过使用 HTML5 提供的
要在网页中嵌入音频文件,可以使用
实例代码
运行代码
复制
音频示例
您的浏览器不支持音频元素。
属性
解释
controls
这个属性会显示音频控件,如播放、暂停、音量控制等。
用于指定音频文件的路径和类型。可以指定多个
src
指定音频文件的路径。
type
指定音频文件的 MIME 类型。常见的类型有 audio/mpeg(MP3)、audio/ogg(Ogg Vorbis)、audio/wav(WAV)等。
为了确保在不同浏览器中都能播放音频,可以提供多种格式的音频文件:
实例代码
运行代码
复制
您的浏览器不支持音频元素。
如果你希望音频在页面加载时自动播放,可以使用autoplay属性:
实例代码
运行代码
复制
音频示例
您的浏览器不支持音频元素。
注意: 自动播放可能会被浏览器阻止,特别是在移动设备上。
如果你希望音频循环播放,可以使用loop属性:
实例代码
运行代码
复制
音频示例
您的浏览器不支持音频元素。
你可以使用preload属性来控制音频文件的预加载行为:
auto:浏览器会自动预加载音频文件(默认值)。
metadata:只预加载音频文件的元数据(如时长)。
none:不预加载音频文件。
实例代码
运行代码
复制
音频示例
您的浏览器不支持音频元素。
你可以使用JavaScript来控制音频的播放、暂停等行为。例如:
auto:浏览器会自动预加载音频文件(默认值)。
metadata:只预加载音频文件的元数据(如时长)。
none:不预加载音频文件。
实例代码
运行代码
复制
您的浏览器不支持音频元素。
var audio = document.getElementById("myAudio");
function playAudio() {
audio.play();
}
function pauseAudio() {
audio.pause();
}
你可以使用CSS和JavaScript来自定义音频控件的外观和行为。例如,隐藏默认控件并创建自定义按钮:
实例代码
运行代码
复制
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;
}
您的浏览器不支持音频元素。
var audio = document.getElementById("myAudio");
function playAudio() {
audio.play();
}
function pauseAudio() {
audio.pause();
}
HTML 插件HTML 视频(Video)
评论区 0
发表评论
发表评论