music practice tools

เครื่องมือปฏิบัติงานดนตรี

เครื่องมือที่จะช่วยในการฝึกฝนดนตรีและการปรับปรุงดนตรีรวมถึงบทเรียนระยะไกล

รูปแบบคือบล็อก / วารสารที่มีองค์ประกอบแบบโต้ตอบเพื่อทำให้ชีวิตง่ายขึ้น เหล่านี้รวมถึง:

• Metronomes ที่มี BPM ที่กำหนดไว้ล่วงหน้า
• [quasi] โน้ตสุ่มและตัวเลือกหมายเลข (รายการทั้งหมดในช่วงจะถูกนำเสนอ)
• จับเวลากิจกรรมที่ผ่านไปและเวลาทั้งหมดที่ยังคงอยู่ระหว่างหน้าและเซสชัน
• ตัวจับเวลาวิดีโอของคุณที่มองเห็นได้เสมอโดยไม่คำนึงถึงการเลื่อน
• วิดีโอค้นหาวิดีโอ
• การให้คะแนนเพลงโดยใช้สัญลักษณ์ ABC ให้คุณสมบัติการเล่นแบบโต้ตอบ

ใช้เทคโนโลยี OpenSource ที่ยอดเยี่ยมนี้

หน้าทั้งหมดอาศัยอยู่ในโฟลเดอร์ pages และถูกเขียนขึ้นโดยใช้ nunjucks templated markdown ซึ่งแสดงโดยเครื่องกำเนิดไซต์คงที่ 11 สิบที่ยอดเยี่ยม วิดเจ็ตถูกเพิ่มด้วยรหัสย่อ

สิ่งนี้ใช้แพลตฟอร์มการพัฒนา NodeJS ทั่วไปดังนั้น:

• โคลน repo
• npm install
• npm run devall
• แก้ไขหน้า
• เรียกดู URL ในพื้นที่ที่พิมพ์บน CLI (โดยปกติจะ http://localhost:8080/ )

---

รับ https://musicpracticetools.net/ เวอร์ชันของคุณเองบนเว็บด้วย netlify โดยใช้ปุ่มนี้ มันจะโคลน repo นี้ไปยังบัญชี GitHub ของคุณเองและเชื่อมโยงไปยังเว็บไซต์ใหม่สำหรับคุณใน Netlfy

---

ผู้พัฒนา

ซอร์สโค้ดที่ไม่ใช่หน้าอยู่ใน src ไฟล์กำหนดค่าเครื่องมือ dev ปกติอยู่ในรูทโครงการ

หมายเหตุ

นี่คือเว็บไซต์คงที่โดยใช้เทมเพลต Nunjucks ที่มีจาวาสคริปต์ฝั่งไคลเอ็นต์เล็ก ๆ ที่เพิ่มเข้ามาสำหรับพฤติกรรมเพื่อให้วิดเจ็ตแบบโต้ตอบ โครงการนี้ขึ้นอยู่กับตัวอย่างบล็อก 11 สิบซึ่งรองรับแท็ก

รหัสย่อของเทมเพลตใช้สำหรับวิดเจ็ตแบบโต้ตอบที่กำหนดเอง สิ่งเหล่านี้ให้ประสบการณ์การเขียนที่สะอาด แต่หมายถึงรหัสวิดเจ็ตบางตัวเป็นฝั่งเซิร์ฟเวอร์และฝั่งไคลเอ็นต์ โดยทั่วไปแล้วซอร์สโค้ดภายใต้ src คือ:

• เทมเพลตหน้าใน pages
• 11 สิบกำหนดค่าใน _11ty*
• เทมเพลตส่วนหนึ่งและเค้าโครงใน _includes และ _layouts
• รหัสวิดเจ็ตด้านเซิร์ฟเวอร์ (html + alpinejs) อยู่ใน _11tyadd-shortcodes.js
• รหัสฝั่งไคลเอ็นต์รวมถึงวิดเจ็ต (JavaScript และ AlpineJs) อยู่ใน js*
• CSS ฝั่งไคลเอ็นต์อยู่ใน css*

รหัสลูกค้าถือว่าเบราว์เซอร์ล่าสุดโดยใช้คุณสมบัติ ES6 เพื่อปรับปรุง DX

เมื่อเรียกใช้ npm run dev 11TY สร้างเว็บไซต์จาก src ไปยัง _site ซึ่งจะให้บริการ การเปลี่ยนแปลงไฟล์ฝั่งไคลเอ็นต์ทำให้เกิดการสร้างไซต์ใหม่และเบราว์เซอร์ซินซีบังคับให้เบราว์เซอร์รีเฟรช อย่างไรก็ตามเมื่อไฟล์เซิร์ฟเวอร์ใน _11ty เปลี่ยนไซต์จะต้องมีการสร้างใหม่ npm run devall บังคับให้สร้างใหม่ในกรณีนี้ แต่จากนั้นเบราว์เซอร์จะไม่รีเฟรช การกด F5 เพื่อแก้ไขเบราว์เซอร์ในกรณีนี้

ฉันพัฒนาบน Windows โดยใช้รหัส VS ในทฤษฎีแพลตฟอร์ม Linux และ Mac dev ควรใช้งานได้