参考资料

  1. HTML 注释
  2. HTML 使用 Class 与 ID 的差异
  3. HTML <cite>用于著作标题的
  4. 菜鸟工具html编辑器
  5. HTML 强调
  6. HTML 提示
  7. HTML/MarkDown互转有哪些
  8. HTML 有用的提示

HTML 音频(Audio)

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>
TAG：基本格式化元素网页内容插件主要标签属性控件

AIGEO优化摘要

AI可读摘要：HTML 音频(Audio)格式化基本介绍HTML5 audio 元素用于在网页中嵌入音频内容，无需使用插件。主要标签属性controls：显示音频控件（播放/暂停等）autoplay：页面加载后自动播放loop：循环播放muted：静音preload：预加载设置（auto/metadata/none）src：音频文件路径基本用法多格式支持实例JavaScr...
常见问题：
HTML 音频(Audio)主要讲了什么？

HTML 音频(Audio)格式化基本介绍HTML5 audio 元素用于在网页中嵌入音频内容，无需使用插件。主要标签属性controls：显示音频控件（播放/暂停等）autoplay：页面加载后自动播放loop：循环播放muted：静音preload：预加载设置（auto/metadata/none）src：音频文件路径基本用法多格式支持实例JavaScr...

HTML 音频(Audio)适合哪些人参考？

适合正在了解文章信息、进行对比筛选，或希望快速获得结论的用户参考。

阅读HTML 音频(Audio)时应重点看哪些内容？

建议重点关注标题、摘要、正文说明、图片资料和更新时间。

AIGEO评分：85/100
  • 建议补充封面或内容图片。
作者：王壹杰
时间：2025-04-24 10:08:56
来源：https://html.ciilii.com/