cljs karaoke client

cljs-karaoke-client

ผู้เล่นคาราโอเกะเว็บที่ใช้ใน Clojurescript

การสาธิต

โรลลิ่งสโตน - ตอนนี้

คำอธิบาย

ความพยายามของฉันในการสร้างผู้เล่นคาราโอเกะที่ดี เป็นเวลาหลายปีที่ฉันได้พยายามหาโซลูชันคาราโอเกะซอฟต์แวร์ที่ดีด้วยความสำเร็จเพียงเล็กน้อยทางเลือกหลักที่มีทั้งเกมเช่น UltraStar, Frets on Fire, ฯลฯ หรือรวบรวมวิดีโอคาราโอเกะ YouTube เข้าด้วยกัน

ทางเลือกทั้งสองเสนอแคตตาล็อกเพลงที่กว้างที่คุณสามารถเข้าถึงได้อย่างอิสระผ่านอินเทอร์เน็ต แต่มีข้อเสียบางอย่าง:

• เพลงออนไลน์สำหรับเกมเช่น ultrastar บ่อยกว่าไม่ใช้เพลงเพลงดั้งเดิมกับเสียงร้องซึ่งในความคิดของฉันเรียงลำดับการฆ่า "ประสบการณ์คาราโอเกะ"
• การซิงโครไนซ์เนื้อเพลงแตกต่างกันอย่างมาก (บางอย่างเพียงแค่แสดงบททั้งหมดในครั้งเดียวในขณะที่คนอื่นมีเนื้อเพลงที่ซิงค์ในระดับพยางค์) เมื่อใช้วิดีโอคาราโอเกะ YouTube

ความยากลำบากหลักคือการได้รับเนื้อเพลงที่มีข้อมูลการซิงค์ฉันพบไฟล์ MIDI จำนวนมากบนเว็บดูเหมือนจะใช้สำหรับเครื่องคาราโอเกะ ไฟล์เหล่านี้มีเนื้อเพลงซิงค์ไปจนถึงระดับพยางค์ เนื่องจากไม่มีมาตรฐานเกี่ยวกับวิธีการจัดเก็บเนื้อเพลงในไฟล์ MIDI สำหรับเครื่องคาราโอเกะหลายคนจึงมีความแตกต่างเล็กน้อยในวิธีที่พวกเขาเก็บไว้ดังนั้นเมื่อแยกวิเคราะห์ไฟล์เหล่านี้ฉันได้ทำสมมติฐานขั้นต้นมากมายและแยกเนื้อเพลงเพื่อแยกไฟล์พร้อมกับข้อมูลเวลา ส่วนใหญ่โอเค แต่หลายคนก็ไม่ได้รับการชดเชยตัวแปรเล็กน้อย

ตัวแยกวิเคราะห์ MIDI อยู่ในโครงการแยกต่างหาก: CLJ-KARAOKE

ความยากลำบากอีกประการหนึ่งคือการได้รับเพลงเพลงเนื่องจากเนื้อเพลงถูกซิงค์กับแทร็กเสียง MIDI สิ่งที่ต้องทำคือการใช้สิ่งนั้น ตอนแรกฉันตั้งใจจะใช้ไฟล์ MIDI โดยตรงสำหรับแทร็กเสียง แต่เมื่อเล่นเสียงคุณภาพขึ้นอยู่กับแบบอักษรเสียงที่คุณติดตั้งและตั้งค่า Env ที่ดีสำหรับผลลัพธ์ที่ดีไม่ใช่งานเล็กน้อย นอกจากนี้หากฉันต้องการเล่นไฟล์เหล่านี้บนเว็บไคลเอนต์การคำนึงถึงสิ่งเหล่านี้ทั้งหมดทำให้สิ่งต่าง ๆ ซับซ้อนขึ้น ดังนั้นฉันจึงตัดสินด้วยการแยกเนื้อเพลงเพื่อแยกไฟล์และการแสดงผล MIDIS ไปยังไฟล์ MP3 โดยใช้ความขี้ขลาดซึ่งค่อนข้างยอดเยี่ยมและฉันสามารถทดลองกับคอลเลกชันฟอนต์เสียงที่แตกต่างกัน

คุณสมบัติ

• เพลงมากมาย
• ภาพพื้นหลังสำหรับเพลงจะถูกดึงมาจากเว็บแบบไดนามิกหลังจากการค้นหาของ Google ในระหว่างการโหลดเพลง (ถ้าไม่มีแคช)
  • ผู้ใช้แต่ละคนแคชพื้นหลังท้องถิ่นของพวกเขาและผลัก URL เป็นระยะ ๆ ไปยัง DB Mongo DB การค้นหาที่กำหนดเองของ Google มีขีด จำกัด รายวันดังนั้นฉันจึงพยายามลดการใช้งานให้น้อยที่สุด
  • ข้อมูลการเริ่มต้น (เนื้อเพลงออฟเซ็ตภาพ BG) ปรับปรุงในระหว่างการสร้างโดยการรวบรวมข้อมูลจากผู้ใช้
