Behavior, Content, Money – 3 Things you should never give away for free!!!

BCmoney MobileTV

HTML5 Audio Player Jukebox

Posted by bcmoney on May 16, 2014 in AJAX, Flash, HTML, JSON, Multimedia, XML with No Comments

No Gravatar
A jukebox icon

A jukebox icon (Photo credit: Wikipedia)

Here’s a piece of work I did on a freelance basis back in early 2012 for a client who allowed me to retain the full rights to the code as a “library” which I could distribute. (I offered them two prices of course, one cheaper rate where I retain the rights and one premium rate in which the code was exclusive to them and I would not distribute). After explaining that based on their request, I would be building it as HTML5/CSS3/JS front-end code that lives in the browser client and regardless of which choice they made it would be entirely possible for someone else to simply hit “view source” and/or sniff out raw traffic packets to copy it in full, they of course chose the cheaper option; they knew from all the hype around HTML5 in 2012 that they wanted it done in HTML5 and browser-based without relying on Flash (using Flash as a fallback only). Of course, the ease with which it would be copyable would depend entirely upon how well they protect their site through SSL-certs/code-signing/code-obsfucation/disabling-ViewSource or for example, put it behind a web viewer in a Mobile App or RIA viewer (Flex/Silverlight/JavaFX) and hiding URLs, if they really want it private. But that’s another point altogether!

They chose the cheaper option so I’ve been sitting on the code and until now I had been a combination of “too lazy”, “too busy” and “out-of-respect-for-them” not bothering to release or advertise the existince of said code. However, the time has come to unleash it! For those who’ve been at this for as long as me or longer, you may recognize that it is inspired heavily by some earlier 2009-2010 HTML5 audio demos done by the Mozilla development team as far as the look & feel; but I’ve added quite a few new features to it (for example the Flash-based fallback for old browsers like IE 5-8), CSS for a slick flat direct-link playlist if both HTML5 & Flash are missing, and the main feature which is support for both XSPF and JSPF playlist formats, which are by far the most popular open playlist data formats which really should be supported by all Online Music services (but that’s another story).

Ironically enough (as I blogged about benefits and annoyances of skeumorphs last year) it is more of a skeumorph for my old iPod shuffle which had two simple arrows (left for “previous”, right for “next”) than it is for an actual Jukebox, but I’m still calling it a jukebox where you can pick from multiple albums as long as they are all aggregated to the same XSPF/JSPF Playlist. Either way, I rather like it and think it borderline qualifies as a flat-design, web-based version of a Jukebox. It was also a disproportionately lot of work to put together considering I did the work for quite cheap and it was ultimately only going to be used to play a specific band’s few albums they had at the time online. As mentioned, it can pretty much support up to 1000’s of songs at a time (though I haven’t tested its limits or ran any browser comparison benchmarks or anything fancy-pantsy like that). Either way, it should theoretically fit as many as could fit into a single XML/JSON file without bringing your browser to a griding halt when trying to fetch, load and parse it, which is definitely in the hundreds if not thousands of lines of items.

Here it is, with a modest 4 sample albums (only one song per album for rights purposes) with royalty-free music I downloaded from Jamendo before they went under and/or re-focused their “open music community”.

Read the rest of this entry »

HTML5 Audio version of the iconic Flash XSPF Player

Posted by bcmoney on April 5, 2014 in Multimedia, XML with No Comments

No Gravatar

The XSPF Music Player is one of those “history of the web” old-time greats. It is a Flash application (SWF file) that was originally created by Fabricio Zuardi in late 2003 and which gained massive popularity and widespread usage between 2005-2008 in the beginning of the Web2.0 renaissance after the post Dot Bom era (aka. end of the Web1.0 timeframe).

Nederlands: Afbeelding van bibliotheek in Flas...

XSPF Music Player

Music in Web2.0

Everyone was extremely excited about the possibilities of two-way publishing of content (known as the User-Generated Content revolution) that was lead by blogs like your’s truly, and, new web technologies like the XSPF Music Player we’re talking about today. It was a simpler time. A time when MySpace was taking over from Friendster as the leading Social Networking Service (SNS) and every VC wanted a piece; Facebook wasn’t even created yet, soon to enter its early days in a Harvard dorm room. Yes, believe it or not VC investment in “new and upcoming SNS startups” was actually a thing! Good luck now if that’s all you’re offering, you’ll need a lot more unique technology stack than basic Social Media capabilities to dethrone the likes of Facebook.
Read the rest of this entry »

