参考资料

  1. HTML 表单详解
  2. http-equiv="expires" 模拟 HTTP 头部中的 Expires 字段
  3. HTML 链接语法
  4. HTML 自定义列表
  5. HTML 来显示目录链接页面使用 iframe
  6. 用于长引用的 HTML
  7. HTML 有用的提示
  8. HTML 数学符号

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>