HTML <audio> Element
HTML <audio> ใช้เพื่อเล่นไฟล์เสียงบนหน้าเว็บ :
ตัวอย่าง
<!DOCTYPE html>
<html>
<body>
<audio controls>
<source src="audio/soundef.ogg" type="audio/ogg">
<source src="audio/soundef.mp3" type="audio/mpeg">
</audio>
</body>
</html>HTML Audio ทำงานอย่างไร
Attribute controls เพิ่มส่วนควบคุมเสียง เช่น เล่น หยุดชั่วคราว และระดับเสียง
Element <source> ช่วยให้คุณสามารถระบุไฟล์เสียงทางเลือกที่เบราว์เซอร์อาจเลือกจาก เบราว์เซอร์จะใช้รูปแบบแรกที่รู้จัก
ข้อความระหว่าง Tag <audio> และ </audio> จะแสดงในเบราว์เซอร์ที่ไม่สนับสนุน Element <audio> เท่านั้น
<audio> การใช้ Autoplay
ในการเริ่มไฟล์เสียงโดยอัตโนมัติ ให้ใช้ autoplay Attribute:
ตัวอย่าง
<!DOCTYPE html>
<html>
<body>
<audio controls autoplay>
<source src="audio/soundef.ogg" type="audio/ogg">
<source src="audio/soundef.mp3" type="audio/mpeg">
</audio>
</body>
</html>หมายเหตุ: เบราว์เซอร์ Chromium ไม่อนุญาตให้เล่นอัตโนมัติในกรณีส่วนใหญ่ อย่างไรก็ตาม อนุญาตให้เล่นอัตโนมัติแบบปิดเสียงได้เสมอ
เพิ่ม muted หลัง autoplay เพื่อให้ไฟล์เสียงของคุณเริ่มเล่นโดยอัตโนมัติ (แต่ปิดเสียง):
ตัวอย่าง
<!DOCTYPE html>
<html>
<body>
<audio controls autoplay muted>
<source src="audio/soundef.ogg" type="audio/ogg">
<source src="audio/soundef.mp3" type="audio/mpeg">
</audio>
</body>
</html>ตัวเลขในตารางระบุเบราว์เซอร์เวอร์ชันแรกที่รองรับ <audio> Element ทั้งหมด
| Element | Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| <audio> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
การรองรับไฟล์เสียงของแต่ละเบราว์เซอร์
| Browser | MP3 | WAV | OGG |
|---|---|---|---|
| Edge/IE | รองรับ | รองรับ | รองรับ |
| Chrome | รองรับ | รองรับ | รองรับ |
| Firefox | รองรับ | รองรับ | รองรับ |
| Safari | รองรับ | รองรับ | ไม่รองรับ |
| Opera | รองรับ | รองรับ | รองรับ |
HTML Audio – Media Types
| รูปแบบไฟล์ | ประเภทของสื่อ |
|---|---|
| MP3 | audio/mpeg |
| OGG | audio/ogg |
| WAV | audio/wav |
HTML Audio – วิธีการ คุณสมบัติ และผลลัพธ์
HTML DOM ใช้กำหนดวิธีการ คุณสมบัติ แลผลลัพธ์สำหรับองค์ประกอบ <audio>
ซึ่งช่วยให้คุณโหลด เล่น และหยุดไฟล์เสียงชั่วคราว ตลอดจนกำหนดระยะเวลาและระดับเสียงได้
นอกจากนี้ยังมีเหตุการณ์ DOM ที่สามารถแจ้งให้คุณทราบเมื่อเสียงเริ่มเล่น หยุดชั่วคราว เป็นต้น
แท็กเสียง HTML
| Tag | คำอธิบาย |
|---|---|
| <audio> | ใช้สำหรับกำหนดเนื้อหาเกี่ยวกับเสียง |
| <source> | ใช้กำหนดทรัพยากรสื่อหลายรายการสำหรับองค์ประกอบสื่อ เช่น Tag <video> และ <audio> |