ใน HTML เวอร์ชันก่อนหน้า การที่เราจะนำไฟล์เสียงมาแสดงผลบนเว็บบราวเซอร์นั้นทำได้ค่อนข้างยาก โดยเฉพาะการแสดงผลดังกล่าวต้องอาศัย Plug-in หรือ Player ต่างๆ ซึ่งผู้ใช้จำเป็นต้องดาวน์โหลด Plug-in หรือ Player นั้นๆ มาทำการติดตั้งก่อน จึงจะสามารถรับฟังไฟล์เสียงที่แสดงผลบนเว็บบราวเซอร์นั้นๆ ได้
แต่สำหรับ HTML5 จะมีการเพิ่ม Tag สำหรับการเรียกใช้งานไฟล์เสียงได้ง่ายมากขึ้น นั่นก็คือ Tag นั่นเอง สำหรับการใช้งานสามารถทำได้ง่ายๆ ดังนี้
ตัวอย่างเช่น
โดย Tag Audio ของ HTML5 จะรองรับเว็บบราวเซอร์ รวมถึงชนิดของไฟล์เสียงต่างๆ ดังต่อไปนี้
ที่มา : http://www.w3schools.com/html/html5_audio.asp
ต่อจากนี้เราลองมาเขียน Music Playlist ง่ายๆ ด้วย Tag Audio ของ HTML5 กันดูดีกว่า ส่วนของโค้ดจะประกอบด้วย 2 ส่วน ดังนี้
ส่วนของ Header จะเป็นการใส่โค้ดส่วนของ CSS และฟังก์ชัน Java Script เพื่อเรียกใช้งานต่อไป
ส่วนของไฟล์ CSS สําหรับตกแต่งหน้าเว็บไซต์
ส่วนของฟังก์ชัน Java Script เรียกใช้งานเพื่อเปลี่ยนเพลง
ส่วนของ Body จะเป็นส่วนของการแสดงผลทั้งหมดที่หน้าเว็บไซต์ เขียนตามโค้ดด้านล่างนี้ได้เลย
เราสามารถเช็กว่าเว็บบราวเซอร์ของผู้ใช้รองรับ Tag Audio ของ HTML5 หรือไม่ ได้ง่ายๆ ด้วยการใส่ข้อความ เช่น “เว็บบราวเซอร์ของคุณไม่รองรับ Tag Audio (HTML5)” ไว้ภายใน Tag Audio ได้ทันที ดังภาพตัวอย่างด้านบน ซึ่งถ้าเว็บบราวเซอร์ของผู้ใช้ไม่รองรับจะแสดงข้อความดังกล่าวขึ้นมา แต่ถ้าเว็บบราวเซอร์รองรับ Tag Audio ก็จะแสดงผลดังภาพด้านล่าง
ซึ่งเมื่อเราทำการคลิกที่ชื่อเพลง 01, 02 หรือ 03 ชื่อเพลงด้านหน้าก็จะเปลี่ยนไป พร้อมทั้งกดปุ่ม Play เพื่อเล่นเพลงนั้นๆ ตามต้องการได้เลย
ส่วนของการแสดงผลตัว Player แต่ละเว็บบราวเซอร์อาจจะไม่เหมือนกัน ภาพด้านบนจะเป็นการแสดงผลบนเว็บบราวเซอร์ Google Chrome ยังไงต้องลองไปปรับใช้งานกันดู
