คำนำ: นี่เป็นบทสรุปของการสาธิตเล็ก ๆ ที่ฉันได้เรียนรู้เมื่อเร็ว ๆ นี้ มันยังคงเป็นวิธีที่ยาวนานในการใช้งาน แต่ก็ยังดีที่จะฝึกฝนและรวมคะแนนความรู้ เมื่อเร็ว ๆ นี้ฉันกำลังเรียกดูซอร์สโค้ดของหนังสือ JS และ boostrap.css หลังจากทำการสาธิตนี้มันเป็นจุดสิ้นสุดชั่วคราว ถัดไปคือซอร์สโค้ดของ jQuery และซอร์สโค้ดของ boostrap.js งานนี้ลำบากมาก มาเลยฉันจะไม่โพสต์รหัสในบทความทั้งหมด หากคุณสนใจคุณสามารถส่งข้อความถึงฉันและคุณสามารถส่งรหัสให้คุณ ~
ข้อความ:
อันดับแรกการเรนเดอร์
1. เลย์เอาต์: เค้าโครงที่ตอบสนองและปรับตัวใน boostrap ไม่สามารถกำจัดได้ แถวซ้อนกันในคอนเทนเนอร์นั้นจะซ้อนกันและหลัก (แท็กใหม่ H5) และ div (id = "musicconsole") ตามลำดับ นอกเหนือจากรายการเพลงทางด้านซ้ายหลักคือกล่องแสดงผลเนื้อเพลงทางด้านขวาและ DIV เป็นกล่องควบคุมด้านล่าง
2. ฟังก์ชั่นการใช้งานหลัก:
(1) เพิ่มเพลง (ไอคอน "+" ที่มุมขวาบนของรายการเพลง) และลบเพลง (ไอคอน "Trump" ที่มุมบนขวาของรายการเพลง)
(2) คลิกที่เพลงในรายการเพลง: สำหรับแทร็กจะเล่น; ถ้ามีเนื้อเพลงเนื้อเพลงจะปรากฏขึ้นและถ้าไม่มีเนื้อเพลง "เนื้อเพลง" จะแสดง; แถบความคืบหน้าและเวลาจะเปลี่ยนไปเมื่อเพลงเล่น
(3) คลิกปุ่มก่อนหน้า (แนวตั้ง + สามเหลี่ยม) และเพลงก่อนหน้าจะเล่น: ถ้ามีเนื้อเพลงเนื้อเพลงจะแสดงการเลื่อนและถ้าไม่มีเนื้อเพลง "เนื้อเพลงไม่มี" จะปรากฏขึ้น; แถบความคืบหน้าและเวลาจะเปลี่ยนไปเมื่อเพลงเล่น
การคลิกปุ่มเล่น (สามเหลี่ยม) จะเปลี่ยนเป็นปุ่มหยุดชั่วคราว (เส้นแนวตั้งคู่) และเพลงจะเปลี่ยนจากสถานะการเล่นเป็นสถานะหยุดชั่วคราว
คลิกปุ่มถัดไป (สามเหลี่ยม + เส้นแนวตั้ง) และเพลงถัดไปจะเล่น: ถ้ามีเนื้อเพลงเนื้อเพลงจะปรากฏขึ้นและถ้าไม่มีเนื้อเพลง "ไม่มีเนื้อเพลง" แถบความคืบหน้าและเวลาจะเปลี่ยนไปเมื่อเพลงเล่น
การคลิกปุ่มเสียง (ลำโพง) มันจะกลายเป็นปุ่มปิดเสียง (ลำโพง + "x") และเพลงก็จะปิดเสียงตาม
การคลิกปุ่มลูป (วงกลมด้วยลูกศร) จะกลายเป็นการเล่นเดี่ยว กดปุ่มลูปและลูปเดียวจะถูกทำซ้ำ
3. ปัญหาที่พบ:
(1) ขนาดของ glyphicon เปลี่ยนไปตามขนาดตัวอักษร
เนื่องจากใช้ไอคอน boostrap ขนาดเริ่มต้นจึงเล็กเกินไป ฉันลองใช้ความกว้างและความสูง แต่ไม่ตอบสนอง ฉันรู้ว่าฉันใช้ขนาดตัวอักษรเพื่อเปลี่ยนขนาด
(2) str.replace (oldstr, NewsTR)
เมื่อคลิกปุ่มเล่นสถานะการเล่นจะเปลี่ยนไปและไอคอนปุ่มจะเปลี่ยนไปตามนั้น ดังนั้นจึงใช้แทนที่ แต่ก็ไม่ได้ตอบกลับมาเป็นเวลานาน ปรากฎว่าเป็นเพราะมันกำลังสร้างสตริงใหม่ไม่ได้โดยตรงบนสตริงดั้งเดิม Orz
(3) เป็นเรื่องยากสำหรับเบราว์เซอร์ที่จะอ่านไฟล์ในพื้นที่เนื่องจากข้อควรพิจารณาด้านความปลอดภัย
เดิมทีฉันวางแผนที่จะใช้ LocalStorage เพื่อเก็บเนื้อหาในรายการเพลง แต่ฉันลองใช้กับ Filereader ของ H5 มานาน แต่ก็ไม่มีทาง ฉันต้องยอมแพ้
filereader สามารถใช้อ่านรูปภาพหรือไฟล์ HTML วิธี ReadasDataUrl สามารถรับเส้นทางไฟล์ได้ เมื่อพูดถึงเรื่องนี้ฉันอยากจะหัวเราะจริงๆ ฉันพยายามบันทึกไฟล์เพลง โอเคไปกันเถอะ LocalStorage หมดหน่วยความจำหรือไม่? 5m บันทึกเส้นทางไฟล์? ตลกฉัน?
คำถามต่อไปนี้ทั้งหมดอยู่ในเนื้อเพลง - - ฉันรู้สึกเหนื่อยมากเมื่อทำ - -
(4) ปัญหาที่พบเมื่อวิเคราะห์เนื้อเพลง
เนื้อเพลงมักจะเป็นไฟล์ LRC แต่เป็นข้อความธรรมดา ใช้ AJAX เพื่อรับข้อมูลที่ส่งจากพื้นหลัง แต่ไม่มีพื้นหลังที่จะเล่นกับฉันดังนั้นฉันสามารถคัดลอกเนื้อเพลงได้โดยตรงและเขียนในสตริงเป็นข้อมูลที่ตายแล้ว
เดิมทีมีการวางแผนที่จะใช้ Split ('/r/n') เพื่อแบ่งสตริงเป็นเนื้อเพลงของประโยคด้วยประโยคและวางไว้ในอาร์เรย์
เป็นผลให้ฉันรายงานข้อผิดพลาดต่าง ๆ หลังจากทำงานเป็นเวลานานในที่สุดฉันก็พบมันในการแยกนี้ ฉันตรวจสอบออนไลน์เป็นเวลานานและมันก็กลายเป็น JS Pot
เนื่องจากไวยากรณ์ JS ไม่ได้บังคับให้มีการเพิ่มเครื่องหมายอัฒภาคที่จะเพิ่มในตอนท้ายโดยใช้การแบ่งสายของระบบ (เช่นการคืนค่าการขนส่ง) จะติดอยู่ มีแผนการตอบสนองหลักสองแผน:
1) ลบอักขระใหม่ด้วยตนเองและใช้ /n ใหม่ไลน์แทน โซลูชันนี้จะมีเอฟเฟกต์ใหม่บนหน้า
2) เพิ่ม / ก่อนอักขระตัวแบ่งสายระบบโครงการนี้ไม่มีเอฟเฟกต์การแบ่งบรรทัดในหน้า
(5) ปัญหาที่พบเมื่อเลื่อนเนื้อเพลง
หลังจากเพิ่มเนื้อเพลงให้สำเร็จมันจะปรากฏขึ้นอย่างสมบูรณ์แบบ แต่จะต้องซิงโครไนซ์กับเพลง เมื่อเปรียบเทียบกับเวลาเล่นในปัจจุบันรายการเนื้อเพลงที่สอดคล้องกันจะเคลื่อนที่ขึ้นไปเมื่อเนื้อเพลงว่างเปล่าการตัดสินขอบเขตสุดท้ายและหลังจากปัญหาทั้งหมดนี้ได้รับการแก้ไขแล้วการเล่นแบบวนรอบจะปรากฏขึ้นและเนื้อเพลงไม่สามารถแสดงได้อีกครั้ง หลังจากนั้นไม่นานฉันก็ไปที่นั่น มันเป็นเพราะเมื่อลูป = จริงเหตุการณ์สิ้นสุดไม่สามารถฟังได้ ไม่มีทางดังนั้นฉันจึงสามารถละทิ้งลูปและเพิ่มการตัดสินของลูปลงในเหตุการณ์สิ้นสุด
ดีมากแสดงอย่างสมบูรณ์แบบและฉันตื่นเต้นเล็กน้อย มันยุ่งเหยิงเล็กน้อยทุกที่และการทดสอบแสดงให้เห็นว่ามีปัญหาใด ๆ เมื่อฉันคิดว่ามันจะเป็นไปได้ที่จะเสร็จสิ้นฉันทำผิดพลาดอีกครั้ง [Indifference.jpg] ดังนั้นเรามาปรับ ก่อนอื่นหาเหตุผลสำหรับข้อผิดพลาด ในเครื่องมือนักพัฒนา F12 (ฉันไปที่ Baidu ซึ่งเป็นสิ่งที่ฉันเขียนไว้ด้านบน) ฉันเห็นว่าเนื้อเพลงสองตัวได้รับการเพิ่มในเวลาเดียวกันดังนั้นการเลื่อนขึ้นจะเร็วมากและมันจะกระโดดขึ้นและลงสักพัก ผู้กระทำผิดถูกพบ, settimeout เนื่องจากเป็นสายเรียกซ้ำจึงจำเป็นต้องมีการเรียกใช้ clcleartimeout เพื่อล้าง ตกลงตอนนี้ไม่มีปัญหา
ในภายหลัง:
อาและเพราะฉันรู้สึกทึ่งกับกวางแดงเมื่อเร็ว ๆ นี้ฉันได้ตั้งชื่อผู้เล่นของฉันว่า "ผู้เล่นโมร็อกโก" ~ [บิ๊กบราเดอร์บิร์ต] ใช้เวลาสามวันในการสาธิตนี้และเนื้อเพลงเพียงอย่างเดียวได้รับการปรับมากกว่าครึ่งเวลา และคุณจะเห็นว่าปัญหาหลักที่พบคือปัญหาการแสดงผลของเนื้อเพลงและฉันเมา อย่างไรก็ตามไม่ว่าจะเกิดอะไรขึ้นในที่สุดฉันก็ทำมัน เมื่อเห็นว่าในที่สุดมันก็เปิดออกตามปกติความรู้สึกของความสำเร็จยังคงดีมาก แม้ว่ามันจะเสร็จสิ้นเช่นเดียวกับที่ฉันเขียนบล็อกนี้ฉันพบข้อผิดพลาด ORZ อีกครั้ง
ข้างต้นคือสิ่งที่ตัวแก้ไขแนะนำให้คุณสร้างเครื่องเล่นเพลงอย่างง่ายโดยใช้ HTML5+Boostrap ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับทุกคนในเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!