Wikinaut/MySimpleAudioPlayer

## MySimpleAudioPlayer
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<title>HTML5 <audio> test suite</title>
<style type="text/css">
body {
	background: beige;
}
p {
	margin:1em;
	padding: 1em 1em 5em 1em;
	border: 1px solid black;
	width:19em;
	height:30px;
}
audio {
	margin-top: 1em;
}
.ok {
	background: lightgreen;
}
.try {
	background: orange;
}
</style>
</head>
<body>
20.07.1969<br/>
<table><tr><td>Aldrin:</td><td>"Okay, engine stop. Houston, Tranquility Base here. The Eagle has landed."</td></tr><br/>
<tr><td>Mission Control:</td><td>"Roger, Tranquility. We copy you on the ground. You got a bunch of guys about to turn blue. We're breathing again. Thanks a lot.”</td></tr>
</table>

<p><a id="1" href="#">eagle ogg</a></p>
<p><a id="2" href="#">eagle mp3</a></p>
<p><a id="3" href="#">eagle wav</a></p>
<p><a id="4" href="#">eagle ogg-mp3-wav</a></p>
<p><a id="5" href="#">eagle ogg-mp3-wav (ohne controls)</a></p>

<script type="text/javascript">

// http://www.w3schools.com/html5/html5_ref_eventattributes.asp
// https://developer.mozilla.org/En/Using_audio_and_video_in_Firefox
// https://developer.mozilla.org/En/HTML/Element/Audio

$(document).ready(function() {

        $('#1').click(function() {
                $("audio").remove();
		var audio = $("<audio controls='controls' autoplay='autoplay'>");
        	addSource(audio, 'audio/eagle.ogg');
        	$(this).after(audio).parent().addClass("try");
        	$("audio").bind("ended",function(){$(this).remove()})
     	        	  .bind("canplay",function(){$(this).parent().removeClass().addClass("ok")})
		$("source").bind("error", function(){ alert("Error:\nSorry, cannot load or play this source file "+$(this).attr("src"));$(this).parent().remove() })
        });
        $('#2').click(function() {
                $("audio").remove();
		var audio = $("<audio controls='controls' autoplay='autoplay'>");
	        addSource(audio, 'audio/eagle.mp3');
        	$(this).after(audio).parent().addClass("try");
        	$("audio").bind("ended",function(){$(this).remove()})
     	        	  .bind("canplay",function(){$(this).parent().removeClass().addClass("ok")})
		$("source").bind("error", function(){ alert("Error:\nSorry, cannot load or play this source file "+$(this).attr("src"));$(this).parent().remove() })
        });
        $('#3').click(function() {
                $("audio").remove();
		var audio = $("<audio controls='controls' autoplay='autoplay'>");
	        addSource(audio, 'audio/eagle.wav');
        	$(this).after(audio).parent().addClass("ok");
        	$("audio").bind("ended",function(){$(this).remove()})
     	        	  .bind("canplay",function(){$(this).parent().removeClass().addClass("ok")})
		$("source").bind("error", function(){ alert("Error:\nSorry, cannot load or play this source file "+$(this).attr("src"));$(this).parent().remove() })
        });
        $('#4').click(function() {
                $("audio").remove();
		var audio = $("<audio controls='controls' autoplay='autoplay'>");
	        addSource(audio, 'audio/eagle.mp3');
        	addSource(audio, 'audio/eagle.ogg');
	        addSource(audio, 'audio/eagle.wav');
        	$(this).after(audio).parent().addClass("ok");
        	$("audio").bind("ended",function(){$(this).remove()})
     	        	  .bind("canplay",function(){$(this).parent().removeClass().addClass("ok")})
		$("source").bind("error", function(){ alert("Error:\nSorry, cannot load or play this source file "+$(this).attr("src"));$(this).parent().remove() })
        });

        $('#5').click(function() {
                $("audio").remove();
		var audio = $("<audio autoplay='autoplay'>");
        	addSource(audio, 'audio/eagle.ogg');
	        addSource(audio, 'audio/eagle.mp3');
	        addSource(audio, 'audio/eagle.wav');
        	$(this).after(audio).parent().addClass("ok");
        	$("audio").bind("ended",function(){$(this).remove()})
     	        	  .bind("canplay",function(){$(this).parent().removeClass().addClass("ok")})
		$("source").bind("error", function(){ alert("Error:\nSorry, cannot load or play this source file "+$(this).attr("src"));$(this).parent().remove() })
        });

        function addSource(elem, path) {
        	$('<source>').attr('src', path).appendTo(elem);
        }
});

