HTML5 引入了 <audio> 標簽，允許開發者在網頁中直接嵌入音頻文件，而不需要依賴第三方插件。本文將全面介紹 <audio> 標簽的各種屬性，并通過實例代碼詳細說明其用法。
一、基礎用法
1. 基本結構
HTML5 中使用 <audio> 標簽嵌入音頻文件，最簡單的形式如下：
<audio src="audio-file.mp3" controls></audio>
在這個示例中，src 屬性指定音頻文件的路徑，controls 屬性使瀏覽器顯示音頻控件。
2. 示例代碼
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML5 Audio Example</title>
</head>
<body><h1>HTML5 Audio Example</h1><audio src="audio-file.mp3" controls>Your browser does not support the audio element.</audio>
</body>
</html>
這段代碼將在網頁上顯示一個音頻播放器，如果瀏覽器不支持 <audio> 標簽，將顯示替代文本 “Your browser does not support the audio element.”。
二、屬性詳解
1. src
指定音頻文件的 URL，可以是相對路徑或絕對路徑。
<audio src="path/to/your-audio-file.mp3" controls></audio>
2. controls
顯示音頻控件（播放、暫停、音量等）。
<audio src="audio-file.mp3" controls></audio>
3. autoplay
音頻文件在頁面加載完成后自動播放。需要注意的是，為了用戶體驗，很多瀏覽器默認禁止自動播放，特別是移動設備。
<audio src="audio-file.mp3" controls autoplay></audio>
4. loop
音頻文件播放結束后自動重新播放。
<audio src="audio-file.mp3" controls loop></audio>
5. muted
初始加載時將音頻設置為靜音。
<audio src="audio-file.mp3" controls muted></audio>
6. preload
提示瀏覽器在頁面加載時如何處理音頻文件。可能的值有：
none：不預加載音頻文件。metadata：只預加載音頻文件的元數據。auto：瀏覽器選擇最佳方式預加載音頻文件。
<audio src="audio-file.mp3" controls preload="auto"></audio>
7. crossorigin
控制跨域資源共享 (CORS)，允許你配置是否可以加載跨域資源。
anonymous：不使用憑據。use-credentials：使用憑據（如 Cookies）。
<audio src="audio-file.mp3" controls crossorigin="anonymous"></audio>
三、支持多種音頻格式
由于不同瀏覽器對音頻格式的支持不同，通常需要提供多種格式的音頻文件，以確保兼容性。可以使用多個 <source> 標簽來定義不同格式的音頻文件。
<audio controls><source src="audio-file.mp3" type="audio/mpeg"><source src="audio-file.ogg" type="audio/ogg">Your browser does not support the audio element.
</audio>
示例代碼
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML5 Audio Example</title>
</head>
<body><h1>HTML5 Audio Example with Multiple Formats</h1><audio controls><source src="audio-file.mp3" type="audio/mpeg"><source src="audio-file.ogg" type="audio/ogg">Your browser does not support the audio element.</audio>
</body>
</html>
四、使用 JavaScript 控制音頻
HTML5 提供了豐富的 JavaScript API，可以用來控制音頻播放。以下是一些常用的屬性和方法：
1. 常用屬性
audio.currentTime：獲取或設置當前播放時間（秒）。audio.duration：獲取音頻總時長（秒）。audio.paused：返回音頻是否暫停。audio.volume：獲取或設置音量（0.0 到 1.0）。
2. 常用方法
audio.play()：播放音頻。audio.pause()：暫停音頻。audio.load()：重新加載音頻文件。
示例代碼
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML5 Audio Control with JavaScript</title>
</head>
<body><h1>Control HTML5 Audio with JavaScript</h1><audio id="myAudio" src="audio-file.mp3" controls></audio><br><button onclick="playAudio()">Play</button><button onclick="pauseAudio()">Pause</button><button onclick="stopAudio()">Stop</button><script>var audio = document.getElementById('myAudio');function playAudio() {audio.play();}function pauseAudio() {audio.pause();}function stopAudio() {audio.pause();audio.currentTime = 0; // Reset playback position to the start}</script>
</body>
</html>
在這個示例中，我們通過 JavaScript 控制音頻的播放、暫停和停止。audio.pause() 方法用于暫停音頻，audio.currentTime = 0 將播放位置重置到開始。
)
 深入學習)
)
