8 ms·

Show HN: A Customizable SoundCloud Player Built on the Web Audio API and d3

93 points by elsbree 12y ago

rubyalex 12y ago
This is awesome!
timthimmaiah 12y ago
Tim from ToneDen here. You can check out the full repo and documentation at https://github.com/ToneDen/toneden-sdk https://github.com/ToneDen/toneden-sdk. Let me know what you guys think!
- pooMonger 12y ago
  Hi Tim, ToneDen looks really cool. I love the look of the live-frequency line. I wish to incorporate aspects of the player on (http://spawnsong.com http://spawnsong.com), will this work for non-soundcloud sources of music? Do you have an e-mail that I can contact you at?
  - timthimmaiah 12y ago
    Definitely! I can point you to how we are doing it on our player. You can reach me at tim@toneden.io
dalur 12y ago
This is a beautiful player, and fast too. Thanks for open sourcing it. Great job!
shamsulbuddy 12y ago
Mixture of Webaudio API with D3 is awesome , liked the themes as well .. good work :)
graedus 12y ago
Looks really nice. Am I blind or is there no volume control? Is there a reason you chose to exclude it?
- timthimmaiah 12y ago
  We definitely gave this some thought. We put it aside to keep the player minimal assuming that people listening would resort to using the volume control built into their computers. We have the functionality for it there in the source but we just need to implement a UI for it.
  - usea 12y ago
    I'd like to add my own feedback. I believe volume control is an essential feature of a music player, even more so than play and pause. You'll find that many users of web apps riot without one. For example, on some flash game portals, games without volume controls get spammed with 1-star ratings. To many people, volume is more important than any other function.
    - timthimmaiah 12y ago
      I hear you. Look for volume control coming to the player in the next day or so.
  - anigbrowl 12y ago
    Just put it next to the timeline. The lack of a volume control on is a huge annoyance with the existing Soundcloud embeds, and it was the first thing I looked for. We put it aside to keep the player minimal assuming that people listening would resort to using the volume control built into their computers. I'm guessing you use a Mac. PCs don't have volume controls on the keyboard. So to change it IO either need to leave my browser environment to change the OS volume, or reach for a physical volume control. I very much want the volume control associated with the player, for two reasons. First, I never know in advance what sort of volume a given video or audio clip on the internet will have, so I want the ability to adjust for that close to the controls for navigating internally within the clip or selecting other clips. Second, I don't want to change my computer volume at all if I can avoid it, because I'ma sound engineer and I already have the system volume set to a level that I'm comfortable with for recording and editing. Adjusting the computer's default volume will throw it out of what relative to everything else that's plugged into my mixer. Sure, relatively few computer users are sound engineers - for the typical music consumer, this in't a problem. On the other hand, the majority of people with Soundcloud accounts are.
