audio標籤詳解

一、不讓拖動進度條

在默認情況下，audio標籤提供了可以拖動的進度條，但某些時候，我們可能不想讓用戶拖動進度條，此時可以通過設置audio的controls屬性為false即可禁用掉進度條的拖動功能。

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

二、audio標籤怎麼用

audio標籤用於在網頁中嵌入音頻文件，通過src屬性指定音頻文件的位置即可。

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

三、audio標籤使用範例

以下是一個audio標籤的簡單使用範例：

<audio src="./music.mp3" controls autoplay>
   <p>您的瀏覽器不支持 audio 元素</p>
</audio>

在這個例子里，audio元素使用了src屬性指定了要播放的音頻文件，通過controls屬性開啟了音量和進度條，以保證播放的改變和調整，autopaly屬性則表示播放音頻文件時自動播放，如果瀏覽器不支持audio標籤，則會輸出一段文本提示用戶。

四、audio標籤所支持的音頻格式

不同瀏覽器支持的音頻格式可能不同，因此我們需要在指定src屬性時都是用通用格式（如MP3），以兼容所有瀏覽器，以下是常見的音頻格式：

• MP3
• WAV
• OGG

五、audio標籤自動播放屬性

通過在audio標籤設置autoplay屬性，音頻文件可以在網頁載入時自動播放。

六、audio標籤自動播放

以下是audio標籤的自動播放例子，如有需要請注意：

<audio autoplay>
   <source src="audio.mp4" type="audio/mp4"/>
   <source src="audio.ogg" type="audio/ogg"/>
</audio>

七、audio標籤的使用

audio標籤可以通過多種方式獲得和控制播放器的狀態，如：

• 暫停/播放控制
• 音量調節
• 媒體時間監控/調節
• 音頻播放回調事件

八、audio標籤回調函數

audio標籤回調函數用於監聽音頻播放過程中的狀態變化，例如更新播放進度，播放/暫停狀態變化等。以下是一個使用回調函數的例子：

<audio id="myAudio" src="audio.mp3"></audio>
<script>
   //獲取audio元素
   var audio = document.getElementById("myAudio");

   //添加播放時回調函數
   audio.addEventListener("play", function() {
      console.log("播放開始！");
   });

   //添加暫停時回調函數
   audio.addEventListener("pause", function() {
      console.log("播放暫停！");
   });

   //添加時間變更時回調函數
   audio.addEventListener("timeupdate", function() {
      console.log("當前播放時間：" + audio.currentTime);
   });
</script>

九、audio標籤中寫文字

在audio標籤中添加文字，一般使用嵌套方式即可完成，如下面例子：

<audio controls autoplay>
   <source src="/media/audio.mp3" type="audio/mpeg">
   <p>您的瀏覽器不支持 audio 元素</p>
</audio>

十、audio標籤用於為頁面添加音頻選取

通常，我們可以使用input標籤來允許用戶自主選擇音頻文件，但要實現媒體播放，則需要使用audio標籤。以下是一個常見的音頻文件上傳選擇例子：

<input type="file" accept="audio/*" onchange="playAudio(event)">
<audio id="player"></audio>
<script>
   function playAudio(event) {
      var player = document.getElementById("player");
      player.src = URL.createObjectURL(event.target.files[0]);
      player.controls = true;
      player.autoplay = true;
   }
</script>

以上是關於audio標籤詳細的使用方式和範例，我們可以根據這些知識在實際開發中應用，以實現更好的用戶體驗和功能。