Buying an iPad has been an unanticipated benefit for my voiceover business. I no longer print my scripts. I just email them to my iPad account and it reads any attachment: doc, docx, xml, pdf. Nice!
But my flash-based audio players disappeared from my website! Not nice. Since I had never joined the iPhone bandwagon, I didn’t know until recently that my voiceover demos weren’t available to web visitors coming to my site from their iPhones, or from iPads which use the iPhone OS. People could download my demos, but I didn’t even add download links until earlier this year! And none of my profiles on the voice marketplaces I’m still affiliated with currently use supported audio players. That’s particularly unfortunate for paying subscribers.1
I know what you’re thinking: what’s the big deal, Nikki? Your flashy audio players work just fine in Internet Explorer and hardly anyone uses their iPhone for surfing the web. And Steve Jobs will eventually cave in and support flash on the iPhone OS. Yes, and crude oil will become water soluble.
Like most of my hungry voiceover colleagues, I would like my website to work as well as it can on whatever devices or browser a site visitor uses. In fact, many of my new contact emails are coming from iPhone users. And this was before my upgrade.
So here is the upgrade, a cleaner design with a bit more contrast and these few content coding changes:
- A background image behind the flash player on my home page so that iPhone visitors don’t see a big empty space.
- Html audio tags with embedded audio. This required minimal coding and the addition of .ogg versions of my demos for browsers that don’t support .mp3 in html5. The most universal syntax for the audio player seems to be to separate out the source tag like this:
<audio preload=”auto” controls=”controls”>
<source src=”voiceoverdemo.ogg” />
<source src=”voiceoverdemo.mp3″ />
</audio>
The “controls” option loads a rather ugly player in every browser except Opera. Most browsers will also support an autoplay option which I find obnoxious and don’t recommend. The preload option (formerly “autobuffer”) is still being adopted by browsers and will be great when it works more universally but I would only use it on the first couple demos.
If you’re on a web-compliant Internet browser (unfortunately that means any popular browser except Internet Explorer), you should be able to see what an Html 5 audio player looks like here:
That’s it as far as coding. Until browsers are updated to incorporate more of the html5 web standards (which are still being vetted), my preference is to keep it simple. And since Internet Explorer isn’t expected to adopt enough of these web standards any time soon, it’s probably a good idea to use both a simply flash audio player and html5, which is what I did here. Of course, I’m still into making things look pretty so I opted not to use the html5 tags on the home page and instead prominently featured my Voiceover Demos link so that it’s part of the first screen content mobile browsers will see. Yep, not the best way to go for a voiceover web site, but probably the way I’ll keep things until I can make html5 audio controls more universally appealing.
Personally, I’m looking forward to more browsers adopting html5 open web standards, especially the audio tags. Embedded audio is just a better, cleaner concept for web development. I also like that visitors can right-click the player and download the files when they need to so you don’t really need a separate link. As for making it look pretty, a little javascripting and use of the new <canvas> tag will ultimately improve the look and functionality of media players on the web.
Hope you like the new site and that you find it much easier to navigate. Let me know!