Show HN: SoundCloud Wall

http://karan.github.io/SoundWall/index.html

by karangoeluw • 12 years ago

51 31 12 years ago

karan.github.io

karangoeluw10• 12 years ago

Thought I'd share the source code: https://github.com/karan/SoundWall

zameericle• 12 years ago

fun!

Jonovono3• 12 years ago

Nice! Soundcloud is fun to make things with. The API is awesome. Used it with a cool visual library to make this: http://molli.es/

karangoeluw10• 12 years ago

I love the SC API. Even though it's somewhat buggy, it just makes your life so much easier. I can't seem to find a way to change the song in your visualizer.

Jonovono3• 12 years ago

The site is pretty buggy but you should be able to click the left arrow! I made it just to put on the background or chromecast it to my tv when I am programming!

crisnoble• 12 years ago

Super cool! I wish I could to go to the next six songs that match a given query in case I want to explore beyond the first set of results.

karangoeluw10• 12 years ago

I did try doing that, but since it's 6 players, it's super hard to manage events.

If anyone wants to add any features, I'm open to PRs: https://github.com/karan/SoundWall

JoshTriplett• 12 years ago

Interesting UI concept, and nice demo.

On Firefox (version 29 on Linux), the labels for the upper and lower sets of players are both overlapping on the upper videos, and the lower videos have no labels.

Also, I assume this is a SoundCloud limitation, but it's disappointing that this seems to want Flash and does not support HTML5 audio.

Thanks for building this and showing it off!

hrrsn• 12 years ago

It seems to use HTML5 Audio in Safari on OS X

wanda• 12 years ago

Using HTML5 audio in Chromium too. No overlapping.

karangoeluw10• 12 years ago

On Firefox (version 29 on Linux), the labels for the upper and lower sets of players are both overlapping on the upper videos, and the lower videos have no labels.

Seems like an issue with jquery and certain platforms. I do not know how to debug it, unfortunately.

Thanks for building this and showing it off!

No problem. Just share with friends and family. :)

j-hernandez• 12 years ago

Confirming UI behavior in FF 29 on Linux. No audio output in Chromium but both use HTML5 Audio. Might take a crack at the UI bug later. Great demo and thanks so much for sharing!

m00t• 12 years ago

Nice UI. I love the concept too.

theCricketer• 12 years ago

Spotify has a similar preview feature.

If you're logged in to the web player, you can use it by following this link:

https://play.spotify.com/discover

matiasb• 12 years ago

Nice!

mandeepj• 12 years ago

Good job. I felt like i have a DJ's control box :-)

pfalke• 12 years ago

Great tool, fun for music discovery.

A graph style approach for this is https://soundcloud-explore.appspot.com/

k-mcgrady• 12 years ago

Nice concept. I was surprised to see it using HTML5 audio which was nice. Do you know how that affects the play count on SoundCloud? If you're using your own player instead of an embed do the artists lose out on the play?

Feature request: It would be nice if I could log in with my SoundCloud account and have the option to like tracks from your site.

karangoeluw10• 12 years ago

Yeah I had to roll out my own player for performance purposes. I have no idea, but since this is stream I think it just counts as a play?

Feature request: It would be nice if I could log in with my SoundCloud account and have the option to like tracks from your site.

Probably won't happen since that would need a backend, and I want this to be a client side only app. FWIW I link to SC track so people can like, share, download, buy the track.

feralmoan• 12 years ago

user sessions would get picked up by if you just injected the oembed player dom rather than hand-rolling it (https://developers.soundcloud.com/docs/oembed) - no authentication required.

karangoeluw10• 12 years ago

If anyone's interested, leave your e-mail here [1] and stay tuned about my projects.

[1] http://eepurl.com/SRIPT

dsschnau• 12 years ago

This is sweet! I've been trying to learn how to use the SC wrapper and your code is a wonderful example. Thanks!

beecr0012• 12 years ago

Awesome demo!

While playing around with this, I found an interesting (and perhaps unintentional) use case.

By hovering over different songs at appropriate times, it mimics a hard cut using a DJ mixer.

I'm not as technical as I'd like to be, but it seems like a neat bi-product of very low latency using HTML5 with your simultaneous auto-play.

Might be an interesting opportunity for a new type of cloud DJ platform :)

karangoeluw10• 12 years ago

Funny. My friends recommended this exact use case for the app. What he said was, make the artwork look like rotating vinyls and keep the functionality the same except add cross-fader (which is extremely hard).

beecr0012• 12 years ago

Right on!

The cross-fader would be an interesting project though; using a slider to adjust volume between sources...

snake_plissken• 12 years ago

Awesome work! It's very responsive.

On a side note, it's incredible how much Armin Van Buuren's style has changed since the early/mid-2000s.

NathanKP• 12 years ago

Very cool... One critique I have is that you should respect the aspect ratio of the album cover art. At my typical browser dimensions the album art is very screwed up:

http://i.imgur.com/5yKPIjZ.jpg

karangoeluw10• 12 years ago

So it was between a full-screen view vs aspect ratio and due to the nature of the app, I had to settle on former.

Show HN: SoundCloud Wall

Related Stories