บทนำ
ใช้แท็ก <audio> สำหรับฝังไฟล์เสียงใน HTML5 เพิ่มแอตทริบิวต์ controls เพื่อแสดง Player UI
รูปแบบเสียงที่รองรับ
- MP3 - รองรับทุกเบราว์เซอร์ (แนะนำหลัก)
- WAV - คุณภาพสูง ขนาดใหญ่
- Ogg (Vorbis/Opus) - Open source รองรับ Firefox, Chrome, Opera
แนะนำ: ใส่ <source> หลายรูปแบบเพื่อความเข้ากันได้
แอตทริบิวต์หลัก
| แอตทริบิวต์ | คำอธิบาย |
|---|---|
controls | แสดง UI (Play, Pause, Volume, Seek) |
autoplay | เล่นอัตโนมัติ (มักถูกบล็อก) |
loop | เล่นซ้ำ |
muted | ปิดเสียง |
preload | auto, metadata, none - โหลดล่วงหน้า |
src | URL ไฟล์ (ใช้แทน source ได้) |
ตัวอย่างโค้ด
<!DOCTYPE html>
<html>
<head>
<title>HTML Audio Tag</title>
</head>
<body>
<p>คลิก Play เพื่อฟัง...</p>
<audio controls>
<source src="/audio/song.mp3" type="audio/mpeg">
<source src="/audio/song.ogg" type="audio/ogg">
เบราว์เซอร์ของคุณไม่รองรับ Audio
</audio>
</body>
</html>
JavaScript Control
const audio = document.querySelector('audio');
audio.play(); // เล่น
audio.pause(); // หยุด
audio.currentTime = 30; // ก้าวไป 30 วิ
audio.volume = 0.5; // เสียง 50%
audio.playbackRate = 1.5; // เร็ว 1.5x