6 ms·

Show HN: SoundCloud Wall

51 points by karangoeluw 12y ago

karangoeluw 12y ago
Thought I'd share the source code: https://github.com/karan/SoundWall https://github.com/karan/SoundWall
zameericle 12y ago
fun!
Jonovono 12y 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/ http://molli.es/
- karangoeluw 12y 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.
  - Jonovono 12y 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!
    - Jonovono 12y ago
      ERR, right arrow :p
crisnoble 12y 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.
- karangoeluw 12y 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 https://github.com/karan/SoundWall
JoshTriplett 12y 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 12y ago
  It seems to use HTML5 Audio in Safari on OS X
- wanda 12y ago
  Using HTML5 audio in Chromium too. No overlapping.
- karangoeluw 12y 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 12y 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 12y ago
Nice UI. I love the concept too.
theCricketer 12y 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 https://play.spotify.com/discover
matiasb 12y ago
Nice!
mandeepj 12y ago
Good job. I felt like i have a DJ's control box :-)
dsschnau 12y ago
This is sweet! I've been trying to learn how to use the SC wrapper and your code is a wonderful example. Thanks!
beecr001 12y 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 :)
- karangoeluw 12y 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).
  - beecr001 12y ago
    Right on! The cross-fader would be an interesting project though; using a slider to adjust volume between sources...
    - karangoeluw 12y ago
      Will see if I can work on it.
pfalke 12y ago
Great tool, fun for music discovery. A graph style approach for this is https://soundcloud-explore.appspot.com/ https://soundcloud-explore.appspot.com/
k-mcgrady 12y 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.
- karangoeluw 12y 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 12y 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 https://developers.soundcloud.com/docs/oembed) - no authentication required.
    - karangoeluw 12y ago
      In the initial versions, I was using SC's own widget, but it was not performant and looked nasty.
karangoeluw 12y ago
If anyone's interested, leave your e-mail here [1] and stay tuned about my projects. [1] http://eepurl.com/SRIPT http://eepurl.com/SRIPT
snake_plissken 12y 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 12y 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 http://i.imgur.com/5yKPIjZ.jpg
- karangoeluw 12y 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.

51 points by karangoeluw 12y ago

karangoeluw 12y ago

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

zameericle 12y ago

fun!

Jonovono 12y 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/ http://molli.es/

karangoeluw 12y 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.
- Jonovono 12y 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!
  - Jonovono 12y ago
    ERR, right arrow :p

crisnoble 12y 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.

karangoeluw 12y 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 https://github.com/karan/SoundWall

JoshTriplett 12y 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 12y ago
It seems to use HTML5 Audio in Safari on OS X
wanda 12y ago
Using HTML5 audio in Chromium too. No overlapping.
karangoeluw 12y 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 12y 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 12y ago

Nice UI. I love the concept too.

theCricketer 12y 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 https://play.spotify.com/discover

matiasb 12y ago

Nice!

mandeepj 12y ago

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

dsschnau 12y ago

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

beecr001 12y 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 :)

karangoeluw 12y 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).
- beecr001 12y ago
  Right on! The cross-fader would be an interesting project though; using a slider to adjust volume between sources...
  - karangoeluw 12y ago
    Will see if I can work on it.

pfalke 12y ago

Great tool, fun for music discovery. A graph style approach for this is https://soundcloud-explore.appspot.com/ https://soundcloud-explore.appspot.com/

k-mcgrady 12y 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.

karangoeluw 12y 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 12y 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 https://developers.soundcloud.com/docs/oembed) - no authentication required.
  - karangoeluw 12y ago
    In the initial versions, I was using SC's own widget, but it was not performant and looked nasty.

karangoeluw 12y ago

If anyone's interested, leave your e-mail here [1] and stay tuned about my projects. [1] http://eepurl.com/SRIPT http://eepurl.com/SRIPT

snake_plissken 12y 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 12y 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 http://i.imgur.com/5yKPIjZ.jpg

karangoeluw 12y 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.