HTML5 Audio on Android: DOA

This Android bug with HTML5 audio is awful. After a phone call or SMS, it resumes playback EVEN IF the audio was paused and EVEN IF the browser isn’t active. I just added a +50 bounty to this question as I still can’t figure how to prevent playback from happening.

Try it yourself on Android Browser:

Meanwhile Chrome audio is so temperamental it shuts down when the screen turns off, a critical flaw which no-one is prepared comment on ( much for open web standards.

And you wonder why native apps are eating HTML5’s lunch. Even with packaging from PhoneGap and it’s building apps on a house of cards. Until the default Android runtime is Chrome, and Android Chrome gets up to parity with Mobile Safari and beyond, there’s not much point using HTML5 to develop anything serious on Android, not when the native platform keeps running ahead on turbo mode.

Cross-posted and modified from G+

HNpod Revival

HNpod is Back

HNpod is an unofficial Hacker News podcast Alex Muir began a few months ago. I was fortunate enough to be on the first and a half episodes, and shortly after that Alex got busy and the show took a break.

As of this week, I’ve resumed the show. HNPod 3 covers Ouya, Github, and with guests Dan Shipper, Steve Corona, and Paul Biggar. A wonderful set of hacker guests for my first time hosting the show.

Many podcasts don’t make it past the first few episodes because of all the overhead involved, so I’m hoping to automate and delegate as much as possible here. The HNpod website helps by including a DIY subsmission form for guests. If you’d like to be a guest on the show, please do fill out this form. Once I have guests, I’ll send out a Google+ event and we record in a hangout. This week, I’ll be trying a Hangout on Air so we have a master recording in addition to everyone’s recording of their own voice.


After recording, it goes to a producer I’m working with. I hired two producers on oDesk to see how they’d go, and it took several hours for each to sync the recordings, neutralise sounds, cut out some silence, and add the music.

Because of teething problems, I still ended up having to do some edits. Here I found Garageband ’11 surprisingly difficult to do some basic trimming. First, the main view requires you to split the track, cut the new segment, and drag the next segment back because it leaves that space silent. Then there’s the track editor below, which had me Googling like mad because you can’t select a region…until I discovered that with Garageband ’11, you have to select a region in the bottom half of the editor. Anyway, cutting a region again doesn’t actually displace it, you still have to move the next region in. Which is kind of a drag if you’ll pardon the pun and I looked elsewhere.

Audacity was okay in the past, but I quickly discovered Fission. The fact that it’s from Rogue Amoeba pretty much sold it to me, as I’ve always found Audio Hijack Pro the picture of task-directed simplicity. So I immediately downloaded the trial and soon purchased it. As expected, it made light work of trimming audio (though I realise it’s not perfect in a couple of places :)). You just select and hit delete, how hard does it have to be after all?!! Plus you get fine control with keyboard shortcuts. There’s also an audio preview, where it loops the next ~half-a-second of audio, so you can immediately know what you’re cutting without having to play it back afterwards.


There’s various steps involved in publishing, such as entering guest details on, posting on Twitter, etc. I’m working towards delegating these steps too, with the aim that I can focus on the content and the recording. It will be an interesting learning experience to see how much can be delegated through virtual assistants. As I suspect a lot more podcasts would happen if subject matter experts could focus purely on their shows and less on the mechanics.

Graceful Degradation of Links

I made a bit of rookie error on a recent update. Suggestions for best practices are usually presented as fait accompli, but actually come from iterations in many cases. So I’d like to share how this one evolved. The actual refactorings were small, but it took a day of background thinking before the light bulb went off.

The feature “ajaxes in” some content when the user requests it.

I call this component a “midi” (bigger than a simple button or line of content, smaller than a full page.) It acts as a kind of preview, where the user can open the full page by clicking on the “tablet” title on the top-left.

Just a span

I begin thinking about the request controls as simple spans, like etc, because I’m getting away from the usual channel “tablet” control. Tecnically, the Ajax handler could just parse the title of the using the span’s innerHTML, but that would be error-prone and inflexible. For one thing, it would have to infer the owner as “featured”, and that would make the component less general-purpose. So I embed the path as a data attribute:

<span data-path=’/featured/comics/midi’>comics</span>

