Call me!
cell: 612-730-9540

Progressively Enhanced Audio

Project Fall 2013:

Add progressively enhanced audio to my website.

Title: Depends on browser...
Artist: Mark Jensen
Date: 9/18/2011

The Code Reveal:

First: The HTML


<div id="audio">
    <audio controls>
        <!-- Plays in FF, Chrome and Android -->
        <source src="instrumental7.ogg" type="audio/ogg">
        <!-- Plays in iPad and IE 9+ -->
        <source src="instrumental5.mp3" type="audio/mpeg">
    </audio>
    <!-- Plays in IE 5, 6, 7 and 8 -->
    <!--[if lt IE 9]>
    <embed width="300" height="50" autostart="false" src="ghosts.mp3">
    <![endif]-->
</div>

If you right-click and save this file on your desktop you will need to convert it to other formats for testing. Here are some free online media formating websites: Online-Convert.com and Media.io.

Lastly: The CSS


#audio { padding: 10px 0; }
audio, embed { display: block; width: 50%; }

@media screen and (min-width: 650px) and (max-width: 779px){
	audio, embed { width: 50%; }
}

@media screen and (max-width: 649px){
	audio, embed { width: 100%; }
}

The CSS is set to 50% width of the parent container in desktop and in devices with a screen min-width of 650px and max-width of 779px. You can change this to whatever you want. Below 649px I felt 100% width was more suitable since the screen size is at the moment the largest for smartphones - but this can change - which begs me for a different solution.

Perhaps using a script in the <head> to check for useragent type and then serving a css file would be best. Like this:


<script type="text/javascript">// <![CDATA[
	var mobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));
	if (mobile) {
		document.location = "lesson12.html";
	}
// ]]></script>

This script is from my last jQuery Mobile class - lesson 12. Perhaps "document.location = "lesson12.html";" could be switched with something that servers up a CSS file. Something to look into later.

Contact me

If you would like to speak with me more about my qualifications, experiences and what I can do for you please feel free to contact me.