บทช่วยสอนนี้ส่วนใหญ่จะแสดงเพิ่มเติมใหม่ของ HTML5
ภาพด้านบนเป็นอินเทอร์เฟซ UI ของเครื่องเล่นเสียงนี้ซึ่งซ่อนเพลย์ลิสต์ของเพลง ยกเว้นภาพแนวตั้งบนพื้นหลังขนาดใหญ่และการจัดอันดับดาวของเพลง UI ของผู้เล่นทั้งหมดใช้รูปภาพและวาดโดย CSS และ Font-face สิ่งเดียวที่ดูเหมือนยากคือการผลิตซีดีและแผ่นดิสก์ เมื่อเล่นเพลงทั้งซีดีและแผ่นดิสก์มีเอฟเฟกต์การโต้ตอบแบบแอนิเมชั่น สิ่งนี้จะถูกอธิบายในส่วนต่อมา คลิกที่ซีดีของผู้เล่นเพื่อเปิดเพลย์ลิสต์ ~
เนื่องจากบทช่วยสอนนี้ส่วนใหญ่จะแสดงการใช้ DOM API ของแท็ก <Audio> ใหม่และองค์ประกอบเสียงที่เพิ่มเข้ามาใน HTML5 การวาดของผู้เล่น UI จะไม่ถูกอธิบายอย่างละเอียดที่นี่ หากคุณมีคำถามใด ๆ คุณสามารถดูความคิดเห็นของไฟล์ CSS ของเคสด้วยตัวเองหรือฝากข้อความไว้ด้านล่าง
ฟังก์ชั่นหลัก:1. เล่น, หยุดชั่วคราว, เพลงก่อนหน้า, เพลงถัดไป, เสียงเพิ่มขึ้นและลดลง
2. คลิกที่ซีดีเพื่อเปิดและปิดเพลย์ลิสต์
3. คุณสามารถลากไฟล์เพลงท้องถิ่นไปยังผู้เล่นเพื่อเล่น
โครงสร้าง HTML
คัดลอกรหัส