Menu
I'm trying to encode an mp3 file in base64 format. Then play it through the broswer. It works perfectly on 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 is working on Firefox after I have encoded them to base64. Please help
<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>
404
There are three supported audio formats in HTML: MP3, WAV, and OGG.
Encoding and Decoding Strings with Base64 btoa() and atob() are two Base64 helper functions that are a core part of the HTML specification and available in all modern browsers.
Base64 is a group of similar binary-to-text encoding schemes that represent binary data in an ASCII string format by translating it into a radix-64 representation. The term Base64 originates from a specific MIME content transfer encoding.
Instead of using readAsBinaryString then base64 encoding.
use readAsDataURL which gives you a complete data uri.
<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=\""+result+"\"/>"); *//add the source to audio*
});
});
});
function readFile(file, onLoadCallback){
var reader = new FileReader();
reader.onload = onLoadCallback;
reader.readAsDataURL(file);
}
</script>
http://jsfiddle.net/Z9pJ7/2/
54
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
