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> |