rbaud 12y ago
Nice work, Tim! Just a heads up: the D3 visualization doesn't seem to be working in FF28 on Win 7.
- elsbree 12y ago
  We should mention this on the site, but the visualizer currently only works in Chrome due to some idiosyncrasies with the way other browsers handle (or don't handle) getting waveform data from audio tags. We're working on it though!
- keehun 12y ago
  Yes, wondered why I didn't get that cool wave form. Oh well!
kavyam 12y ago
Nice. Like it.
kavyam 12y ago
Nice. Like it.
hofstee 12y ago
Is it possible to have it such that changing theme doesn't stop the audio? Also buffering issues result in the last tone being held until playback can continue, might be more pleasant if it were just silence. Aside from that, looks fantastic!
- timthimmaiah 12y ago
  It's possible. Right now the CSS isn't being applied dynamically so we are actually recreating the player instance every time the theme is changed in this demo. The second issue is something we are very familiar with. What we think is happening here is that if the track is buffering too slow and the playing progress catches up with the buffer, our player should just stop playing until the track loads. We are playing with the thresholds to make the player pause before it gets to that case. We are pushing a fix for this soon.
joshmn 12y ago
Not seeing an obvious way to change the volume.
- timthimmaiah 12y ago
  A couple people have asked for this today. I think I'll be pushing a UI for this in the next couple of days :)
  - keehun 12y ago
    It's unfair to just say "Hey look. Youtube and Vimeo with billions of dollars and decades of experience between them decided to put a volume control. You should too." But personally, there should be a volume control. It is very common for multiple streams of sounds to occur in today's computing environment. I could have a Youtube video going for the visual component and some other music. Or, maybe I want to leave the speakers on at the maximum volume for notifications but not have this music completely blasting as a consequence. (This is not a far-out edge use case). I love the minimal look and the thought that went into the design. I will definite check it out further. It will be interesting how you fit the volume control into the component which at the moment looks really well balanced and laid out. (ie. How you might improve the already-excellent UI by adding something to it)
    - joshmn 12y ago
      One of my projects, listen2edm.com, has great use of the volume control on the browser. Some of us want background noise.
- windsurfer 12y ago
  May I ask why you would want to change the volume of a browser widget over, say, a browser, or your system volume? As someone that has developed a similar widget, I've never understood this request, and more often than not, users accidentally mute themselves.
  - theg2 12y ago
durkie 12y ago
hey tim -- this looks really nice! just one small note -- you may want to disable the "next track" button if you're on the last track of the playlist. it just makes the song pause now if you press "next" while on the last track (and if you hit the play/resume button it starts the song over from the beginning)
- timthimmaiah 12y ago
  Good call. I think we'll just make pressing 'next' loop back to the beginning of the playlist.
pyronite 12y ago
This player looks fantastic. I really wish I could use it on our site (www.gigsalad.com) for custom MP3s that the our users have uploaded. Is there any chance this might ever happen?
- timthimmaiah 12y ago
  Absolutely. Hit me up at tim@toneden.io and I'll show you how.
  - lukasm 12y ago
    This is why I like HN. I was about to build something similar. I choose the same color and even picked the same spinner http://tobiasahlin.com/spinkit/ http://tobiasahlin.com/spinkit/ :) Kudos. I'd like to give a try with my mp3 library. Maybe just add it to README? I had two bugs. - header bg was not loaded - there was a high pitch sound (defo not part of the song)
harrystone 12y ago
The screenshots I saw on github look great but it's a complete no-go on Firefox 24.10 on linux.
- timthimmaiah 12y ago
  Ouch. We didn't have a Linux machine around to test that case but we will definitely look into it. Right now Chrome is the best supported for our player.
  - harrystone 12y ago
    I don't think version 24 and earlier supports Web Audio API, according to what I found with a little digging so it's not your code.
    - timthimmaiah 12y ago
      We do have flash fallback but no one's got time for that :)
      - danoprey 12y ago
        Not working for me on Chromium 33.0.1750.152 Ubuntu 13.10, stuck loading forever.
        timthimmaiah 12y ago
        Good to know. I'll find a Linux box to test this on. Thanks for the info.
        thejosh 12y ago
        It works fine on 34 Chrome on Linux. You might want to give something like Saucelabs or Browserstack a go if they offer Linux? Otherwise you just use virtualbox for an opensource winning way. :)
        12y ago
the_cat_kittles 12y ago
cool, but it reminds me how underrated using the waveform is when showing the track- its such a good way to scrub through and pick spots.
- jpatapoff 12y ago
  Couldn't agree more. I work on Clyp (formerly Audiour) and I think one of our core differentiators is the time we spend on having a good looking soundwave. This is one of the main reasons we try to put it front and center on the player page.
- timthimmaiah 12y ago
  This is not evident on our demo but we've engineered the ability for you to get waveform data and visualize that as you like. Right now we visualize equalizer data but it would be trivial to create a visualization for realtime waveforms etc..
jOuel 12y ago
Really clean UI, maybe add a repeat button or integrate hotkeys likes soundcloud
- timthimmaiah 12y ago
  There is a parameter to enable keyboard events that's turned off in our demo. You can check out our documentation on GitHub. The repeat button is on our dev list. Should be out in a week or so.
Kiro 12y ago
What does the SoundCloud API terms say about this? I thought it was like YouTube where you are required to at least show their embedded version when using it.
- timthimmaiah 12y ago
  The track streaming is openly accessible but there are some rules arround attribution which are required: http://developers.soundcloud.com/docs/api/buttons-logos http://developers.soundcloud.com/docs/api/buttons-logos
hamburglar 12y ago
This player is really nice, but is there a compelling reason to tie the API to soundcloud instead of having the usual player setup where the caller feeds it a tracklist containing audio URLs and metadata?
- timthimmaiah 12y ago
  Eventually we want to be agnostic to any streaming service out there today. Right now, we believe SoundCloud is doing streaming the best by allowing people to easily publish and share their music. However, we have plans on implementing support for tracks from other sources like Bandcamp, Mixcloud, and YouTube. Functionality for including tracks locally on the server is there also, but we need to modify the API for this a little.
  - tharshan09 12y ago
    How would you get around the restrictive Youtube API? With such rules as having the embed visible?
golergka 12y ago
Cutting down square album covers to a circle isn't always very nice. Plus, I had a couple of audio glitches while the player was in a background tab; never experienced anything like that with SC player.
heywire 12y ago
This is really neat looking, but 50% CPU usage is a bit much. Admittedly, I'm on an older Core 2 Duo desktop, but still, I don't even remember Winamp visualizations taking this much CPU on my old Pentium-class machine years ago.
- heywire 12y ago
  On a side note, thanks for turning me on to this remix of "Music Sounds Better With You"! Actually, you have pretty good taste in music, I like all of the tracks you have in the default playlist :)
