มาทำ Playlist ง่ายๆ ด้วย HTML5 กันนน…

ใน HTML เวอร์ชันก่อนหน้า การที่เราจะนำไฟล์เสียงมาแสดงผลบนเว็บบราวเซอร์นั้นทำได้ค่อนข้างยาก โดยเฉพาะการแสดงผลดังกล่าวต้องอาศัย Plug-in หรือ Player ต่างๆ ซึ่งผู้ใช้จำเป็นต้องดาวน์โหลด Plug-in หรือ Player นั้นๆ มาทำการติดตั้งก่อน จึงจะสามารถรับฟังไฟล์เสียงที่แสดงผลบนเว็บบราวเซอร์นั้นๆ ได้

แต่สำหรับ HTML5 จะมีการเพิ่ม Tag สำหรับการเรียกใช้งานไฟล์เสียงได้ง่ายมากขึ้น นั่นก็คือ Tag นั่นเอง สำหรับการใช้งานสามารถทำได้ง่ายๆ ดังนี้

ตัวอย่างเช่น

โดย Tag Audio ของ HTML5 จะรองรับเว็บบราวเซอร์ รวมถึงชนิดของไฟล์เสียงต่างๆ ดังต่อไปนี้

001
ที่มา : http://www.w3schools.com/html/html5_audio.asp

ต่อจากนี้เราลองมาเขียน Music Playlist ง่ายๆ ด้วย Tag Audio ของ HTML5 กันดูดีกว่า ส่วนของโค้ดจะประกอบด้วย 2 ส่วน ดังนี้

002

ส่วนของ Header จะเป็นการใส่โค้ดส่วนของ CSS และฟังก์ชัน Java Script เพื่อเรียกใช้งานต่อไป

003

ส่วนของไฟล์ CSS สําหรับตกแต่งหน้าเว็บไซต์

004

ส่วนของฟังก์ชัน Java Script เรียกใช้งานเพื่อเปลี่ยนเพลง
ส่วนของ Body จะเป็นส่วนของการแสดงผลทั้งหมดที่หน้าเว็บไซต์ เขียนตามโค้ดด้านล่างนี้ได้เลย

005

เราสามารถเช็กว่าเว็บบราวเซอร์ของผู้ใช้รองรับ Tag Audio ของ HTML5 หรือไม่ ได้ง่ายๆ ด้วยการใส่ข้อความ เช่น “เว็บบราวเซอร์ของคุณไม่รองรับ Tag Audio (HTML5)” ไว้ภายใน Tag Audio ได้ทันที ดังภาพตัวอย่างด้านบน ซึ่งถ้าเว็บบราวเซอร์ของผู้ใช้ไม่รองรับจะแสดงข้อความดังกล่าวขึ้นมา แต่ถ้าเว็บบราวเซอร์รองรับ Tag Audio ก็จะแสดงผลดังภาพด้านล่าง

006

ซึ่งเมื่อเราทำการคลิกที่ชื่อเพลง 01, 02 หรือ 03 ชื่อเพลงด้านหน้าก็จะเปลี่ยนไป พร้อมทั้งกดปุ่ม Play เพื่อเล่นเพลงนั้นๆ ตามต้องการได้เลย

ส่วนของการแสดงผลตัว Player แต่ละเว็บบราวเซอร์อาจจะไม่เหมือนกัน ภาพด้านบนจะเป็นการแสดงผลบนเว็บบราวเซอร์ Google Chrome ยังไงต้องลองไปปรับใช้งานกันดู

LEAVE A REPLY

Please enter your comment!
Please enter your name here