4 ms·
Firstly, I didn't think HN would allow ▶ in the title, so congrats on the "new Rickroll" effort. Hope it doesn't get banned tomorrow :). (Google in fact strips
by mmahemoff 13y ago
Firstly, I didn't think HN would allow ▶ in the title, so congrats on the "new Rickroll" effort. Hope it doesn't get banned tomorrow :). (Google in fact strips the fun characters from SERP titles.)
[Edit - and it's already gone in the time it took to write this]
I've been using this pattern on http://player.fm http://player.fm for some time now. I agree it's best to just "use the force" of the DOM and base the title symbol on the actual media element's state. Some additional points to consider:
* Another option is to also show a paused or stop state. I did that for a while using a black square character (■), but it looks ugly when people bookmark the page. The same thing happens when bookmarking pages with the play symbol, but that's rarer and at least people have a way to turn it off (ie pause the track).
* Instead of using the title, you could also use a favicon. Although I've been promoting dynamic favicons since I discovered the technique [1], I actually think title is better for this purpose. Why? It lets you retain the actual favicon, it's more portable, it's become more standard. Favicon can be good for more dynamic properties like Scott Schiller's graphic equalizer favicon demo (which I can't find now).
* It works fine with Flash if you use a Flash-compatible JS library like SoundManager or jPlayer.
* It should absolutely be a standard browser feature, but the reason it wasn't is because of the Flash runtime. It presented a black box to browsers so they couldn't actually determine if playback was happening. It's been documented in these bug [2] [3]. It's become less critical as HTML5 media has become more dominant, and I think Chrome and Adobe teams have managed the detection more feasible with Flash.
1. http://softwareas.com/dynamic-favicons http://softwareas.com/dynamic-favicons
2. https://bugzilla.mozilla.org/show_bug.cgi?id=486262 https://bugzilla.mozilla.org/show_bug.cgi?id=486262
3. https://code.google.com/p/chromium/issues/detail?id=3541 https://code.google.com/p/chromium/issues/detail?id=3541