html2canvas.js使用过程中在ios下遇到的bug——背景音乐重复播放

在上一篇文章中已经介绍了其中遇到的一个bug——截图不完整，点击打开链接。

这篇文章给大家说一下在使用截图时，遇到的另一个bug，背景音乐在IOS11下会重复播放的问题！

（说明：项目是移动端项目，只限IOS11及以上系统，若是PC端、安卓bug、IOS10/9/8，请对比参考）

遇到此问题的时候，实在很无语，因为IOS11刚刚出来，在网上搜索有关bug的文章实在没有，又不得不用，今日就把工作中遇到的问题给大家分享一下。

首先说一下的工作原理

加载后将会浏览页面上的所有元素，集合所有页面元素的信息，然后用户就可以通过把整个页面（整屏）截图下来。

换句话来说，不会实际上的截图，而是通过从DOM读取的足够信息去建立一个页面的展示镜像，生成的图片流程。

这就会导致只会渲染它认识的正确的DOM元素属性，还有很多CSS属性是不会生效的，也就渲染不出来了。

使用方法

html2canvas(element, options);

html2canvas(element, {onrendered: function(canvas) {// canvas 是最后一个渲染的 元素}
});

个人分析在IOS11下背景音乐在调用()会重复播放，说明背景音乐在从DOM读取信息渲染成图片时，背景音乐在已有的播放音乐没有停止的情况下，又重复加载了一次，所以想到的解决方法就是在()在调用时，背景音乐不自动播放，不管想的原理对不对，但是这样还真解决的问题，代码附上，供大家参考一下。

//解决ios11下，重复加载背景音乐的bug
function iosMusic(){var agent = navigator.userAgent.toLowerCase() ;//判断手机系统// console.log(agent);var version;if(agent.indexOf("like mac os x") > 0){//iosvar regStr_saf = /os [\d._]*/gi ;var verinfo = agent.match(regStr_saf) ;version = (verinfo+"").replace(/[^0-9|_.]/ig,"").replace(/_/ig,".");//获取具体的系统版本号console.log(version)var typeNum = version.split(".")[0];//获取系统版本号的第一位数字console.log(typeNum)if(typeNum >= 11){$("#myaudio").removeAttr("autoplay");}}
}

这里用了一个手机系统的判断，最重要的一句话是给背景音乐删除自动播放的属性

$("#myaudio").removeAttr("autoplay");

然后调用时，引用此函数

为什么在IOS11下背景音乐会重复播放，这个究竟是IOS11系统的兼容问题，还是插件的问题，小学生没有太多研究，望大神给指点，目前只是个人碰到的问题与解决的方法，与同行们分享一下！前端道路深似海，与大家共奋进！

本人项目链接地址参考：点击打开链接