HTML 音频(Audio)
2025-04-24
20
参考资料
HTML 音频(Audio)格式化
基本介绍
HTML5 <audio>
元素用于在网页中嵌入音频内容,无需使用插件。
主要标签
<audio> <source> </audio>
属性
controls
:显示音频控件(播放/暂停等)autoplay
:页面加载后自动播放loop
:循环播放muted
:静音preload
:预加载设置(auto/metadata/none)src
:音频文件路径
基本用法
<audio controls> <source src="audio.mp3" type="audio/mpeg"> 您的浏览器不支持 audio 元素 </audio>
多格式支持实例
<audio controls> <source src="audio.ogg" type="audio/ogg"> <source src="audio.mp3" type="audio/mpeg"> 您的浏览器不支持 audio 元素 </audio>
JavaScript 控制方法
var myAudio = document.getElementById("myAudio"); myAudio.play(); // 播放 myAudio.pause(); // 暂停 myAudio.volume = 0.5; // 设置音量(0-1)
CSS 扩展样式
/* 自定义音频控件样式 */ audio { width: 100%; background-color: #f1f3f4; border-radius: 8px; } /* 隐藏原生控件自定义UI */ audio::-webkit-media-controls-panel { background-color: #f1f3f4; } audio::-webkit-media-controls-play-button, audio::-webkit-media-controls-mute-button { background-color: #4285f4; border-radius: 50%; } audio::-webkit-media-controls-current-time-display, audio::-webkit-media-controls-time-remaining-display { color: #5f6368; }
完整示例
<!DOCTYPE html> <html> <head> <style> .custom-audio { width: 300px; margin: 20px; box-shadow: 0 2px 5px rgba(0,0,0,0.2); } </style> </head> <body> <audio class="custom-audio" controls> <source src="soundtrack.mp3" type="audio/mpeg"> <source src="soundtrack.ogg" type="audio/ogg"> 您的浏览器不支持 audio 元素 </audio> </body> </html>
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。