- timthimmaiah 12y ago
  Yeah...optimization is definitely in our pipeline.

93 points by elsbree 12y ago

This is awesome!

Tim from ToneDen here. You can check out the full repo and documentation at https://github.com/ToneDen/toneden-sdk https://github.com/ToneDen/toneden-sdk. Let me know what you guys think!

pooMonger 12y ago
Hi Tim, ToneDen looks really cool. I love the look of the live-frequency line. I wish to incorporate aspects of the player on (http://spawnsong.com http://spawnsong.com), will this work for non-soundcloud sources of music? Do you have an e-mail that I can contact you at?
- timthimmaiah 12y ago
  Definitely! I can point you to how we are doing it on our player. You can reach me at tim@toneden.io

dalur 12y ago

This is a beautiful player, and fast too. Thanks for open sourcing it. Great job!

shamsulbuddy 12y ago

Mixture of Webaudio API with D3 is awesome , liked the themes as well .. good work :)

graedus 12y ago

Looks really nice. Am I blind or is there no volume control? Is there a reason you chose to exclude it?

timthimmaiah 12y ago
We definitely gave this some thought. We put it aside to keep the player minimal assuming that people listening would resort to using the volume control built into their computers. We have the functionality for it there in the source but we just need to implement a UI for it.
- usea 12y ago
  I'd like to add my own feedback. I believe volume control is an essential feature of a music player, even more so than play and pause. You'll find that many users of web apps riot without one. For example, on some flash game portals, games without volume controls get spammed with 1-star ratings. To many people, volume is more important than any other function.
  - timthimmaiah 12y ago
    I hear you. Look for volume control coming to the player in the next day or so.
- anigbrowl 12y ago
  Just put it next to the timeline. The lack of a volume control on is a huge annoyance with the existing Soundcloud embeds, and it was the first thing I looked for. We put it aside to keep the player minimal assuming that people listening would resort to using the volume control built into their computers. I'm guessing you use a Mac. PCs don't have volume controls on the keyboard. So to change it IO either need to leave my browser environment to change the OS volume, or reach for a physical volume control. I very much want the volume control associated with the player, for two reasons. First, I never know in advance what sort of volume a given video or audio clip on the internet will have, so I want the ability to adjust for that close to the controls for navigating internally within the clip or selecting other clips. Second, I don't want to change my computer volume at all if I can avoid it, because I'ma sound engineer and I already have the system volume set to a level that I'm comfortable with for recording and editing. Adjusting the computer's default volume will throw it out of what relative to everything else that's plugged into my mixer. Sure, relatively few computer users are sound engineers - for the typical music consumer, this in't a problem. On the other hand, the majority of people with Soundcloud accounts are.

rbaud 12y ago

Nice work, Tim! Just a heads up: the D3 visualization doesn't seem to be working in FF28 on Win 7.

