Wednesday, 14 August 2013

How to play base64 audio data on firefox with using HTML5?

How to play base64 audio data on firefox with using HTML5?

I'm trying to encode an mp3 file in base64 format. Then play it through
the broswer. It works perfect with safari and chrome, but not on Firefox.
My question is "is there any way that make firefox play an audio file in
base64/ binary string format?"
ps: i know firefox can't play mp3, so i've tried others audio file like
wav, ogg... None of them are working on Firefox after I have encoded them
to base64. Please them
<body>
<div>
<form>
Select a file: <input type="file" name="img" id="myaudio"/>
</form>
</div>
<div id="click">
<span>click</span>
</div>
<div id="body">
<audio controls="controls" autobuffer="autobuffer"
autoplay="autoplay">
</audio>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#click").click(function(){
var audio = $("input[type='file']").get(0).files[0];
readFile(audio, function(e) {
var result = e.target.result; *// here I get a
binary string of my original audio file*
encodedData = btoa(result); *// encode it to
base64*
$("audio").html("<source
src=\"data:audio/mp3;base64,"+encodedData+"\"/>");
*//add the source to audio*
});
});
});
function readFile(file, onLoadCallback){
var reader = new FileReader();
reader.onload = onLoadCallback;
reader.readAsBinaryString(file);
}
</script>
</body>

No comments:

Post a Comment