8 ms·
Show HN: Beatbar - Media player that beats in the browser address bar
- mmahemoff 14y agoThis is using the Ajax-era hash hack to change URL, which is causing problems with history and makes the reload button and favicon flash. I'd suggest using HTML5 history, specifically replaceState(). It works on all modern browsers. Works on IE10, but not IE9 and below. If you want to support IE, you could fall back to the current location.replace().
- jaip 14y agoI started with replaceState only, but later I realized there was no specific gain that I was having (other than slightly good looking string without hash). This method also suffers from reload and favicon flashes. If it reliably doesn't log to history (unlike location.replace()), using it could be a good idea. But that also comes with a tradeoff of older browser support issues, which requires using external javascript APIs.
- mmahemoff 14y agoI see. Surprised to learn there were still issues as replaceState() (as with pushState) is purely a transformation in the URL path. There's no reload and no update of the favicon link tag. Makes me wonder if that's a browser bug you saw.
- georgefox 14y agoWhat about detecting replaceState support and falling back to location.replace if necessary?
- sohn 14y agoStupidity reachs new highs.
- prezjordan 14y agoVery cool! I think you're limited by the font - strangely enough. But this is very nice. Creative.
- u4 14y agoevery once in a while one bumps into something fairly useless(no disrespect) but insanely creative wow-&-smile-inducing piece of code here on HN. thanks for this. more power to you.
- julioc 14y agoYou could use unicode for the controls. I modified the local code to use "‖" (and, due to a bug I guess, the chrome address bar became monospaced). If you need, check some reference on http://copypastecharacter.com/all-characters http://copypastecharacter.com/all-characters and http://graphemica.com/ http://graphemica.com/
- jaip 14y agoI settled with the standard character sets as I wasn't sure if the fancy unicode character would be available cross platform or not. I'll look for this possibility again. Thanks.
- nowarninglabel 14y agoIf this doesn't work for anyone else, note that beatbar relies on soundcloud, and thus flash. I had flash blocked so was getting a javacript error because beatbar was undefined, enabled flash and it worked.
- jaip 14y agoIt uses soundManager for cross browser audio handling. It first tries with flash and fallbacks to html5 if flash is not available. Firefox with flash disabled wouldn't support mp3, and thus won't be able to play it. I am using SoundCloud api only to fetch streams.
- nowarninglabel 14y agoHmm, that's odd, I'm using Chrome 19.01 and have no other plugins running asides FlashBlock. Once I disabled flash block everything ran fine. Does this version of Chrome not support the HTML5 fallback? Here's the Js error: Uncaught TypeError: Cannot call method 'init' of undefined /beatbar/:75 (anonymous function) /beatbar/:75 f.event.dispatch jquery.min.js:3 f.event.add.h.handle.i
- jaip 14y agoI think soundManager requires some special handling for flashblock cases. I didn't test with flashblock on. Thanks for reporting the issue.
- pvidler 14y agoIt doesn't seem to work in Safari with click2flash, either. Possibly because click2flash doesn't actually disable flash, it just requires a click -- but there's nothing to click on.
- mmahemoff 14y agohttp://www.schillmania.com/projects/soundmanager2/demo/flashblock/ http://www.schillmania.com/projects/soundmanager2/demo/flash...
- vishus 14y agoAwesome stuff Jai! Way to go!
- rhizome 14y agoThe reload button flashes like crazy.
- badboy 14y agoAwesome work. Just do me one favour: Add "return false" to the function bound to "space", otherwise the page scrolls when I hit it to pause.
- jaip 14y agoThanks, fixed.
- mansoor-s 14y agoVery cool indeed, but the title should be more like "Media player that spams your browser's history DB"
- jaip 14y agoDoes it? I am doing a location.replace() which doesn't log the URL to history.
- DoublePlusWill 14y agoIt filled up my history as well. I'm on Chrome on a macbook. I love the idea!
- jaip 14y agoWeird! I am unable to reproduce the issue. I am wondering if the problem is with some specific version of browser.
- darklajid 14y agoSince it took a minute to figure out how to clean that up, maybe this helps other Firefox users: For me (vertical tabs) at least it was impossible to select multiple entries in the history (ctrl + h) with the mouse. The workaround to remove the entries was to search for beatbar, tab into the list of entries, ctrl + a and right-click -> delete. History clean again.
- flexd 14y agoCool idea! but not cool that it has completely filled my web browsing history, thanks.
- jaip 14y agoIs it? For changing the window location I am doing a location.replace which doesn't log to the browser history. What browser are you on?
- JOfferijns 14y agoI noticed it as well - I am using Chrome 20 (dev build) on Windows
- mahcuz 14y agoFilled mine, too. Firefox 11.
- flexd 14y agoChrome dev/beta channel on osx. :) Version 19.0.1084.36 beta
- mackyinc 14y agoGreat Work! Thanks
- gghootch 14y agoTo my surprise, this worked perfectly on my iPhone...
- jmonegro 14y agoI'd argue you could boil ruby down from 'puts "hello world"' to just "hello world".
- hsb 14y agoThis is the biggest "wow" I've seen in a long time for something that was otherwise completely useless. The ultimate definition of a hack. Absolutely awesome.
- captn3m0 14y agoOn a slightly different note, I liked the choice of font for the main text. The font is Varela Round, from Google Webfonts. (http://www.google.com/webfonts/specimen/Varela+Round http://www.google.com/webfonts/specimen/Varela+Round)
- kefs 14y agothx for this. also, good use of comic sans.
- ss_ninja 14y agoGreat Job Jai!! Beatbar rocks!!
- fldrog 14y agoNice work:) You could add the name of the artist/melody...
- jaip 14y agoIf there is a feature to be added, this is the one. On track. Thanks :)