elsbree 12y ago
We should mention this on the site, but the visualizer currently only works in Chrome due to some idiosyncrasies with the way other browsers handle (or don't handle) getting waveform data from audio tags. We're working on it though!
keehun 12y ago
Yes, wondered why I didn't get that cool wave form. Oh well!

kavyam 12y ago

Nice. Like it.

kavyam 12y ago

Nice. Like it.

hofstee 12y ago

Is it possible to have it such that changing theme doesn't stop the audio? Also buffering issues result in the last tone being held until playback can continue, might be more pleasant if it were just silence. Aside from that, looks fantastic!

timthimmaiah 12y ago
It's possible. Right now the CSS isn't being applied dynamically so we are actually recreating the player instance every time the theme is changed in this demo. The second issue is something we are very familiar with. What we think is happening here is that if the track is buffering too slow and the playing progress catches up with the buffer, our player should just stop playing until the track loads. We are playing with the thresholds to make the player pause before it gets to that case. We are pushing a fix for this soon.

joshmn 12y ago

Not seeing an obvious way to change the volume.

timthimmaiah 12y ago
A couple people have asked for this today. I think I'll be pushing a UI for this in the next couple of days :)
- keehun 12y ago
  It's unfair to just say "Hey look. Youtube and Vimeo with billions of dollars and decades of experience between them decided to put a volume control. You should too." But personally, there should be a volume control. It is very common for multiple streams of sounds to occur in today's computing environment. I could have a Youtube video going for the visual component and some other music. Or, maybe I want to leave the speakers on at the maximum volume for notifications but not have this music completely blasting as a consequence. (This is not a far-out edge use case). I love the minimal look and the thought that went into the design. I will definite check it out further. It will be interesting how you fit the volume control into the component which at the moment looks really well balanced and laid out. (ie. How you might improve the already-excellent UI by adding something to it)
  - joshmn 12y ago
    One of my projects, listen2edm.com, has great use of the volume control on the browser. Some of us want background noise.
windsurfer 12y ago
May I ask why you would want to change the volume of a browser widget over, say, a browser, or your system volume? As someone that has developed a similar widget, I've never understood this request, and more often than not, users accidentally mute themselves.
- theg2 12y ago

durkie 12y ago

hey tim -- this looks really nice! just one small note -- you may want to disable the "next track" button if you're on the last track of the playlist. it just makes the song pause now if you press "next" while on the last track (and if you hit the play/resume button it starts the song over from the beginning)

timthimmaiah 12y ago
Good call. I think we'll just make pressing 'next' loop back to the beginning of the playlist.

pyronite 12y ago

This player looks fantastic. I really wish I could use it on our site (www.gigsalad.com) for custom MP3s that the our users have uploaded. Is there any chance this might ever happen?

timthimmaiah 12y ago
Absolutely. Hit me up at tim@toneden.io and I'll show you how.
- lukasm 12y ago
  This is why I like HN. I was about to build something similar. I choose the same color and even picked the same spinner http://tobiasahlin.com/spinkit/ http://tobiasahlin.com/spinkit/ :) Kudos. I'd like to give a try with my mp3 library. Maybe just add it to README? I had two bugs. - header bg was not loaded - there was a high pitch sound (defo not part of the song)

harrystone 12y ago

The screenshots I saw on github look great but it's a complete no-go on Firefox 24.10 on linux.

timthimmaiah 12y ago
Ouch. We didn't have a Linux machine around to test that case but we will definitely look into it. Right now Chrome is the best supported for our player.
- harrystone 12y ago
  I don't think version 24 and earlier supports Web Audio API, according to what I found with a little digging so it's not your code.
  - timthimmaiah 12y ago
    We do have flash fallback but no one's got time for that :)
    - danoprey 12y ago
      Not working for me on Chromium 33.0.1750.152 Ubuntu 13.10, stuck loading forever.
      - timthimmaiah 12y ago
        Good to know. I'll find a Linux box to test this on. Thanks for the info.
        thejosh 12y ago
        It works fine on 34 Chrome on Linux. You might want to give something like Saucelabs or Browserstack a go if they offer Linux? Otherwise you just use virtualbox for an opensource winning way. :)
      - 12y ago

the_cat_kittles 12y ago

cool, but it reminds me how underrated using the waveform is when showing the track- its such a good way to scrub through and pick spots.

jpatapoff 12y ago
Couldn't agree more. I work on Clyp (formerly Audiour) and I think one of our core differentiators is the time we spend on having a good looking soundwave. This is one of the main reasons we try to put it front and center on the player page.
timthimmaiah 12y ago
This is not evident on our demo but we've engineered the ability for you to get waveform data and visualize that as you like. Right now we visualize equalizer data but it would be trivial to create a visualization for realtime waveforms etc..

jOuel 12y ago

Really clean UI, maybe add a repeat button or integrate hotkeys likes soundcloud

timthimmaiah 12y ago
There is a parameter to enable keyboard events that's turned off in our demo. You can check out our documentation on GitHub. The repeat button is on our dev list. Should be out in a week or so.

Kiro 12y ago

What does the SoundCloud API terms say about this? I thought it was like YouTube where you are required to at least show their embedded version when using it.

timthimmaiah 12y ago
The track streaming is openly accessible but there are some rules arround attribution which are required: http://developers.soundcloud.com/docs/api/buttons-logos http://developers.soundcloud.com/docs/api/buttons-logos

hamburglar 12y ago

This player is really nice, but is there a compelling reason to tie the API to soundcloud instead of having the usual player setup where the caller feeds it a tracklist containing audio URLs and metadata?

timthimmaiah 12y ago
Eventually we want to be agnostic to any streaming service out there today. Right now, we believe SoundCloud is doing streaming the best by allowing people to easily publish and share their music. However, we have plans on implementing support for tracks from other sources like Bandcamp, Mixcloud, and YouTube. Functionality for including tracks locally on the server is there also, but we need to modify the API for this a little.
- tharshan09 12y ago
  How would you get around the restrictive Youtube API? With such rules as having the embed visible?

golergka 12y ago

Cutting down square album covers to a circle isn't always very nice. Plus, I had a couple of audio glitches while the player was in a background tab; never experienced anything like that with SC player.

heywire 12y ago

This is really neat looking, but 50% CPU usage is a bit much. Admittedly, I'm on an older Core 2 Duo desktop, but still, I don't even remember Winamp visualizations taking this much CPU on my old Pentium-class machine years ago.

heywire 12y ago
On a side note, thanks for turning me on to this remix of "Music Sounds Better With You"! Actually, you have pretty good taste in music, I like all of the tracks you have in the default playlist :)
timthimmaiah 12y ago
Yeah...optimization is definitely in our pipeline.