การใช้งานแท็ก <audio>
แท็ก <audio> ใน HTML ใช้สำหรับเล่น ไฟล์เสียง บนหน้าเว็บ
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</audio>
วิธีการทำงานของแท็ก <audio>
controlsเพิ่มปุ่มควบคุมเสียง เช่น เล่น (Play), หยุดชั่วคราว (Pause), และปรับระดับเสียง (Volume)<source>ใช้ระบุไฟล์เสียงหลายรูปแบบ เพื่อให้เบราว์เซอร์เลือกเล่นจากไฟล์ที่รองรับ- ข้อความระหว่าง
<audio>และ</audio>จะแสดงเฉพาะในเบราว์เซอร์ที่ไม่รองรับแท็ก<audio>
การเล่นอัตโนมัติ (Autoplay)
สามารถให้ไฟล์เสียงเริ่มเล่นอัตโนมัติได้ โดยใช้แอตทริบิวต์
autoplay
<audio controls autoplay>
<source src="audio/soundef.ogg" type="audio/ogg">
<source src="audio/soundef.mp3" type="audio/mpeg">
</audio>
เบราว์เซอร์ในตระกูล Chromium (เช่น Chrome, Edge) ไม่อนุญาตให้เล่นเสียงอัตโนมัติ เว้นแต่เป็นแบบปิดเสียง (muted)
เพิ่ม muted หลัง autoplay เพื่อให้ไฟล์เสียงของคุณเริ่มเล่นโดยอัตโนมัติ (แต่ปิดเสียง):
<audio controls autoplay muted>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</audio>
การรองรับของเบราว์เซอร์
| Element | Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
<audio> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
รูปแบบเสียงที่ HTML รองรับ
HTML รองรับไฟล์เสียง 3 รูปแบบหลัก คือ MP3, WAV, และ OGG
| Browser | MP3 | WAV | Ogg |
|---|---|---|---|
| Edge / IE | ✅ | ✅ | ✅* |
| Chrome | ✅ | ✅ | ✅ |
| Firefox | ✅ | ✅ | ✅ |
| Safari | ✅ | ✅ | ❌ |
| Opera | ✅ | ✅ | ✅ |
Edge รองรับ WAV และ OGG ตั้งแต่เวอร์ชัน 79 เป็นต้นไป
สกุลไฟล์เสียง
| รูปแบบไฟล์ | Media Type |
|---|---|
| MP3 | audio/mpeg |
| OGG | audio/ogg |
| WAV | audio/wav |
Methods, Properties และ Events ของ <audio>
แท็ก <audio> มี เมธอด (methods), พร็อพเพอร์ตี (properties) และ อีเวนต์ (events) ที่สามารถใช้ควบคุมการเล่นเสียงผ่าน JavaScript คุณสามารถทำได้ เช่น โหลด (load) เล่น (play) หยุด (pause) ตรวจสอบความยาวของเสียง (duration) ปรับระดับเสียง (volume) ตรวจจับเหตุการณ์ เช่น เมื่อเสียงเริ่มเล่นหรือหยุดชั่วคราว
HTML แท็ก <audio>
| แท็ก | คำอธิบาย |
|---|---|
<audio> |
ใช้สำหรับกำหนดเนื้อหาเสียงบนหน้าเว็บ |
<source> |
ใช้ระบุไฟล์เสียงหลายรูปแบบสำหรับ <audio> หรือ <video> |