audio自动播放在苹果系统下的兼容性解决方案

leon 发布于2019-08-20 16:33 / 2588人阅读

摘要：针对近期做的宣传页，页面中含有元素，且是自动播放，页面写起来挺顺利，但是在测试的时候，发现在苹果系统下，不能自动播放，究其原因，是苹果系统默认音频文件在不发生任何事件的情况下不能自动播放。

针对近期做的h5宣传页，页面中含有audio元素，且是自动播放，页面写起来挺顺利，但是在测试的时候，发现在苹果系统下，audio不能自动播放，究其原因，是苹果系统默认音频文件在不发生任何事件的情况下不能自动播放。
针对这个问题，度娘一番，终于解决这个问题，现在把解决方案分享给大家。
有两种解决方法：
第一种：利用微信提供的接口：wx.config 和 wx.ready
先引入js文件

在页面添加以下代码

wx.config({
    debug : false, // 这里为false
    appId : "", // 以下随意填写即可
    timestamp : (new Date()).getTime(),
    nonceStr : "",
    signature : "",
    jsApiList : ["checkJsApi"] 
    });
wx.ready(function() {
    audio.play();
    });

第二种方法：WeixinJSBridgeReady，对就这个东东可以搞定这个问题
代码如下：

var audo = document.getElementById("myAudio");
audo.play();
document.addEventListener("WeixinJSBridgeReady", function() {
    audo.play();
    }, false);

不过对第二种方法，建议不要轻易使用。
本文属于原创，如果用问题，大家共同交流，共同进步。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82998.html

那是我在夕阳下的奔跑：边跑边学习html5之audio与video

摘要：尤其是乔布斯在年发布的一篇的文章。乔布斯在里面写下了关于的一点看法，说明自己为什么不使用，谈到关于的一些问题，比如开放性，安全性，对于设备续航的影响，不利于触摸屏，等等。终于，于年月日，爸爸也放弃治疗了，宣布将于年正式退休。今天为大家分享一下html5中的视频（video）与音频（audio）。在进入主题之前我们先了解一下Flash与html5这两种技术的时代背景与发展历史。 1.前...

gself 2019-08-20 19:04 评论0 收藏0
那是我在夕阳下的奔跑：边跑边学习html5之audio与video

摘要：尤其是乔布斯在年发布的一篇的文章。乔布斯在里面写下了关于的一点看法，说明自己为什么不使用，谈到关于的一些问题，比如开放性，安全性，对于设备续航的影响，不利于触摸屏，等等。终于，于年月日，爸爸也放弃治疗了，宣布将于年正式退休。今天为大家分享一下html5中的视频（video）与音频（audio）。在进入主题之前我们先了解一下Flash与html5这两种技术的时代背景与发展历史。 1.前...

flybywind 2019-08-01 17:31 评论0 收藏0
那是我在夕阳下的奔跑：边跑边学习html5之audio与video

摘要：尤其是乔布斯在年发布的一篇的文章。乔布斯在里面写下了关于的一点看法，说明自己为什么不使用，谈到关于的一些问题，比如开放性，安全性，对于设备续航的影响，不利于触摸屏，等等。终于，于年月日，爸爸也放弃治疗了，宣布将于年正式退休。今天为大家分享一下html5中的视频（video）与音频（audio）。在进入主题之前我们先了解一下Flash与html5这两种技术的时代背景与发展历史。 1.前...

LiuZh 2019-08-29 13:17 评论0 收藏0
css前端初始化

摘要：初入前端，若有不足欢迎指正头部初始化标签问题一般要添加背景音乐的话，我们的第一反应就是使用标签，但是这里有一个坑。前言当下移动端横行，平常我们做一些移动端的项目，接触最多的就是H5，虽然做移动端不用兼容IE，但是我们要兼容微信、app、ios、android... 今天就给写几个平常开发经常会遇到的问题以及解决办法。初入前端，若有不足欢迎指正！头部初始化 ...

mikyou 2019-08-29 16:19 评论0 收藏0