Tutorial ini terutama untuk menunjukkan penambahan baru ke HTML5
Gambar di atas adalah antarmuka UI dari pemutar audio ini, yang juga menyembunyikan daftar putar lagu. Kecuali untuk gambar potret di latar belakang besar dan peringkat bintang lagu, UI seluruh pemain menggunakan gambar dan digambar oleh CSS dan font-face. Satu -satunya hal yang tampaknya sulit adalah produksi CD dan cakram. Ketika lagu tersebut diputar, CD dan disk memiliki efek interaksi animasi. Ini akan dijelaskan di bagian selanjutnya. Klik CD Player untuk membuka daftar putar ~
Karena tutorial ini terutama untuk menunjukkan penggunaan API DOM dari tag <diSo> baru dan elemen audio yang ditambahkan ke HTML5, undian pemain UI tidak akan dijelaskan secara rinci di sini. Jika Anda memiliki pertanyaan, Anda dapat melihat komentar dari file CSS sendiri atau meninggalkan pesan di bawah ini.
Fungsi utama:1. Putar, jeda, lagu sebelumnya, lagu berikutnya, peningkatan volume dan penurunan
2. Klik CD untuk membuka dan menutup daftar putar
3. Anda dapat menyeret file musik lokal ke pemutar untuk pemutaran.
Struktur HTML
Salin kode