CODEWITHSUNDEEP
javascripthtmlfirefoxbase64html5-audio
Dominic
Dominic

Reputation: 73

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 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>

Upvotes: 7

Views: 10141

Answers (1)

Musa
Musa

Reputation: 97672

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/

Upvotes: 3

Related Questions