最近开发音频在移动端播放功能,使用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();
}