This week, we want you to write a player piano. Well, a program to read a player-piano-esque input and write out the notes to be played, with the correct timing, into an HTML list. Your piano should be able to play notes A-G, plus flats and sharps (ignore the octave, thoughit's a very small piano). Each note in the input will also have a defined start time and a duration. Your program should add an item to the list, noting the time each note is to start playing, and again when it ends. Include "wait" messages as well, indicating how much time there is between subsequent events. The output should be ordered chronologically and displayed all at once. Don't use "setTimeout" or any other delaying mechanism to display the notes according to the listed times.

Here's an example of how this might look, playing a chord of A + B, adding a C, then all stopping at once.

Javascript

let my_song = [ { note: 'A', starts_at: 0, lasts: 3 }, { note: 'B', starts_at: 0, lasts: 3 }, { note: 'C', starts_at: 1.5, lasts: 1.5 } ]; play_piano(my_song); Outputs: Play A Play B Wait 1.5 seconds Play C Wait 1.5 seconds Release A Release B Release C

This is a big problem, so start by breaking it down into smaller steps. You can't simply loop over the array once, since notes are played and released at different times. If you're looking at note 0, you might try printing, "Play A", "Wait 3", and "Release A". What happens to note B, though? The output is supposed to be chronological. This means you need to figure out a more complicated way of stepping through the data.

Instead of solving the entire problem at once, try solving half of it. Create an "internal representation" of the data: an array, object, or combination of them that will let you generate the output. Maybe it's something as simple as "[ { message: 'Play A', at_time: 0 }, ...]", just a list of messages and when to print them. Whatever you choose, think of that as an oasis. It's a midpoint in the desert, where you now need to solve two problems: how to get from the start to the oasis, then from the oasis to the end. Write code that converts the input data into your intermediate data structure for the former. For the latter, write code to convert the intermediate structure into the correct output.

Below, share your plan of attack. How will you break this problem down into pieces, and what will each piece be responsible for? If you're going to use an internal representation, describe what it will be. What about the wait messages? How will you print them out at the right time? This is also the place to share your thoughts or ask questions about how to approach this assignment.