Pendahuluan: Ini adalah ringkasan dari demo kecil yang telah saya pelajari baru -baru ini. Masih jauh untuk menggunakannya, tetapi masih baik untuk berlatih dan mengkonsolidasikan poin pengetahuan. Baru -baru ini, saya menelusuri kode sumber buku JS dan boostrap.css. Setelah melakukan demo ini, ini adalah akhir sementara. Berikutnya adalah kode sumber jQuery dan kode sumber boostrap.js. Tugasnya sangat sulit. Ayo, saya tidak akan memposting kode di seluruh artikel. Jika Anda tertarik, Anda dapat mengirimi saya pesan dan Anda dapat memberikan kode kepada Anda ~
teks:
Pertama, rendering
1. Tata Letak: Tata letak yang responsif dan adaptif di boostrap tidak dapat dihilangkan. Baris bersarang dalam wadah kemudian disingkirkan dan utama (tag baru H5) dan div (id = "musicconsole") masing -masing. Selain itu adalah daftar musik di sebelah kiri, utama adalah kotak tampilan lirik di sebelah kanan, dan Div adalah kotak kontrol di bawah ini.
2. Fungsi Implementasi Utama:
(1) Tambahkan lagu (ikon "+" di sudut kanan atas daftar lagu) dan hapus lagu (ikon "Trump" di sudut kanan atas daftar lagu)
(2) Klik pada lagu dalam daftar lagu: untuk trek akan diputar; Jika ada lirik, liriknya akan ditampilkan, dan jika tidak ada lirik, "lirik tidak ada" akan ditampilkan; Bilah dan waktu kemajuan akan berubah saat lagu diputar.
(3) Klik tombol sebelumnya (garis vertikal + segitiga) dan lagu sebelumnya akan diputar: jika ada lirik, lirik akan ditampilkan menggulir, dan jika tidak ada lirik, "no lyrics" akan ditampilkan; Bilah dan waktu kemajuan akan berubah saat lagu diputar.
Mengklik tombol play (segitiga) akan berubah ke tombol jeda (garis vertikal ganda), dan lagu juga akan berubah dari status bermain ke status jeda yang sesuai.
Klik tombol berikutnya (segitiga + garis vertikal) dan lagu berikutnya akan diputar: Jika ada lirik, liriknya akan ditampilkan, dan jika tidak ada lirik, "No Lyrics" akan ditampilkan; Bilah dan waktu kemajuan akan berubah saat lagu diputar.
Mengklik tombol audio (speaker), itu akan menjadi tombol bisu (speaker + "x"), dan lagu tersebut juga akan menjadi bisu sesuai.
Mengklik tombol Loop (lingkaran dengan panah) akan menjadi pemutaran tunggal. Simpan tombol Loop dan loop tunggal akan diulangi.
3. Masalah yang ditemui:
(1) Ukuran glifikon diubah oleh ukuran font
Karena ikon boostrap digunakan, ukuran default terlalu kecil. Saya mencoba lebar dan tinggi tetapi tidak menanggapi. Saya menyadari bahwa saya menggunakan ukuran font untuk mengubah ukurannya.
(2) Str.Replace (Oldstr, Newstr)
Saat mengklik tombol Putar, status pemutaran akan diubah, dan ikon tombol akan diubah sesuai. Oleh karena itu, ganti digunakan, tetapi sudah lama tidak merespons. Ternyata itu karena sedang meregenerasi string, bukan langsung pada string asli, orz
(3) Sulit bagi browser untuk membaca file lokal karena pertimbangan keamanan
Saya awalnya berencana menggunakan LocalStorage untuk menyimpan konten dalam daftar musik, tetapi saya mencobanya dengan filereader H5 untuk waktu yang lama, tetapi tidak ada jalan. Saya harus menyerah.
Filereader dapat digunakan untuk membaca gambar atau file HTML. Metode readasdataurlnya bisa mendapatkan jalur file. Berbicara tentang ini, saya benar -benar ingin tertawa. Saya mencoba menyimpan file musik. Oke, ayo pergi, apa? Apakah LocalStorage kehabisan memori? 5M menyimpan jalur file? Lucu aku?
Pertanyaan -pertanyaan berikut ada dalam liriknya. . . Saya merasa sangat lelah saat melakukannya. . .
(4) masalah yang dihadapi saat menganalisis lirik
Liriknya biasanya file LRC, tetapi sebenarnya adalah teks biasa. Gunakan Ajax untuk mendapatkan data yang dikirimkan dari latar belakang, tetapi tidak ada latar belakang untuk dimainkan dengan saya, jadi saya hanya dapat menyalin lirik secara langsung dan menulisnya dalam string sebagai data mati.
Awalnya direncanakan untuk menggunakan split ('/r/n') untuk memecah string menjadi lirik kalimat berdasarkan kalimat dan memasukkannya ke dalam array.
Akibatnya, saya melaporkan berbagai kesalahan. Setelah lama bekerja, saya akhirnya menemukannya di perpecahan ini. Saya memeriksanya secara online untuk waktu yang lama, dan ternyata menjadi JS Pot.
Karena sintaks JS tidak memaksa titik koma untuk ditambahkan di akhir, menggunakan jeda garis sistem (mis., Pengembalian kereta) akan macet. Ada dua rencana respons utama:
1) Hapus karakter garis baru dan gunakan /nline sebagai gantinya. Solusi ini akan memiliki efek garis baru pada halaman.
2) Tambah / Sebelum Karakter Break Garis Sistem, skema ini tidak memiliki efek istirahat garis pada halaman
(5) masalah yang dihadapi saat menggulir lirik
Setelah lirik ditambahkan dengan sukses, itu ditampilkan dengan sempurna, tetapi harus disinkronkan dengan musik. Dibandingkan dengan waktu pemutaran saat ini, seberapa banyak daftar lirik yang sesuai bergerak ke atas, ketika liriknya kosong, penilaian batas akhir, dan setelah semua masalah ini diselesaikan, pemutaran loop muncul, dan lirik tidak dapat ditampilkan lagi. Setelah waktu yang lama, saya pergi ke sana. Itu karena ketika loop = true, acara yang berakhir tidak dapat didengarkan. Tidak ada jalan, jadi saya hanya bisa meninggalkan loop dan menambahkan penilaian loop ke acara yang berakhir.
Yah, ini sangat bagus, ditampilkan dengan sempurna, dan saya sedikit bersemangat. Agak berantakan di mana -mana, dan tes menunjukkan jika ada masalah. Ketika saya pikir itu mungkin untuk menyelesaikannya, saya membuat kesalahan lain [indifference.jpg], jadi mari kita sesuaikan. Pertama temukan alasan kesalahan. Dalam alat pengembang F12 (saya pergi ke Baidu, yang saya tulis di atas), saya melihat bahwa dua lirik telah ditambahkan pada saat yang sama, sehingga pengguliran ke atas akan sangat cepat, dan itu akan melompat ke atas dan ke bawah beberapa saat. Penyebabnya ditemukan, setTimeout. Karena ini adalah panggilan rekursif, ClclearTimeout diperlukan untuk membersihkannya. Oke, pada dasarnya tidak ada masalah sekarang.
Kemudian:
Ah, dan, karena saya terpesona oleh rusa merah baru -baru ini, saya dengan ramah menamai pemain saya "pemain morocco" ~ [Big Brother Bihart] butuh tiga hari untuk membuat demo ini, dan liriknya sendiri disesuaikan lebih dari setengah waktu. Dan Anda dapat melihat bahwa masalah utama yang dihadapi adalah masalah tampilan lirik, dan saya mabuk. Namun, apa pun yang terjadi, saya akhirnya berhasil. Melihat bahwa akhirnya diluncurkan secara normal, rasa prestasi masih sangat baik. Meskipun sudah selesai, sama seperti saya sedang menulis blog ini, saya menemukan kesalahan atau lagi.
Di atas adalah apa yang diperkenalkan editor kepada Anda untuk membuat pemutar musik sederhana menggunakan HTML5+BOOSTRAP. Saya harap ini akan membantu semua orang. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas semua orang tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!