Let's Make Some Music | 2020
Xiaofei Hong
GSD MDes Tech 2022
Peifeng Cheng
GSD MAUD 2021
Bio-Inspired Chair | 2019
This is an amazing music player!
You could make your own music by pressing notes and choosing their duration on the keyboard. What’s more, if you submit your melody to the server, our server will return two pieces of slightly modified music back. Come and make your own masterpiece now!
Design Documentation of Music Generator
Front-end:
Most of our styles of page elements are from Bootstrap, which is the most popular HTML, CSS, and JS library.
We separate our page with several function modules and put them from top to the bottom.
1. Duration module
The duration module allows users to change the duration of the note they just input. There are six choices for the duration on the left, and an additional rest button on the right. All the buttons are binding with a JavaScript event listener. A for loop is using to generate the listener for buttons. So each button work similar, the only difference is the corresponding duration text. If a user presses one of the buttons, it will call the function that changes the attribute “time” to the corresponding duration, which shows below.
2. Keyboard
Our keyboard has a similar layout to the real-life keyboard, and each key is a button. If a button is pressed, two things will happen. The first one is the attribute “note” will be changed to the note just chosen. The second one is a sample sound that will be played from the URL hardcoded in the code. If the user already chooses duration, the lasting time of the sample sound will be the same as the choice.
3. Control boardThe control board will tell the user values of the current chosen note, duration, and lasting time. In fact, the lasting time is determined by the duration, but it will give a more understandable meaning of duration. There are also four buttons below the show board, “save”, “undo”, “clear” and “play”. S
4. Note listThe note list shows the current list of notes saved from the control board. It also provides some default music pieces, which could be chosen from the music library on the right. The music library is a drop-down list. If a user selects a music piece from the drop-down, the pre-saving string will appear in the note list, and the note array will be set to the pre-saving value.
5. Generate a New PieceThe user could directly input their music piece with note and duration, or copy and paste the note list on the above. The submit button will pass this string to the back-end with a post form, and get two new pieces from it. The new pieces will be showed on generated piece 1 and generated piece 2. They both have a play button with a similar function to the play button on the control board.
Back-end:
The back-end is implemented with python and using the flask platform.
1. index()
This form will receive a post from the front-end, and process the note list with a different function. After all those steps, it will use render_template() to give the two new music pieces back to the front-end.
2. split_notelist()
Process the string of note list to a list structure. First, cut it with split(“;”), then separate the note and duration with split(“,”). If the length of list is abnormal after the split, return the error code instead of the result list.
3. notelist2lists()
Separate original list to note list, duration list, and time list.
4. markovapp1()/markovapp2()
Both functions will receive the note list and change it with the Markov process. The difference between them is that markovapp2 will do the Markov process twice.
5. combine_notelist()
Add “,” between note and duration and “;” between note information again, to make the note list after Markov process to a string and ready to pass back to the front-end.
6. apology()
If the user inputs an empty note list or an invalid note list, this function will be called and return a 400 error. The user will be redirected to the apology.html page.
credit:
https://virtualpiano.net/
https://www.openprocessing.org/sketch/699208