Go to the profile of akin
akin
node.js developer, ui/ux designer, med student

Music streaming made easy

It’s 9PM. I get to my studio and turn on my PC. It’s time for some chillstep. I bought a new release from an artist on BandCamp and it’s saved to my NAS. That NAS is 80km away from me. Luckily, there is a convenient web interface to stream music, developed by the manufacturer of the NAS.

Unfortunately, that web interface is a beast on its own, slow with indexing, horrible with big libraries. Far from convenient.

But wait, this NAS runs Linux. Surely I can install another application to stream music all around the world?

Yes, I can. MPD, Ampache, koel: lots of possibilities. But usually, they either require a fast CPU, or a lot of RAM, or take some time to configure. Oh, and I like a slick interface, something that look a bit more….polished? With multiuser support! Without Flash! With personal playlists! But I want to see what other users on my server are listening! Oh, it should be fast as well!

Time to go to the drawing board.

Where do I start? Should I use PHP, Python, or Node.js? I have been playing with this idea in my mind for quite some time and I am in the Node.js mindset lately anyway for some other projects, so I’ll just stick to that.

First, we define API routes. Which variables they require, what they return, how they behave. Then we write that API. Next up, the web interface. I want to render everything in the browser, to ensure the server only has to provide the API, the files and some static files. In addition, that API should make it possible in the future to develop mobile apps or alternative web interfaces for the server.

So, which stack do I go with?

  • Node.js
  • Hapi
  • Bookshelf
  • SQLite
  • Vue
  • Plyr (not sure about this yet, looking into other options)

Fast forward to today: the API is working, the web interface is served without any problems: the foundation is all ready. Let’s start designing that web interface. Currently, it looks like this, which, in my opinion, looks very good already:

Let’s login first. Don’t mind the margin differences in the login box, it will be fixed soon.

On to the main interface we go!

Nice.

The web interface takes about two seconds to load. It loads Vue, Plyr, the stylesheets and some images. After that, the only communication will be with the API. It runs as a single-page application: no refreshing pages when you are navigating! This results in a smooth user experience, which is crucial.

Great! So, what’s next?

Now, some decisions will have to be made concerning the user interface. Take a look at the ‘Artists’ panel above. Would you like a plain list of artists? Or with the albums listed immediately below the artists? Or a grid of artist images? Or something entirely else?

I’m looking forward to your inputs on this! If you have any ideas on how to present the items, feel free to comment, or even better, send a screenshot of another example, so I know what kind of interface you would like.

Upcoming posts on this blog will be about a multitude of things: user interface, the source code, the business model, benchmarks and more.