Question

我正在尝试以base64格式编码mp3文件。然后通过broswer播放。它适用于safari和chrome，但不适用于 Firefox 。

我的问题是“有没有办法让firefox以base64 /二进制字符串格式播放音频文件？”

ps：我知道firefox无法播放mp3，所以我尝试了其他音频文件，比如wav，ogg ...在我将它们编码为base64之后，他们都没有在Firefox上工作。请帮忙

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

Answer 1

而不是使用readAsBinaryString然后使用base64编码使用readAsDataURL为您提供完整的数据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/

如何使用HTML5在firefox上播放base64音频数据？

1 个答案: