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

https://www.toneden.io/player

by elsbree • 12 years ago

93 62 12 years ago

toneden.io

rubyalex• 12 years ago

This is awesome!

timthimmaiah19• 12 years ago

Tim from ToneDen here. You can check out the full repo and documentation at https://github.com/ToneDen/toneden-sdk.

Let me know what you guys think!

pooMonger• 12 years 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), will this work for non-soundcloud sources of music?

Do you have an e-mail that I can contact you at?

timthimmaiah19• 12 years ago

Definitely! I can point you to how we are doing it on our player.

You can reach me at tim@toneden.io

dalur• 12 years ago

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

shamsulbuddy• 12 years ago

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

graedus• 12 years ago

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

timthimmaiah19• 12 years 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.

usea2• 12 years 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.

anigbrowl3• 12 years 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.

huskyr• 12 years ago

I remember thinking exactly the same thing when i built the new player for a big Dutch music site. Sure enough the highest voted request on Uservoice after launch was a volume control :)

rbaud• 12 years ago

Nice work, Tim!

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

elsbree2• 12 years 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!

keehun2• 12 years ago

Yes, wondered why I didn't get that cool wave form. Oh well!

kavyam• 12 years ago

Nice. Like it.

hofstee• 12 years 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!

timthimmaiah19• 12 years 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.

joshmn2• 12 years ago

Not seeing an obvious way to change the volume.

timthimmaiah19• 12 years 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 :)

keehun2• 12 years 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)

windsurfer• 12 years 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• 12 years ago

I enjoy the ability to set separate audio per program without affecting my system volume.

usea2• 12 years ago

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.

durkie• 12 years 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)

timthimmaiah19• 12 years ago

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

pyronite• 12 years 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?

timthimmaiah19• 12 years ago

Absolutely. Hit me up at tim@toneden.io and I'll show you how.

lukasm• 12 years 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/ :)

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)

harrystone2• 12 years ago

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

timthimmaiah19• 12 years 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.

harrystone2• 12 years 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.

the_cat_kittles• 12 years 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• 12 years 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.

timthimmaiah19• 12 years 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• 12 years ago

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

timthimmaiah19• 12 years 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• 12 years 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.

timthimmaiah19• 12 years 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

hamburglar2• 12 years 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?

timthimmaiah19• 12 years 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• 12 years ago

How would you get around the restrictive Youtube API? With such rules as having the embed visible?

golergka• 12 years 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.

heywire2• 12 years 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.

heywire2• 12 years 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 :)

timthimmaiah19• 12 years ago

Yeah...optimization is definitely in our pipeline.

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

Related Stories