• ความสามารถในการซิงค์เนื้อเพลงโดยออฟเซ็ตใน miliseconds (ไม่ว่าจะมาจากแผงควบคุมหรือโดยการต่อท้ายสตริงการสืบค้นกับ URL)
• เพลย์ลิสต์อัตโนมัติที่สร้างขึ้นจากเพลงที่ซิงค์ก่อนหน้านี้
• ส่งออกข้อมูลการซิงค์เพลงท้องถิ่นเพื่อให้สามารถรวมเข้ากับข้อมูลการซิงค์ฝั่งเซิร์ฟเวอร์
• อินพุตเสียงทดลองสำหรับเดสก์ท็อป firefox และโครเมี่ย
• การบันทึกเว็บแคมทดลองและส่งออกวิดีโอไปยังไฟล์ WebM ช่องสัญญาณเสียงในวิดีโอที่ส่งออกเป็นผลมาจากการผสมอินพุตไมโครโฟนกับเอฟเฟกต์และแทร็กเพลง
• การควบคุมระยะไกล เรียกใช้แอปพลิเคชันบนหน้าจอขนาดใหญ่และการเล่นควบคุมจากอินสแตนซ์แอปพลิเคชันอื่น (ตัวอย่างเช่นจากอุปกรณ์มือถือของคุณ!)
• สร้างหน้าเพลงก่อนการเรนเดอร์ด้วยแท็ก SEO เพื่อให้คุณสามารถแชร์ลิงก์ในเครือข่ายโซเชียลเป็นการ์ดที่ดูสวยด้วยชื่อเพลงและรูปภาพหากมี
  • 
• บรรณาธิการเนื้อเพลงสำหรับการซิงค์เพลงใหม่กับเนื้อเพลง
  • เลือกไฟล์เสียง
  • เพิ่มข้อความแบ่งออกเป็นพยางค์ (หรือเพียงแค่ชิ้นสุ่ม)
  • เล่นแทร็กของคุณและแตะปุ่ม "ซิงค์" สำหรับแต่ละชิ้น
  • หากคุณต้องการความแม่นยำมากขึ้นคุณอาจชะลอตัวลงแทร็กลดอัตราการเล่น

การทำงาน

• ขนาดตัวอักษรแบบไดนามิกปรับขนาดตัวอักษรให้เหมาะสมสำหรับชื่อเพลง แต่ฉันกำลังมองหาวิธีที่จะปรับปรุงการแสดงเนื้อเพลงเช่นกัน
• วิธีการจับภาพเนื้อเพลงที่กำหนดเองจากผู้ใช้ทุกคนการรวมสิ่งเหล่านี้เป็นค่าเริ่มต้นในรุ่นต่อ ๆ ไป
• สิ่งเดียวกันกับพื้นหลังเพลงปัจจุบัน Google Custom Search ใช้เพื่อค้นหารูปภาพที่เกี่ยวข้องกับชื่อเพลงมีโควต้าสำหรับบริการนี้และค่อนข้างต่ำยิ่งเราต้องค้นหาดีกว่า

ทำงานในพื้นที่

ข้อกำหนดเบื้องต้น:

• JDK
• เงา

$ npm i -g shadow-cljs 
$ npm install
$ shadow-cljs watch app

หากคุณต้องการรวบรวมการสร้างรุ่นคุณอาจเรียกใช้สิ่งต่อไปนี้:

$ shadow-cljs release app

งานสร้างจะอยู่ในไดเรกทอรี /public

การผูกกุญแจ

• "ESC": หยุดเล่น
• "LR": โหลดเพลง
• "Alt-O": เปิดใช้งาน optons ในโหมดการเล่น
• "alt-h": เปิดใช้งานโหมดแผงควบคุม
• "ซ้าย": เสียงค้นหาย้อนหลัง
• เสียง "ขวา" แสวงหาไปข้างหน้า
• "Meta-Shift-L": โหมดลูป (ขณะนี้ทำงานอยู่)
• "alt-shift-p": เล่น
• "Shift-Right": เพลงถัดไปในเพลย์ลิสต์
• "TT": Toasty!
• "H": แสดง Cheatsheet

งานในอนาคต

• ภาพ Raspberry Pi
• เนื้อเพลงซิงค์บรรณาธิการ