4 ms·

Use HTML5 & jQuery to create a digital boombox. (webkit only–FF soon)

30 points by cgcardona 15y ago

k4rizma 15y ago
Nice and lightweight. I'll give it a try on my site when I find the extra time ;)
- cgcardona 15y ago
  Let me know what you think.
wccrawford 15y ago
Can I suggest that the IDs be something a bit less generic if you're going to hardcode them? People might already have 'next' and 'prev' as IDs for other things. (Not that they'd be in the right, either.)
- cgcardona 15y ago
  Totally valid. I'll change that and push it on the next nightly. Thanks!
jasonkostempski 15y ago
Only 2 things missing, Turbo Bass button and a "This is not a toy" warning label.
recoiledsnake 15y ago
>Get a modern browser >First things first—make sure you’re running a modern browser. My favorite is Chrome but Safari will also do. This app currently only supports webkit. More browsers coming soon. What is Opera or IE9 then? Chopped liver? Am I the only one hating this new version of "Best viewed with IE5" and browser specific tag soup whose behavior changes even with the versions of the specified browsers?
- city41 15y ago
  What else is the author supposed to do? HTML5 is still in its infancy and browser support varies quite a bit. I have written several HTML5 experiments that work in some browsers and not in others (most notably for me is Chrome and Firefox support the FileReader API while Safari does not), there isn't much else that can be done at this point.
- patrickaljord 15y ago
  IE9 is not a modern browser http://news.ycombinator.com/item?id=2326048 http://news.ycombinator.com/item?id=2326048
  - cgcardona 15y ago
    I haven't done research into which (if any) html5 audio formats that IE9 supports. I fully plan to add feature detection to serve the correct audio format to the correct browser—IE9 included.
    - cgcardona 15y ago
      Tonight I added support for .ogg in opera. https://github.com/cgcardona/boombox.js/commit/931b069c7b2532c39a903f9ce3e7d726670c5fea https://github.com/cgcardona/boombox.js/commit/931b069c7b253... Firefox is working on my local machine so it should be supported in production by tomorrow. I need to research more about IE9's HTML5 audio support but it shouldn't be difficult to add support for it also.
- cgcardona 15y ago
  This is now working in ALL modern browsers: Firefox Chrome Safari (OSX/iOS) Opera and yes IE9 :-]
nixarn 15y ago
Geez. What's up with the "write 20 lines of trivial javascript, put it on github, put more effort into making a webpage than the actual code, post it on HN".
- weixiyen 15y ago
  I don't mind that it's trivial if it saves me from doing some tedious stuff, but after reading the code it's unusable the way it's written right now. Some of the things that need to change are: 1) DOM selectors must be defined by user, not the plugin itself. 2) Needs to actually work on more than just Webkit based browsers. 3) Don't use $(document).ready() in the plugin, find another way or design the API differently.
  - robert-boehnke 15y ago
    Can you elaborate why $(document).ready() should not be used?
    - weixiyen 15y ago
      It's a matter of best practices. In particular how it's done in this code, where it's outside the definition of the plugin and binding events. Plugins should be built in a way where it is explicitly invoked by the programmers using them, and the 'proper' way is to invoke them from within a $(document).ready() function that is specified by the user in the order that the user wants. Lets pretend, for example, that this plugin is invoked from within another $(document).ready(), in which case the document.ready call from within the plugin is completely redundant and useless.
      - cgcardona 15y ago
        Your points are all valid and I'll consider each one in refactoring the code. Thanks!
iphoneedbot 15y ago
I love how this works on the iphone!
ebishop 15y ago
How is this superior to jplayer (http://www.jplayer.org/ http://www.jplayer.org/) ? Jplayer is implemented in HTML5, but has a fall-back flash implementation for backwards compatibility, and like this is open-source (GPL/MIT).
- cgcardona 15y ago
  I wasn't aware of this project. Thanks for bringing it to my attention. Boombox.js has more features in the works. Please check back later for updates. Thanks!
- matthewcieplak 15y ago
  SoundManager2 does this as well. http://www.schillmania.com/projects/soundmanager2/ http://www.schillmania.com/projects/soundmanager2/
cambriar 15y ago
I think it's awesome, thanks! I found it really easy to incorporate.
- cgcardona 15y ago
  Thanks!
brokentone 15y ago
This is a good start, but it needs some significant additional features. If it's gonna work in jQuery, it needs more control, specifically JS control. It would be nice to do anything I can do from the buttons from JS, and possibly more. Also playlist support would be nice. I'll give you a scenario, if I have this autoplaying on a website, and I have an embeded Vimeo video, I'm gonna want to automatically stop the music when a user starts playing the video.
- cgcardona 15y ago
  Great ideas. Thanks!

30 points by cgcardona 15y ago

k4rizma 15y ago

Nice and lightweight. I'll give it a try on my site when I find the extra time ;)

cgcardona 15y ago
Let me know what you think.

wccrawford 15y ago

Can I suggest that the IDs be something a bit less generic if you're going to hardcode them? People might already have 'next' and 'prev' as IDs for other things. (Not that they'd be in the right, either.)

