Risu |Initial design

Dev time: 2 days
Project: https://github.com/datyayu/risu.moe
Latest commit: 22559ac

So today I officially started working on risu, an interactive peer-to-peer audio player.

This project is actually inspired by a little weekend experiment I did two months ago, which is available on github. You check the demo [here].

I have more ideas to expand this concept, but right now my priority is to get this core functionality working and then I’ll what else can I get in there

Anyway, yesterday I worked on the initial design and came out like this.

Web 1920 – Normal.png

The design has 3 main components:

  • The chat, which is pretty simple chat box. The idea of this is to use something like firebase to provide real-time and also some commands like !skip or !again to allow the users in the room to vote and interact with the player.
  • The playlist, which is just a list of songs added to the queue and that only the room admin will be able to interact with. For the rest of the users, it’s just a preview of the songs to be played.
  • The player. More that a player, it’s actually a visualizer. At least on the first iterations, I don’t intend to add controls, as keeping the player in-sync and controlled when dealing with multiple users doesn’t seem to be something easy. Other than that, it’s pretty much and indicator of which song is playing right now, the current progress and who is sharing it.

The songs will be added by dropping files into the browser window. This is something I did on music-visualizer and that I really liked.

You may notice I posted only one design. I’m trying to keep everything as basic as possible while providing a complete experience, so while I do intend to add more pages to deal with things like registration, users and room-managing/showing on next iterations, in this initial version everything will be developed around this single public room.

Of course, this is an initial design and it may change during development.

Today, I translated the design into html/css and some small interaction scripts (see 22559ac). I don’t think there’s much I can say about this. Of course, I did ensure that this works on mobile and desktop, as well as mayor browsers but nothing to extensive as this is a prototype.

And that’s all I did today, I’m now going to start translating this html into elm components and I’ll write more about it once I’m done with that.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s