后台语言返回的二进制流音频文件在微信浏览器兼容性问题_html5的audio标签播放二进制文件流

最近开发音频在移动端播放功能，使用HTML5 audio标签，没有采用微信的jssdk

对于直接指向录音文件的url 直接使用src=url 是没有问题，但是当返回的是二进制流音频文件就会有一系列兼容性问题。

对于Android手机：

直接使用标签<audio controls src="url"></audio> 在一些手机（比如荣耀8 9，vivo21）微信中将不能正常播放，考虑是没有预加载导致。通过js audio.oncanplaythrough属性将音频全部加载到缓存中，以上手机可以正常播放录音，但出现新问题，所以录音都不能完成播放，只能播放十多秒，考虑是不是有限制缓存区大小后，改为audio.onloadedmetadata属性播放是在加载，问题得到解决。

对于iOS手机：

处理Android手机的方法使用在ISO微信浏览器中都不能完美解决问题，后面采用XMLHttpRequestd对象的响应数据的blob类型，解决该问题

下面贴出代码

//Android
function loadAudio(src, callback) {
    var audio = new Audio(src);
    audio.onloadedmetadata = callback;
    audio.src = src;
}
loadAudio(url,function(){
    var html = '<audio controls style="width:100%">'+
						'<source src="'+url+'" type="audio/ogg">'+
						'<source src="'+url+'" type="audio/mpeg">'+
					  	'您的浏览器不支持 audio 元素。'+
					'</audio>'; 
    //插入到页面
});
 
//ios
function iosRunMain(url){
	var xhr = new XMLHttpRequest();
	xhr.open("get", url, true);
	xhr.responseType = "blob";
	xhr.onload = function() {
	    if (this.status == 200) {
	        var blob = this.response
            ,ado = document.createElement("audio");
	        ado.style.width = '100%';
	        ado.onload = function(e) {
	          window.URL.revokeObjectURL(ado.src);
	        };
	        ado.src = window.URL.createObjectURL(blob);
	        ado.controls = 'controls';
　　　　　　 //将节点插入HTML
 
		}
	}
	xhr.send();
}