参考资料

  1. 隐形水印嵌入技术详解
  2. HTML 有序列表
  3. HTML 表格空间
  4. HTML 常用颜色
  5. Html网页 Web 安全色
  6. HTML 表格
  7. HTML 字体, 字体颜色 ，字体大小
  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：基本格式化元素网页内容插件主要标签属性控件