h5 audio音频文件流在ios中无法正常播放的大坑解决

皮秒亿

已于 2023-05-29 09:11:19 修改

阅读量1.7w

点赞数 2

CC 4.0 BY-SA版权

分类专栏： h5移动攻城狮文章标签： html5

于 2019-01-15 14:33:22 首次发布

本文链接：https://blog.youkuaiyun.com/qq_33593958/article/details/86492141

h5移动攻城狮专栏收录该内容

7 篇文章

订阅专栏

本文分享了在不同平台如Android和iOS上实现音频播放的解决方案，包括使用文件流、audio标签以及解决声音播放异常等问题，特别针对iOS外放无声的情况给出了解决思路。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、通过文件流
2、循环多个audio标签来播放
3、android可以ios出现加载最后一点后闪退，文件损坏
4、android可以播放、ios能播放但是没有声音

以上是遇到的大坑之旅。。。下面就直接来为屌丝们来解决：

var $audio = document.getElementById("audio"+index);
var source = document.createElement('source');

var xml= new XMLHttpRequest();
xml.open("GET", url, true);
xml.onreadystatechange = function (oReq) {
   var content = oReq.response;
   var blob = new Blob([content]);
   source.type = "audio/mpeg";
   source.src = window.webkitURL.createObjectURL(blob)|| URL.createObjectURL(blob);
   source.autoplay = "autoplay";
   source.controls = "controls";
   $audio.appendChild(source);
   $audio.currentTime = 0;
   $audio.load();
   if($audio.paused){
     $audio.play();
   }else{
     $audio.pause();
   }
}

xml.responseType = "blob";
xml.addEventListener("progress", function (evt) {
   //XXXXXXXXXXX
}, false);
xml.onload = function (oEvent) {};
xml.send();

至于ios播放插入耳机有声音，外放没有声音。真是无语，是ios手机设置了静音按键。我擦，结束