HTML5 WebWorker and Local Storage to improve long-running tasks and slow AJAX

Posted by bcmoney on March 16, 2014 in AJAX, HTML with No Comments

No Gravatar
English: Diagram of the HTML5 block elements: ...

English: Diagram of the HTML5 block elements: body, header, navigation, section, article, paragraph, aside, and footer. (Photo credit: Wikipedia)

So there’s tons of hype around HTML5 which kicked off in a big way in 2010, and is still riding strong. Sure enough, everyone is raving about the shiny new multimedia features with HTML5 video & HTML5 audio, as well as the UI/UX features and capabilities such as Drag & Drop file uploads, interactive graphics via SVG & HTML5 Canvas, or the visual effects made possible by CSS3 such as animations and transitions. Mobile web usability enjoys a well-deserved close following with discussions on supporting Swipes, Pinches, Gestures, etc on top of the basic Keyboard & Mouse actions. Even data-centric stuff typically the realm of geeks only such as Semantic Layout block elements (as depicted on the right) or Microdata’s new “data-” attribute that allows extending any element as needed with additional metadata, making possible the initial promise of Microformats.

Yeah, all that stuff is pretty cool, I’ll admit. I’ve covered them in the past and will continue to do so. But what about some of the less exciting, more basic performance-related improvements such as WebWorker and localStorage? I think those deserve just as much time in the spotlight because they offer some serious benefits to developers and users alike, so I’ll talk a bit about them here.
Read the rest of this entry »

E-Learning for Toddlers and Pre-Schoolers: HTML5 Alphabet Learning/Hand-Writing

Posted by bryan on August 13, 2013 in E-Learning with No Comments

No Gravatar

Achieving higher learning through the use of c...

Achieving higher learning through the use of computers. (Photo credit: Wikipedia)

Next up in my little “E-Learning for Toddlers” series is this example which was extended/based (i.e. blatantly lifted) from the excellent “Stay-in-the-Letter” initial concept by Chris Heilmann which I saw on the Mozilla Hacks blog:


My pilfering of this little app concept was for solely and completely personal reasons for teaching my own son, as I simply wanted to see if I could extend it to support the main Japanese characters (hiragana/katakana, maybe even kanji at a later date) as well as extending the English alphabet which it was already designed for to also provide phonetical readings of each character (should work whether using in English or Japanese mode).

Read the rest of this entry »

E-Learning for Toddlers and Pre-Schoolers: HTML5 Memory Game

Posted by bryan on July 20, 2013 in CSS, E-Learning, Gaming, HTML, JavaScript with No Comments

No GravatarThese days, digital distractions are far too proficient at taking our attention away from important responsibilities. You know, like giving your children the care and attention they need and deserve. Especially when it comes to teaching and learning, I even find myself guilty of becoming quickly bored to tears of the typical paper flash word cards and basic, repetitive picture books for toddlers and pre-school aged children.

To fight this boredom, yet still fulfil my fatherly duties, I decided to put my “day job” skills to use and at the same time develop yet another requisite “me-too” HTML5 web app, but this time with a good purpose; namely, teaching my son more interactively.

This is a simple word/alphabet memory game I developed for teaching my child. He has trouble remembering certain colors, words and letters so this game basically mixes up a set of images and uses their filename to display an image. If the folder is prefixed with “alphabet_” it will also create a large letter “stencil” containing the first letter in the top left corner of each card.

It can easily be used for just about any subject by dropping a new folder in the images directory, full of the images you want to appear in the game.
For example’s sake, I’ve added “Animals”, “Numbers” and “Colors” as separate categories just so others can see how this is possible, and the possibilities are really endless.
Read the rest of this entry »

BC$ = Behavior, Content, Money

The goal of the BC$ project is to raise awareness and make changes with respect to the three pillars of information freedom - Behavior (pursuit of interests and passions), Content (sharing/exchanging ideas in various formats), Money (fairness and accessibility) - bringing to light the fact that:

1. We regularly hand over our browser histories, search histories and daily online activities to companies that want our money, or, to benefit from our use of their services with lucrative ad deals or sales of personal information.

2. We create and/or consume interesting content on their services, but we aren't adequately rewarded for our creative efforts or loyalty.

3. We pay money to be connected online (and possibly also over mobile), yet we lose both time and money by allowing companies to market to us with unsolicited advertisements, irrelevant product offers and unfairly structured service pricing plans.

  • Archives