HTML音頻詳解

一、HTML音頻標籤

HTML音頻標籤用於在網頁中嵌入音頻，其語法格式如下：

  <audio src="audio.mp3"></audio>

其中，src屬性指定音頻文件的URL地址，可以支持多種音頻格式，如mp3、ogg、wav等。

除了src屬性，HTML音頻標籤還有其他常用屬性。

二、HTML怎麼設置音頻

當我們使用HTML音頻標籤時，設置音頻的方式有多種。

1、內聯設置

直接在HTML文件中設置音頻文件的URL地址：

  <audio src="audio.mp3"></audio>

2、外部設置

使用JavaScript或CSS等外部工具設置音頻文件的URL地址。

  <audio id="audio"></audio>
  <script>
    document.getElementById('audio').src = 'audio.mp3';
  </script>

三、HTML音頻屬性

HTML音頻標籤的屬性可用於控制音頻的播放、音量、循環等，常用屬性如下：

• autoplay：自動播放音頻。
• controls：顯示音頻控制欄。
• loop：循環播放音頻。
• muted：靜音音頻。
• preload：預載入音頻，可設置為”auto”、”metadata”、”none”。
• src：音頻文件URL地址。
• volume：音頻的音量，值為0~1。

四、HTML音頻循環播放

HTML音頻標籤的loop屬性可以實現音頻的循環播放。

  <audio src="audio.mp3" loop></audio>

五、HTML音頻文件

HTML音頻標籤支持多種格式的音頻文件，如mp3、ogg、wav等常見格式。

為了兼容不同瀏覽器，建議同一個音頻文件提供多種格式的版本。

六、HTML音頻控制項

使用HTML音頻控制項，用戶可以通過控制欄來控制音頻的播放、暫停、進度等。

  <audio src="audio.mp3" controls></audio>

七、HTML音頻代碼

使用JavaScript可以動態添加HTML音頻標籤：

  var audio = document.createElement('audio');
  audio.src = 'audio.mp3';
  document.body.appendChild(audio); 

八、HTML音頻自動循環播放

通過JavaScript代碼控制音頻的自動循環播放。

  var audio = document.createElement('audio');
  audio.src = 'audio.mp3';
  audio.loop = true;
  document.body.appendChild(audio);
  audio.play();

九、HTML音頻視頻標籤

HTML音頻標籤的極其類似於HTML視頻標籤<video>，它們的語法和屬性相似，除了文件格式和媒體類型不同之外，使用方法完全一樣。

十、總結

HTML音頻標籤可以讓我們在網頁中嵌入音頻，通過設置屬性和使用控制欄等方式，實現音頻的播放、暫停、循環、靜音、自動播放等功能。