HTML5 – Audio tag cross domain

WARNING: THE CODE OF PROXY.PHP BELOW IS VULNERABLE. A HACKER CAN VIEW YOUR LOCALHOST FILES AND MORE (I AM ON RESEARCHING).PLEASE DO NOT USE IT UNTIL I FIX IT.
I heard a lot of about HTML5 that this specification will maybe replace Flash in next years. This is really promising specification because I really hate of using a very, very heavy Flash control each time when I want to see a video clip and listen to an audio file. Therefore today I would like to learn how HTML5 works with audio file. It’s pretty simple to host an audio file in my HTML. Open Notepad, copy and paste this code below, replace my audio file with yours or you can download it here http://www.fileden.com/files/2010/3/13/2792195/LHPVYeuemdailau.ogg , save file.

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title> HTML5 Audio Example</title>
</head>
<body>
	<audio autoplay="autoplay" controls="controls">
		<source src="Le Hieu & Phuong Vy - Yeu Em Dai Lau.ogg"/>
	</audio>

</body>
</html>

OK, let’s browse this HTML, it works like a charm

– Firefox 3.6

– Chrome

– Internet Explorer 8

Nothing??? Yeah because IE has no native audio support.

More than 50% users around the world use IE and all of them can not hear this audio because nothing will appear at their browser. It’s OK, HTML5 is new and still being developed. There is no surprise that IE 8 still does not support it. Just skip and go forward. OK, I can simply embed an audio which is stored at my host. Can I host an audio file from external website. Let’s try it

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title> HTML5 Audio Example</title>
</head>
<body>
	<audio autoplay="autoplay" controls="controls">
		<source src="http://www.fileden.com/files/2010/3/13/2792195/LHPVYeuemdailau.ogg"/>
	</audio>

</body>
</html>

– Firefox 3.6 and Chrome

So it is completely clear that I can not host audio from other domain. Cross domain usage can be enabled by sending headers along with the file being requested. The header explicitly says ‘this resource can be used cross domain’. The protocol for doing this is described in this Access Control (http://www.w3.org/TR/access-control/) document. I really do not understand why HTML5 prevents loading audio from cross domain. Does an audio/a video like an image (in aspect of media file)? I can host an image from cross domain why it does not work with audio/video. To load audio/video file from cross domain, I write a small PHP proxy so that I can load its content to my host and play it back to user.

<?php
// Set your return content type
header('Content-type: audio/ogg,mp3');

// Website url to open
$daurl = $_GET['url'];

// Get that website's content
$handle = fopen($daurl, "r");

// If there is something, read and return
if ($handle) {
    while (!feof($handle)) {
        $buffer = fgets($handle, 4096);
        echo $buffer;
    }
    fclose($handle);
}
?>

And my HTML turns to be

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title> HTML 5 Example</title>
</head>
<body>
	<audio autoplay="autoplay" controls="controls">
		<source src="http://hintdesk.com/Web/Tmp/proxy.php?url=http://www.fileden.com/files/2010/3/13/2792195/LHPVYeuemdailau.ogg" />
	</audio>

</body>
</html>

However using this proxy is a pretty “stupid” idea because I load the audio twice. First from external host to my host and then from my host to browser. Moreover that proxy above works only with Firefox. So the question is “Can HTML5 really replace Flash player in next years?”. An example of audio control you can see here http://hintdesk.com/Web/Tmp/html5.html.