7

我正在尝试以 base64 格式编码 mp3 文件。然后通过浏览器播放。它可以在 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>
4

1 回答 1

3

而不是使用readAsBinaryStringbase64编码。
使用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/

于 2013-08-15T01:05:16.120 回答