参考资料

  1. HTML 内联 元素
  2. HTML高度与宽度设置 Iframe
  3. HTML 注释
  4. HTML 文本格式化
  5. 如何添加按钮的过渡动画效果？
  6. html文本标签详细说明以及案例
  7. Html转PHP代码有哪些
  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>
TAG：基本格式化元素网页内容插件主要标签属性控件

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。