Not bad. Now we just need to Ajax-request /featured/comics/midi and drop the content into this div. A one-liner using jQuery replaceAll() or similar.

A real link

I don’t deploy yet. I go to bed and test on iPad and realise this sucks for touch. With a real link, tablets will confirm it’s a link when you press down on it. iPad, for example, will show a grey background and if you long-hold, open options to Open In New Tab, etc. I could try faking it with hover styles, etc., but it’s unnecessary when I could just make this thing a link. So I do this:

<a href=’/featured/comics/midi’>comics</a>

Much better on touch devices now.

No, a real, real, link

Okay, but wait a sec. What if the user actually clicked on the link, or a search engine bot followed it? The link would take them to an unstyled block of content that’s supposed to appear on a page. Well, I could try to detect XHR and format it nicely. But there’s a better way:

<a href=’/featured/comics’>comics</a>

Just link to the actual thing the user is trying to preview. The JavaScript now adds “/midi” manually when performing the hijack. So the “/midi” link never appears on the site. Just as it shouldn’t.

Eeedjit. Why didn’t I do this from the start?!!

On the one hand, I made a basic error by not doing it from the start. On the other hand, I think it’s a good example where the solution changes over time as you re-conceptualise the problem. I simply wasn’t thinking about the “request controls” as links, and I was thinking if the user wants to open up a link in a new window, they can request a preview first, and then open it. But of course, users will indeed want to open in new window, right-click to copy the link, etc. That’s really one of the great benefits of a HTML5 history architecture like this, where the links are real and not Ajax-era hashbangs. It’s just that I didn’t see it that way from the start.

Software is Exorcism

Software is Like a Box of Chocolates

Software has had to endure a proliferation of metaphors over the years. Architecture, Engineering, Art, Craft, Design, Magic, Gardening. We’ve seen them all. Or maybe not all of them, because here is another “software is” I’d like to throw into the ring: Exorcism.

Breaking the Marble Spell

What I mean by this is summarised by Bill Joy in an essay anyone in technology should read:

“In The Agony and the Ecstasy, Irving Stone’s biographical novel of Michelangelo, Stone described vividly how Michelangelo released the statues from the stone, “breaking the marble spell,” carving from the images in his mind. In my most ecstatic moments, the software in the computer emerged in the same way. Once I had imagined it in my mind I felt that it was already there in the machine, waiting to be released. Staying up all night seemed a small price to pay to free it – to give the ideas concrete form.

Ah yes, I know that feeling.

If you’re an architect or a town planner, you might be blessed and cursed with visions of glorious structures.

Unfortunately, the only way to make them happen is to close your eyes and dream.

The other way you can get close is with software.

And that’s the point. If software is your craft (there, I used another metaphor), you actually can turn dreams into reality. It’s really all about the pixels, or as a Facebook has it, “pixels talk”.

One of Bill Joy’s greatest works is Vi, the grand-daddy of Vim, the program thousands – perhaps millions – of other developers and writers spend most of our days in. And how was this gift to humanity created from his initial vision? “I just stayed up all night for a few months and wrote vi”

Having an idea that grows in your head like a bad weed, and yearns to be unleashed as pixels on the screen. That’s exorcism.

Follow Your Passion to the Dole Queue?

I would be remiss if I didn’t mention this important and under-appreciated point.

Should you embrace every whim that comes to you, devoting the next few months or years to make it happen?

No. “Follow your passion” is popular advice, but it usually comes with a dangerously large dollop of survivorship bias. Of course Richard Branson will tell you to follow your passion. He’s the 0.00001% survivor, try listening to the other million who went down this path. It’s true that you’re likely to be better and more persistent at following your passion than maintaining a legacy invoice program in COBOL; but don’t confuse that with being a surefire way to put food on the table.

Commercial viability aside, a hacked-up prototype is not the same as a production system. There are many things to consider in building an application for real-world use: reliability, security, design, support, etc. The good news is you can still mock things up in a weekend and maybe even make them useful for yourself and friends who will tolerate a little breakage. You can also build extensions to tweak existing websites (you can try my Chrome boilerplate to get a Chrome extension up and running quickly). But committing to anything more major … go in with eyes wide open about the risks involved, and make sure it’s an idea that really, really, wants to come out. It’s what I’ve done recently and I’m loving it!