Your taste of music varies everyday. One day you feel like some Beatles or good ol' classics, and then the next day, some mean rap from Eminem.

Maybe you want to try to mix and match different songs together. Maybe you're feeling a little different from your playlist this hour. Maybe you want to jam out with your faraway friend, all in quick and easy way.

Meet Vusic, a fast and easy-to-use music queuer, with support for music rooms/parties.

Inspiration

I really like the popular Groovy bot from Discord, having the ability to search and queue songs super quickly without having the need to make playlists. So I thought, why not make it a website?

And that's how we got Vusic Music.

What it does

Vusic is an online music queuer. It's pretty straightforward to use. Search for the name of the song you want to queue, click on it, listen to those sick jams, and lay back and hack some more. You can even create or join virtual music rooms/parties so you can listen to the same beats as your friends as well!

How I built it

I used NodeJS and Express as my backend languages. To search for songs, I use the YouTube API, and to extract the audio and stream to users, I use the ytdl-core library. For connecting to rooms and listening to the same song queues, I used WebSockets and the socket.io library.

For frontend, I used Vue and some Material icons. To play the audio stream from backend, I used howler.js

Challenges I ran into

One of the first issues I ran into was that ytdl-core can't extract the audio from every video, thus making some songs unplayable. That was alright, however, as it didn't seem to affect the more popular songs.

However, the majority of my difficulties arose from using WebSockets to sync playback data between users in music rooms, one of the reasons being that the song has to be loaded before playing from a certain song timestamp. Even right now, there are still bugs in it.

I had originally planned to use Redis and socket.io-redis to utilize Redis's pub/sub mech to utilize multiprocessing/nodes with WebSockets. However, I scrapped this last minute as I ran into some deployment issues.

The audio player had to be custom created, as the HTML5 <audio> tag wasn't sufficent. Additionally, browser compatibility bugs are apparent in the audio player, and I couldn't resolve them due to the time constraints. So far, it has worked reliably in Firefox

Accomplishments and What I learned

I'm glad I was able to present a (mostly) working project. I learned quite a bit about WebSockets and audio streaming. Additionally, I was able to strengthen my skills in Vue (which I prefer more over React, sorry React fans ;)

What's next for Vusic

This is a tool I wish to keep using for awhile, so I wish to refine the UI and appearance. Additionally, I wish to solve and improve the audio sync issues. There are several other UI bugs as well

Current known issues

  • Syncing song timestamp in music room. A temporarily user fix is just to readjust the song slider again
  • Might not be work very well in browsers besides Firefox
  • YouTube API quota is 10,000 queries everyday, so service might shut down in middle of day
  • Titles with special symbols may not appear correctly
Share this project:

Updates