SundousKanaan/Music-maker

this is a site that allows the user to play with notes using a simple piano pad. With two piano boards, one for chords and the other for solo notes, the user has the ability to choose what they want to play.

Project 2 @cmda-minor-web 2022 - 2023

Responsible IT Hackathon

Techniques learned at:

• Browser Technologies
• Progressive Web Apps worden toegepast bij het bouwen van de de prototypes.

Code techniques:

• Nodejs
• Servic Worker
• ejs
• css
• Javascript
• Tone.js
  • miro
    • API
      • online json formatter
    • RS src
    • tone.js

live demo

Music maker

Assignment: AI musical instrument

A front-end for a musical instrument that generates music visualizations based on data. You want to give the user the opportunity to customize the end result. "Things" like DALL-E and Midjourney have a fairly linear output, namely an input and an output. During this project, a user wants to "steer" the output with multiple moments of input.

My work

Sketch ideas

The end result

I've built a site that allows the user to play with notes using a simple piano pad. With two piano boards, one for chords and the other for solo notes, the user has the ability to choose what they want to play.

Dark mode

The dark mode can be active with the mode button or the device mode

Test

First test:

The reaction was positive, but I noticed some negative points:

• Additional buttons (Reset\Add Piano\ dark mode) are small.
• The additional buttons (adding a piano / dark mode) are located in the lowest corners, so they were not quickly noticed.
• Fix colors when changing the modث.
• The pause button did not appear after playing the tones

The second test:

I fixed a large part of the previous mistakes from the first test. The reaction was positive and I was fortunate that this person had some knowledge of the piano.

He was confused at first because the tone symbols didn't match the buttons like they would on a real piano so he advised me to try to improve on that.

I fixed the button labels, but I wasn't able to get them to exactly match a real piano because the tone.js library lacks an array showing what notes it contains or a separate text file containing this information so the workability for me was limited.

inspiratie:

• code pen 1
• code pen 2
• code pen 3
• code pen 4
• code pen 5
• code pen 6

last checklist and features

• Responsive ✅
• Work with the big touch screens ✅
• Dark & light mode ✅
• Node js ✅
• PWA App ✅
• Service Worker ✅
• Offline ✅
• Downloadable ✅
• The piano works with keyboard (tab/speac/enter) ✅
• The piano works with letters from the keyboard ❌
• work good on Chrome, Firefox and Samsung Internet ✅
• No JS?

Sources

• icons
• How HTTP POST request work in Node.js?
• node-fetch
• ejs
• Service Worker

---

I did this project for my third year school project.