HTML Audio
องค์ประกอบ HTML <audio>ใช้เพื่อเล่นไฟล์เสียงบนหน้าเว็บ
HTML <audio> องค์ประกอบ
ในการเล่นไฟล์เสียงใน HTML ให้ใช้<audio>องค์ประกอบ:
ตัวอย่าง
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
เสียง HTML - มันทำงานอย่างไร
แอตทริบิวต์controlsเพิ่มการควบคุมเสียง เช่น เล่น หยุดชั่วคราว และปรับระดับเสียง
องค์ประกอบ นี้<source>ให้คุณระบุไฟล์เสียงทางเลือกที่เบราว์เซอร์อาจเลือกได้ เบราว์เซอร์จะใช้รูปแบบแรกที่รู้จัก
ข้อความระหว่าง แท็ก <audio>และ</audio>จะแสดงในเบราว์เซอร์ที่ไม่สนับสนุน<audio>องค์ประกอบเท่านั้น
HTML <เสียง> เล่นอัตโนมัติ
ในการเริ่มไฟล์เสียงโดยอัตโนมัติ ให้ใช้autoplayแอตทริบิวต์:
ตัวอย่าง
<audio controls autoplay>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
หมายเหตุ:เบราว์เซอร์ Chromium ไม่อนุญาตให้เล่นอัตโนมัติในกรณีส่วนใหญ่ อย่างไรก็ตาม อนุญาตให้เล่นอัตโนมัติแบบปิดเสียงเสมอ
เพิ่มmutedหลังจาก
autoplayเพื่อให้ไฟล์เสียงของคุณเริ่มเล่นโดยอัตโนมัติ (แต่ปิดเสียง):
ตัวอย่าง
<audio controls autoplay muted>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุน
<audio>องค์ประกอบอย่างสมบูรณ์
| Element | |||||
|---|---|---|---|---|---|
| <audio> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
รูปแบบเสียง HTML
รูปแบบเสียงที่รองรับมีสามรูปแบบ: MP3, WAV และ OGG เบราว์เซอร์ที่รองรับรูปแบบต่าง ๆ คือ:
| Browser | MP3 | WAV | OGG |
|---|---|---|---|
| Edge/IE | YES | YES* | YES* |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | YES | NO |
| Opera | YES | YES | YES |
*จากขอบ79
เสียง HTML - ประเภทสื่อ
| File Format | Media Type |
|---|---|
| MP3 | audio/mpeg |
| OGG | audio/ogg |
| WAV | audio/wav |
เสียง HTML - วิธีการ คุณสมบัติ และเหตุการณ์
HTML DOM กำหนดวิธีการ คุณสมบัติ และเหตุการณ์สำหรับ<audio>องค์ประกอบ
วิธีนี้ทำให้คุณสามารถโหลด เล่น และหยุดไฟล์เสียงได้ เช่นเดียวกับระยะเวลาและระดับเสียงที่ตั้งไว้
นอกจากนี้ยังมีเหตุการณ์ DOM ที่สามารถแจ้งให้คุณทราบเมื่อเสียงเริ่มเล่น หยุดชั่วคราว ฯลฯ
สำหรับการอ้างอิง DOM แบบเต็ม ไปที่HTML Audio/Video DOM Referenceของเรา
แท็กเสียง HTML
| Tag | Description |
|---|---|
| <audio> | Defines sound content |
| <source> | Defines multiple media resources for media elements, such as <video> and <audio> |