COCONOTE

Inspiration

We are inspired and motivated by the Covid-19 pandemic, the music amateurs, and visually impaired people to create this website. Our team recognizes that blind people can learn how to type easily. Thus, using their typing skill, they can type A, B, C,.. whichever notes and these notes will appear on the music sheet nearby immediately. Our team also realized that during the pandemic, composing music is a growing interest for people besides writing poems. But many people when trying themselves in this field for the first time will find it difficult as they haven't done this kind of thing before. Therefore, we just want to become A Beginner's Guide To The Basics Of Composing Music online. The most important reason we want to build this website is that we want everyone, even someone who has no idea about music, to read the instructions we provided and then have the ability to compose music online.

What it does

COCONOTE is a website where anyone can simply create their own music sheets or collaborate with others. By typing down the name of the note in the music alphabet, that note will be illustrated in the music sheet nearby. It also provides people with a brief theory about scales, keys, music notation that will make it easier for amateurs to explore music theory.

How we built it

Firstly, we implemented the abcjs library to transform ABC notation into readable music sheets. Then, we used Pusher to generate private channels when users access the website and take advantage of its real-time features for collaboration. Lastly, we structure the layout and theme of our website, design the logo and integrate gsap library to make it visually attractive.

Challenges we ran into

When we started coding, we had trouble setting up the ABC editor but we managed to overcome it by reading the documentation carefully. We also had to deal with the hassle of incorporating ABC with Pusher’s real-time capabilities. During the developing process, we also came across many errors but most of which were due to typo mistakes.

Accomplishments that we're proud of

Having finished a fully-functional and practical website within two days.
Having managed to use Pusher’s library to simplify the backend.
Using Pusher’s real-time capabilities, we can trigger events whenever we edit the text, while also - listening for changes made by others in the same document at the same time.

What we learned

Thinking creatively and coming up with an idea that both satisfies our music taste and also helps the community.
Transforming an idea into a usable website by discussing and exchanging with members.
Taking advantage of the gsap library to animate multiple elements
Getting better at managing to use Pusher’s library to simplify the backend.

What's next for COCONOTE

For the next stage of development of COCONOTE, we look to build a login system that enables users to manage their storage space on the website and save their works. Besides, users will soon be able to download their sheets as different types of files such as PDF or PNG. Moreover, we aim to add a function that supports the visually impaired users in writing sheets by playing notes right after every time they type in a letter.