HiFi is an Audio/Visual radio powered by SoundCloud and Tumblr. You can visit HiFi online here.
You can checkout the code for the project here.
It allows the user to play sounds from a series of popular genres, as well as from their own sound library, or their favorite sounds. Plug HiFi into some speakers and a projector at a venue or at your next party and let the tunes and imagery unfold.
The original idea was to create an image playlist relating to the genre of music selected from SoundCloud. My thought was that certain genres could relate to various tags, which I would correlate based on my own experience, and then these tags would be used to request images from the Tumblr API.
I quickly learned that the Tumblr API was not as versatile as I had hoped, and searching by tag was something that was barely supported. Only 20 images would be returned from each request, and offset was not a optional parameter. I was able to find a hack around this by navigating back by timestamp to retrieve more images.
As I experimented, I found that gifs produced the most interesting results. So rather than using a bunch of different tags, I set the program up to make a series of requests to gather and randomize a collection of gifs. This could be further developed to gather gifs that also have other distinguishing tags, but for this prototype I decided to keep it simple.
The design is minimal, with the main interface consisting of a series of buttons for sound selection, and then a viewfinder that becomes present once the images and sound are loaded. Additionally, I have added keyboard shortcuts so that the app can be controlled while it is in Full-Screen mode. Those are as follows:
- Shift + Right-Arrow – Next Sound
- Shift + Left-Arrow – Previous Sound
- Shift + Up Arrow – Volume Up
- Shift + Down Arrow Volume Down
- F – Full Screen
- Esc – Exit Full Screen
- K – List Keyboard Shortcuts
To begin, the user can connect to SoundCloud so that sounds from the user’s library can be used. It is also possible to continue without connecting SoundCloud, but you will only be able to select sounds from the genres in that case. As a prototype, I kept it to a basic one page app, and leveraged jQuery for hiding and showing elements during the connection flow.
I have tested the app on Chrome, Firefox, and Safari with success. There are a number of ways the project could be further developed, but I believe this prototype creates an interesting experience, and demonstrates the potential for further interesting combinations of online sound and visual media.