HTML <audio> Element
HTML <audio>ใช้เพื่อเล่นไฟล์เสียงบนหน้าเว็บ :
ตัวอย่าง
<!DOCTYPE html>
<html>
<body>
<audio controls>
<source src="soundef.ogg" type="audio/ogg">
<source src="soundef.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>HTML Audio ทำงานอย่างไร
แอตทริบิวต์controlsเพิ่มส่วนควบคุมเสียง เช่น เล่น หยุดชั่วคราว และระดับเสียง
องค์ประกอบ<source>ช่วยให้คุณสามารถระบุไฟล์เสียงทางเลือกที่เบราว์เซอร์อาจเลือกจาก เบราว์เซอร์จะใช้รูปแบบแรกที่รู้จัก
ข้อความระหว่าง แท็ก <audio>และ</audio>จะแสดงในเบราว์เซอร์ที่ไม่สนับสนุน<audio>องค์ประกอบ เท่านั้น
<audio> การใช้ Autoplay
ในการเริ่มไฟล์เสียงโดยอัตโนมัติ ให้ใช้autoplayแอตทริบิวต์:
ตัวอย่าง
<!DOCTYPE html>
<html>
<body>
<audio controls autoplay>
<source src="soundef.ogg" type="audio/ogg">
<source src="soundef.ogg" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>หมายเหตุ:เบราว์เซอร์ Chromium ไม่อนุญาตให้เล่นอัตโนมัติในกรณีส่วนใหญ่ อย่างไรก็ตาม อนุญาตให้เล่นอัตโนมัติแบบปิดเสียงได้เสมอ
เพิ่ม muted หลัง autoplay เพื่อให้ไฟล์เสียงของคุณเริ่มเล่นโดยอัตโนมัติ (แต่ปิดเสียง):
ตัวอย่าง
<!DOCTYPE html>
<html>
<body>
<audio controls autoplay muted>
<source src="soundef.ogg" type="audio/ogg">
<source src="soundef.ogg" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>ตัวเลขในตารางระบุเบราว์เซอร์เวอร์ชันแรกที่รองรับ <audio>องค์ประกอบ ทั้งหมด
| 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 | Description |
|---|---|
| <audio> | ใช้สำหรับกำหนดเนื้อหาเกี่ยวกับเสียง |
| <source> | ใช้กำหนดทรัพยากรสื่อหลายรายการสำหรับองค์ประกอบสื่อ เช่นแท็ก <video> และ <audio> |