</script>
</body>
</html>
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
	<title>HTML5 <audio> test suite</title>
	<style type="text/css">
	body {
	background: beige;
	}
	p {
	margin:1em;
	padding: 1em 1em 5em 1em;
	border: 1px solid black;
	width:19em;
	height:30px;
	}
	audio {
	margin-top: 1em;
	}
	.ok {
	background: lightgreen;
	}
	.try {
	background: orange;
	}
	</style>
	</head>
	<body>
	20.07.1969<br/>
	<table><tr><td>Aldrin:</td><td>"Okay, engine stop. Houston, Tranquility Base here. The Eagle has landed."</td></tr><br/>
	<tr><td>Mission Control:</td><td>"Roger, Tranquility. We copy you on the ground. You got a bunch of guys about to turn blue. We're breathing again. Thanks a lot.”</td></tr>
	</table>

	<p><a id="1" href="#">eagle ogg</a></p>
	<p><a id="2" href="#">eagle mp3</a></p>
	<p><a id="3" href="#">eagle wav</a></p>
	<p><a id="4" href="#">eagle ogg-mp3-wav</a></p>
	<p><a id="5" href="#">eagle ogg-mp3-wav (ohne controls)</a></p>

	<script type="text/javascript">

	// http://www.w3schools.com/html5/html5_ref_eventattributes.asp
	// https://developer.mozilla.org/En/Using_audio_and_video_in_Firefox
	// https://developer.mozilla.org/En/HTML/Element/Audio

	$(document).ready(function() {

	$('#1').click(function() {
	$("audio").remove();
	var audio = $("<audio controls='controls' autoplay='autoplay'>");
	addSource(audio, 'audio/eagle.ogg');
	$(this).after(audio).parent().addClass("try");
	$("audio").bind("ended",function(){$(this).remove()})
	.bind("canplay",function(){$(this).parent().removeClass().addClass("ok")})
	$("source").bind("error", function(){ alert("Error:\nSorry, cannot load or play this source file "+$(this).attr("src"));$(this).parent().remove() })
	});
	$('#2').click(function() {
	$("audio").remove();
	var audio = $("<audio controls='controls' autoplay='autoplay'>");
	addSource(audio, 'audio/eagle.mp3');
	$(this).after(audio).parent().addClass("try");
	$("audio").bind("ended",function(){$(this).remove()})
	.bind("canplay",function(){$(this).parent().removeClass().addClass("ok")})
	$("source").bind("error", function(){ alert("Error:\nSorry, cannot load or play this source file "+$(this).attr("src"));$(this).parent().remove() })
	});
	$('#3').click(function() {
	$("audio").remove();
	var audio = $("<audio controls='controls' autoplay='autoplay'>");
	addSource(audio, 'audio/eagle.wav');
	$(this).after(audio).parent().addClass("ok");
	$("audio").bind("ended",function(){$(this).remove()})
	.bind("canplay",function(){$(this).parent().removeClass().addClass("ok")})
	$("source").bind("error", function(){ alert("Error:\nSorry, cannot load or play this source file "+$(this).attr("src"));$(this).parent().remove() })
	});
	$('#4').click(function() {
	$("audio").remove();
	var audio = $("<audio controls='controls' autoplay='autoplay'>");
	addSource(audio, 'audio/eagle.mp3');
	addSource(audio, 'audio/eagle.ogg');
	addSource(audio, 'audio/eagle.wav');
	$(this).after(audio).parent().addClass("ok");
	$("audio").bind("ended",function(){$(this).remove()})
	.bind("canplay",function(){$(this).parent().removeClass().addClass("ok")})
	$("source").bind("error", function(){ alert("Error:\nSorry, cannot load or play this source file "+$(this).attr("src"));$(this).parent().remove() })
	});

	$('#5').click(function() {
	$("audio").remove();
	var audio = $("<audio autoplay='autoplay'>");
	addSource(audio, 'audio/eagle.ogg');
	addSource(audio, 'audio/eagle.mp3');
	addSource(audio, 'audio/eagle.wav');
	$(this).after(audio).parent().addClass("ok");
	$("audio").bind("ended",function(){$(this).remove()})
	.bind("canplay",function(){$(this).parent().removeClass().addClass("ok")})
	$("source").bind("error", function(){ alert("Error:\nSorry, cannot load or play this source file "+$(this).attr("src"));$(this).parent().remove() })
	});

	function addSource(elem, path) {
	$('<source>').attr('src', path).appendTo(elem);
	}
	});

	</script>
	</body>
	</html>