HTML
Media
Audio (audio)
บทนี้สอนผู้เริ่มต้นให้ฝังเสียงด้วยแท็ก `audio` อย่างถูกต้อง เข้าใจบทบาทของ `controls`, `autoplay`, `loop`, `muted` และการใช้ `<source>` เพื่อให้หน้าเว็บเล่นเสียงได้ชัดเจนและตรวจผ่าน Playground ได้จริง
1. หัวข้อนี้คืออะไร
`audio` คือแท็ก HTML สำหรับฝังไฟล์เสียงลงในหน้าเว็บโดยตรง แทนที่จะเป็นแค่ลิงก์ให้ผู้ใช้กดดาวน์โหลด เราสามารถให้เบราว์เซอร์แสดงตัวเล่นเสียงในหน้า พร้อมปุ่มเล่น/หยุด/ปรับเวลาได้
2. ทำไมหัวข้อนี้สำคัญ
- ทำให้ผู้ใช้ฟังเสียงได้ทันทีบนหน้าเว็บโดยไม่ต้องออกไปหน้าอื่น
- ช่วยให้บทเรียน พอดแคสต์ หรือเสียงประกอบใช้งานง่ายขึ้น
- ควบคุมประสบการณ์ผู้ใช้ได้ด้วย attributes เช่น `controls`, `loop`, `muted`
- รองรับการแยกไฟล์เสียงหลายชนิดผ่าน `<source>` แบบพื้นฐาน
3. ตัวอย่างจากชีวิตจริง
ตัวอย่างที่เจอบ่อย: - หน้าเรียนออนไลน์ที่มีไฟล์เสียงคำอธิบาย - หน้าแนะนำสินค้า ที่มีเสียงบรรยายสั้น - พอดแคสต์ตอนสั้นฝังในบทความ ทุกกรณีนี้ใช้ `audio` เพื่อให้ผู้ใช้กดฟังได้จากหน้าเว็บทันที
4. แนวคิดหลักที่ต้องเข้าใจ
- `<audio>` ใช้ฝังเสียงในหน้าเว็บ ไม่ใช่แค่ลิงก์ไฟล์เสียง
- ควรมี `controls` เพื่อให้ผู้ใช้ควบคุมการเล่นเองได้
- `autoplay` คือเล่นอัตโนมัติ แต่บางเบราว์เซอร์อาจจำกัดเพื่อไม่รบกวนผู้ใช้
- `loop` คือเล่นซ้ำอัตโนมัติเมื่อจบไฟล์
- `muted` คือเริ่มต้นแบบปิดเสียง
- `<source>` ใช้ระบุไฟล์เสียงและชนิดไฟล์แบบพื้นฐาน
5. การทำงานทีละขั้นตอน
- 1) สร้างแท็ก `<audio>` ในตำแหน่งที่ต้องการให้เล่นเสียง
- 2) ใส่ `controls` เพื่อให้ผู้ใช้กดเล่น/หยุดได้
- 3) เพิ่ม `<source src="..." type="audio/mpeg">` อย่างน้อย 1 แหล่ง
- 4) ใส่ข้อความ fallback ภายใน `<audio>` เผื่อกรณีเบราว์เซอร์ไม่รองรับ
- 5) ถ้าจำเป็นค่อยเพิ่ม `loop` หรือ `muted` และใช้งาน `autoplay` อย่างระมัดระวัง
6. ตัวอย่างเชิงเทคนิค / โค้ด
ตัวอย่างนี้ใช้ `audio` พร้อม `controls`, มี `<source>` มากกว่า 1 รูปแบบ และมี fallback text ภายในแท็ก
7. จุดที่ผู้เริ่มต้นมักสับสน
- คิดว่าใส่ลิงก์ไฟล์เสียงก็เท่ากับฝังเสียงแล้ว (จริง ๆ ยังไม่ใช่ตัวเล่นในหน้า)
- ลืมใส่ `controls` แล้วผู้ใช้กดเล่นเองไม่ได้
- ใส่ `autoplay` แล้วคาดหวังว่าจะเล่นเสมอทุกเบราว์เซอร์
- ใส่ `<audio>` แต่ลืม `<source>` ทำให้ไม่มีไฟล์ให้เล่น
8. เปรียบเทียบกับสิ่งที่ใกล้เคียง
| คู่เปรียบเทียบ | ความต่าง | ใช้เมื่อไร |
|---|---|---|
| `audio` vs ลิงก์ไฟล์เสียง (`a`) | audio ฝังตัวเล่นเสียงในหน้าเว็บ ส่วนลิงก์เป็นการพาไปไฟล์ | ถ้าต้องการให้ฟังได้ทันทีในหน้า ใช้ audio |
| มี `controls` vs ไม่มี `controls` | มี controls ผู้ใช้กดเล่น/หยุดได้เอง, ไม่มี controls ควบคุมยาก | โดยทั่วไปควรใส่ controls |
| `autoplay` vs ให้ผู้ใช้กดเล่นเอง | autoplay อาจถูกรบกวน UX และบางเบราว์เซอร์จำกัด | เริ่มต้นควรให้ผู้ใช้กดเล่นเอง ยกเว้นมีเหตุผลชัดเจน |
9. สรุปท้ายบทแบบจำง่าย
- `audio` คือแท็กสำหรับฝังเสียงในหน้าเว็บ
- ควรใช้ `controls` เพื่อให้ผู้ใช้ควบคุมการเล่นได้
- `<source>` คือแหล่งไฟล์เสียงที่ audio จะพยายามเล่น
- `loop` และ `muted` ใช้ปรับพฤติกรรมการเล่นได้
- `autoplay` ใช้ด้วยความระมัดระวัง เพราะบางสถานการณ์หรือบางเบราว์เซอร์อาจจำกัด
10. Lab สำหรับ Playground
ฝึก 3 ระดับเพื่อฝังเสียงให้สมบูรณ์และตรวจผลได้จริงผ่านระบบ Playground
Lab 1 (พื้นฐาน): เพิ่ม audio พร้อม controls
ชื่อ Lab: ฝังเสียงครั้งแรก เป้าหมาย: เพิ่ม audio player ที่ผู้ใช้ควบคุมได้ โจทย์: ในพื้นที่ที่กำหนด ให้เพิ่ม <audio id="bg-audio" controls> พร้อม <source src="https://commons.wikimedia.org/wiki/Special:FilePath/Azurrot-tobefree-generated.mp3" type="audio/mpeg"> 1 แหล่ง เงื่อนไข: ต้องมี audio พร้อม controls และมี source อย่างน้อย 1 ตัว สิ่งที่ระบบควรตรวจ: selector exists, selector count, source text, attribute value และ browser runtime แนวทางการคิด: เริ่มจากโครง audio -> ใส่ controls -> ใส่ source
Lab 2 (กลาง): เพิ่ม attributes เช่น loop หรือ muted
ชื่อ Lab: ปรับพฤติกรรมการเล่นเสียง เป้าหมาย: ใช้ attributes พื้นฐานเพื่อควบคุมพฤติกรรม audio โจทย์: สร้าง <audio id="focus-audio" controls loop muted> พร้อม source mp3 1 ตัว เงื่อนไข: ต้องมี controls, loop และ muted ครบทั้ง 3 attribute สิ่งที่ระบบควรตรวจ: selector exists, selector count, source text, attribute value และ browser runtime แนวทางการคิด: ตั้ง attributes ที่แท็ก audio โดยตรง แล้วค่อยเติม source
Lab 3 (ท้าทาย): แก้โค้ดที่ฝัง audio ไม่สมบูรณ์
ชื่อ Lab: ซ่อม audio ให้ใช้งานได้ เป้าหมาย: แก้โค้ด audio ที่ขาดส่วนสำคัญ โจทย์: จากโค้ดตั้งต้น ให้แก้ <audio id="podcast-audio"> ให้มี controls, มี source type="audio/mpeg" และมี fallback text เงื่อนไข: ต้องคง id เดิมเป็น podcast-audio และข้อความปุ่มอื่น ๆ ในหน้าไม่เกี่ยวข้อง สิ่งที่ระบบควรตรวจ: selector exists, selector count, source text, attribute value และ browser runtime แนวทางการคิด: ตรวจ 3 จุดหลักคือ controls, source และ fallback text