
Show HN: A Customizable SoundCloud Player Built on the Web Audio API and d3 - elsbree
https://www.toneden.io/player
======
timthimmaiah
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
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
Definitely! I can point you to how we are doing it on our player.

You can reach me at tim@toneden.io

------
pyronite
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
Absolutely. Hit me up at tim@toneden.io and I'll show you how.

~~~
lukasm
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)

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

~~~
timthimmaiah
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.

~~~
anigbrowl
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_.

~~~
vertex-four
Laptops definitely all have volume control on the keyboard, and even my
current (wireless) desktop keyboard has volume control. Is this still not
standard on wired desktop keyboards?

~~~
Pxtl
They do... They're just terrible. Unresponsive, and inconsistent. Of course,
part of that might be that windows seems to give the volume -control less
thread priority than rebuilding search indexes or updating virus definitions.

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

~~~
timthimmaiah
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
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
We do have flash fallback but no one's got time for that :)

~~~
danoprey
Not working for me on Chromium 33.0.1750.152 Ubuntu 13.10, stuck loading
forever.

~~~
timthimmaiah
Good to know. I'll find a Linux box to test this on. Thanks for the info.

~~~
thejosh
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. :)

------
heywire
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
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 :)

------
hofstee
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
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.

------
golergka
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.

------
hamburglar
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
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
How would you get around the restrictive Youtube API? With such rules as
having the embed visible?

------
Kiro
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
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)

------
durkie
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
Good call. I think we'll just make pressing 'next' loop back to the beginning
of the playlist.

------
rbaud
Nice work, Tim!

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

~~~
elsbree
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!

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

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

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

~~~
timthimmaiah
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.

------
the_cat_kittles
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.

~~~
timthimmaiah
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..

------
rubyalex
This is awesome!

------
kavyam
Nice. Like it.

------
joshmn
Not seeing an obvious way to change the volume.

~~~
windsurfer
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.

~~~
usea
I have many sources of audio, and their volumes vary dramatically. Unless I
want to adjust the global volume every time I switch audio sources, adjusting
each source once and having it stay correct makes more sense.

Think of turning up your system or browser volume for a quiet song, and then
viewing a loud flash video. You might hurt your ears or disturb someone.
Adjusting only your music player for songs without ruining your volume setting
for some other source gives you a finer control.

~~~
hamburglar
I used to espouse this "finer control" argument but I've come to realize it
was more typical nerd desire for hyperconfiguration than practical need. Yes,
things make noises at different volumes and some are too loud and some are too
quiet and they force you to jump and adjust the volume when this happens. But
it's not generally predictable, so you're not going to set it just right ahead
of time, and having N volume controls to go paging through to find the one
that needs adjusting is a hell of a lot more difficult than just having a
hardware control, always right there, that adjusts everything immediately. The
number of times I've wanted to actually listen to multiple audio sources at
once and carefully set their relative volumes is almost certainly in the
single digits over my entire lifetime. Unless we're talking about doing mixing
for an audio project, which of course we're not.

Every media player on every web page could set its volume permanently to 100%
and I really would never even notice.

~~~
timthimmaiah
I think what we are thinking of is making volume control an optional parameter
to enable/disable. That way we can give the embedder the ability to control
that experience for the listener. Thoughts?

~~~
anigbrowl
I don't want the embedder to control my listener experience, actually. That
person knows nothing about my listening environment, and I don't want to
adjust for their content. I realize this isn't such a big deal for someone
that has SoundCloud playing in the background on their laptop while they do
something else, but it's a total pain in the ass for anyone who works with
audio professionally.

~~~
timthimmaiah
Got it. We will be implementing volume control. Look for it in the next couple
of days :)

~~~
anigbrowl
Awesome! Thanks for being so responsive, and I'll keep an eye on the project.
Feel free to hit me up for feedback.

