如何玩的base64音频数据在Firefox上使用HTML5？ [英] How to play base64 audio data on firefox with using HTML5?
问题描述
我想带code以base64格式的MP3文件。然后通过broswer播放。它完美的Safari和Chrome，但不是在火狐
我的问题是的有什么办法，使Firefox的发挥以base64 /二进制字符串格式的音频文件吗？
PS：我知道火狐无法播放mp3，所以我已经尝试过其他的音频文件，如WAV，OGG ......他们都不是工作在Firefox之后，我都设有$ C $他们的CD为base64。请帮助
＆LT;身体GT;
＆LT; DIV＆GT;
＆LT;形式为GT;
选择一个文件：其中;输入类型=文件名称=IMGID =myaudio/＆GT;
＆LT; /表及GT;
＆LT; / DIV＆GT;
＆LT; DIV ID =点击＆GT;
＆LT;跨度＆GT;单击＆lt; / SPAN＆GT;
＆LT; / DIV＆GT;
＆LT; DIV ID =身体＆GT;
＆LT;音响控制=控制自动缓冲=自动缓冲自动播放=自动播放＆GT;
＆LT; /音频＆GT; ＆LT; / DIV＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
$（文件）。就绪（函数（）{
$（＃点击）。点击（函数（）{
。VAR音频= $（输入[类型='文件']）得到（0）.files [0]; READFILE（音频，功能（E）{
VAR的结果= e.target.result; * //这里我得到我的原始音频文件的二进制串*
EN codedData = BTOA（结果）; * // EN $ C $它℃到的base64 *
$（音频）HTML（＆lt;信源SRC = \\数据：音频/ MP3; BASE64，+ EN codedData +\\/＆gt;中）; * //源添加到音频*
}）;
}）; }）; 函数ReadFile的（文件，onLoadCallback）{
VAR读卡器=新的FileReader（）;
reader.onload = onLoadCallback;
reader.readAsBinaryString（文件）;
}
＆LT; / SCRIPT＆GT;
＆LT; /身体GT;
readAsBinaryString 然后base64编码。结果
使用 readAsDataURL 它给你一个完整的数据URI。
＆LT;脚本类型=文/ JavaScript的＆GT;
$（文件）。就绪（函数（）{
$（＃点击）。点击（函数（）{
。VAR音频= $（输入[类型='文件']）得到（0）.files [0]; READFILE（音频，功能（E）{
VAR的结果= e.target.result; * //这里我得到我的原始音频文件的二进制串*
// EN codedData = BTOA（结果）; * // EN $ C $它℃到的base64 *
$（音频）HTML（＆lt;信源SRC = \\+结果+\\/＆gt;中）; * //源添加到音频*
}）;
}）; }）; 函数ReadFile的（文件，onLoadCallback）{
VAR读卡器=新的FileReader（）;
reader.onload = onLoadCallback;
reader.readAsDataURL（文件）;
}
＆LT; / SCRIPT＆GT;
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>
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>
这篇关于如何玩的base64音频数据在Firefox上使用HTML5？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