cgcardona 15y ago
Totally valid. I'll change that and push it on the next nightly. Thanks!

jasonkostempski 15y ago

Only 2 things missing, Turbo Bass button and a "This is not a toy" warning label.

recoiledsnake 15y ago

>Get a modern browser >First things first—make sure you’re running a modern browser. My favorite is Chrome but Safari will also do. This app currently only supports webkit. More browsers coming soon. What is Opera or IE9 then? Chopped liver? Am I the only one hating this new version of "Best viewed with IE5" and browser specific tag soup whose behavior changes even with the versions of the specified browsers?

city41 15y ago
What else is the author supposed to do? HTML5 is still in its infancy and browser support varies quite a bit. I have written several HTML5 experiments that work in some browsers and not in others (most notably for me is Chrome and Firefox support the FileReader API while Safari does not), there isn't much else that can be done at this point.
patrickaljord 15y ago
IE9 is not a modern browser http://news.ycombinator.com/item?id=2326048 http://news.ycombinator.com/item?id=2326048
- cgcardona 15y ago
  I haven't done research into which (if any) html5 audio formats that IE9 supports. I fully plan to add feature detection to serve the correct audio format to the correct browser—IE9 included.
  - cgcardona 15y ago
    Tonight I added support for .ogg in opera. https://github.com/cgcardona/boombox.js/commit/931b069c7b2532c39a903f9ce3e7d726670c5fea https://github.com/cgcardona/boombox.js/commit/931b069c7b253... Firefox is working on my local machine so it should be supported in production by tomorrow. I need to research more about IE9's HTML5 audio support but it shouldn't be difficult to add support for it also.
cgcardona 15y ago
This is now working in ALL modern browsers: Firefox Chrome Safari (OSX/iOS) Opera and yes IE9 :-]

nixarn 15y ago

Geez. What's up with the "write 20 lines of trivial javascript, put it on github, put more effort into making a webpage than the actual code, post it on HN".

weixiyen 15y ago
I don't mind that it's trivial if it saves me from doing some tedious stuff, but after reading the code it's unusable the way it's written right now. Some of the things that need to change are: 1) DOM selectors must be defined by user, not the plugin itself. 2) Needs to actually work on more than just Webkit based browsers. 3) Don't use $(document).ready() in the plugin, find another way or design the API differently.
- robert-boehnke 15y ago
  Can you elaborate why $(document).ready() should not be used?
  - weixiyen 15y ago
    It's a matter of best practices. In particular how it's done in this code, where it's outside the definition of the plugin and binding events. Plugins should be built in a way where it is explicitly invoked by the programmers using them, and the 'proper' way is to invoke them from within a $(document).ready() function that is specified by the user in the order that the user wants. Lets pretend, for example, that this plugin is invoked from within another $(document).ready(), in which case the document.ready call from within the plugin is completely redundant and useless.
    - cgcardona 15y ago
      Your points are all valid and I'll consider each one in refactoring the code. Thanks!

iphoneedbot 15y ago

I love how this works on the iphone!

ebishop 15y ago

How is this superior to jplayer (http://www.jplayer.org/ http://www.jplayer.org/) ? Jplayer is implemented in HTML5, but has a fall-back flash implementation for backwards compatibility, and like this is open-source (GPL/MIT).

cgcardona 15y ago
I wasn't aware of this project. Thanks for bringing it to my attention. Boombox.js has more features in the works. Please check back later for updates. Thanks!
matthewcieplak 15y ago
SoundManager2 does this as well. http://www.schillmania.com/projects/soundmanager2/ http://www.schillmania.com/projects/soundmanager2/

cambriar 15y ago

I think it's awesome, thanks! I found it really easy to incorporate.

cgcardona 15y ago
Thanks!

brokentone 15y ago

This is a good start, but it needs some significant additional features. If it's gonna work in jQuery, it needs more control, specifically JS control. It would be nice to do anything I can do from the buttons from JS, and possibly more. Also playlist support would be nice. I'll give you a scenario, if I have this autoplaying on a website, and I have an embeded Vimeo video, I'm gonna want to automatically stop the music when a user starts playing the video.

cgcardona 15y ago
Great ideas. Thanks!