Small triumphs with <audio>

This evening I’ve been cleaning up some bits and pieces with the design – capitalisation, the background graphics making the connector lines between the heading and the nav, spacing out and recolouring the navigation links and so on. I’ve also added in the audio to the Featured work box, as my first attempt to get this working.

I should say before I proceed that I’ve done a bit of thinking and I think that I’m not going to have time to re-prep all my web audio in two different formats and have the site ready to go live by 30 September – not least because I’ve discovered that some of the original (ancient) files have got corrupted and barely have a note left intact in them, so I’ll have to see if I can dig out clean versions from the CD copies my mother brought over last time she visited, re-rip, re-make the extracts, re-encode (in two formats) and so on. So I’ve made an executive decision that while I want to get proper HTML 5 audio working on the site for launch, it won’t, alas, be for all the sounds on the site, but just a very few to start with, with the rest being upgraded from their incredibly ancient Flash players (I built those myself! Way back in… um… 1990-something) gradually after launch.

But back to today’s work. The good news is: IT WORKS! Some niggles, but overall I’m very pleased with it – Firefox, Chrome and IE6 all find the sound files and play them nicely (IE6 using the fallback link but really doing quite a nice job of it. Shame it’s not doing such a nice job with the site layout… that one’s on the to-do list). Things to be fixed:

  1. Safari’s not playing back the MP3. It’s the same file IE6 is playing without problems but I don’t know if I’ve specified the wrong codec or there’s something off with the encoding (could be, it’s not a recent encoding), but it shows up the controls with a play button but when you click the play button nothing happens [Update: My MIME type was wrong – the problem with everything on HTML 5 apparently thinking that video is more interesting and the two are more or less interchangeable, so not providing MIME types for audio… Anyway, it’s working beautifully in Safari now]
  2. I’ve been able to resize the controls with CSS so they fit neatly in the ‘featured’ box but Chrome is losing display data when I do this – it’s playing back still and showing the progress bar, but it’s no longer displaying the total track time. Suspect this might have to do with font-size – it was pretty generously sized when the player was using its default size, so maybe it’s just slipped into a hidden overflow or something. Safari’s also not showing much data, but this seems to be because it’s having a problem with the file – setting the width for this browser actually seems to lengthen the control box

I think I need to do some more reading on this topic. Might print some stuff off the web tonight – big Ikea trip tomorrow night. Bound to be bored at some point…

Leave a Reply

Your email address will not be published. Required fields are marked *