Show HN: A Customizable SoundCloud Player Built on the Web Audio API and d3(toneden.io)
toneden.io
Show HN: A Customizable SoundCloud Player Built on the Web Audio API and d3
https://www.toneden.io/player
19 comments
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?
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?
Definitely! I can point you to how we are doing it on our player.
You can reach me at [email protected]
You can reach me at [email protected]
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?
Absolutely. Hit me up at [email protected] and I'll show you how.
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)
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)
Looks really nice. Am I blind or is there no volume control? Is there a reason you chose to exclude it?
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.
We have the functionality for it there in the source but we just need to implement a UI for it.
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.
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.
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?
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.
I appreciate your opinion and I think it's very valid. Again, expect an interface for volume control to the player in the next day or so.
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.
I hear you. Look for volume control coming to the player in the next day or so.
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 :)
The screenshots I saw on github look great but it's a complete no-go on Firefox 24.10 on linux.
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.
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.
It's not, we've shipped it in 25 (source: I wrote part of it).
We do have flash fallback but no one's got time for that :)
Not working for me on Chromium 33.0.1750.152 Ubuntu 13.10, stuck loading forever.
Good to know. I'll find a Linux box to test this on. Thanks for the info.
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. :)
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. :)
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.
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 :)
Actually, you have pretty good taste in music, I like all of the tracks you have in the default playlist :)
Yeah...optimization is definitely in our pipeline.
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!
Aside from that, looks fantastic!
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.
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.
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.
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?
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.
Functionality for including tracks locally on the server is there also, but we need to modify the API for this a little.
How would you get around the restrictive Youtube API? With such rules as having the embed visible?
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.
The track streaming is openly accessible but there are some rules arround attribution which are required: http://developers.soundcloud.com/docs/api/buttons-logos
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)
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)
Good call. I think we'll just make pressing 'next' loop back to the beginning of the playlist.
Nice work, Tim!
Just a heads up: the D3 visualization doesn't seem to be working in FF28 on Win 7.
Just a heads up: the D3 visualization doesn't seem to be working in FF28 on Win 7.
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!
Yes, wondered why I didn't get that cool wave form. Oh well!
Mixture of Webaudio API with D3 is awesome , liked the themes as well .. good work :)
This is a beautiful player, and fast too. Thanks for open sourcing it. Great job!
Really clean UI, maybe add a repeat button or integrate hotkeys likes soundcloud
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 repeat button is on our dev list. Should be out in a week or so.
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.
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..
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.
This is awesome!
Nice. Like it.
Not seeing an obvious way to change the volume.
A couple people have asked for this today. I think I'll be pushing a UI for this in the next couple of days :)
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)
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)
One of my projects, listen2edm.com, has great use of the volume control on the browser.
Some of us want background noise.
Some of us want background noise.
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.
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.
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.
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.
Every media player on every web page could set its volume permanently to 100% and I really would never even notice.
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?
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.
Got it. We will be implementing volume control. Look for it in the next couple of days :)
Awesome! Thanks for being so responsive, and I'll keep an eye on the project. Feel free to hit me up for feedback.
I enjoy the ability to set separate audio per program without affecting my system volume.
Let me know what you guys think!