工作手记之ios safari禁止音频自动播放的解决方法

springDevBird 发布于2019-08-21 11:20 / 3445人阅读

摘要：问题场景制作一个，需要微信打开后背景音乐或者其他音频文件进行播放，但是经常出现的结果是，安卓基本没有问题，但是苹果手机确不行，总是不进行播放，这是为什么呢问题原因苹果为了用户着想，禁止了和加载播放。

问题场景：

制作一个H5，需要微信打开后背景音乐或者其他音频文件进行播放，但是经常出现的结果是，安卓基本没有问题，但是苹果手机确不行，总是不进行播放，这是为什么呢？

问题原因：

苹果为了用户着想，禁止了Autoplay和JS "onload" 加载播放。

    User Control of Downloads Over Cellular Networks

    In Safari on iOS (for all devices, including iPad), where the user may
be on a cellular network and be charged per data unit, preload and
autoplay are disabled. No data is loaded until the user initiates it.
This means the JavaScript play() and load() methods are also inactive
until the user initiates playback, unless the play() or load() method
is triggered by user action. In other words, a user-initiated Play
button works, but an onLoad="play()" event does not.

但是客户却是需要上述效果，那该如何解决呢？

解决方法： 方法一：(依赖touch事件进行播放，但是有时候用户并没有操作，此时就有点尴尬了……)

document.addEventListener("touchstart", function(){ 
    audio.play();
}, false);

方法二：(依赖微信的ready事件进行，但是只能解决微信内部，外部浏览器safari还是不行:(……)

document.addEventListener("WeixinJSBridgeReady", function () {
    audio.play();
}, false);

但是如果作品使用的场景基本基于微信的话，那是用方法二可以基本有效的解决这个问题
同时，当一个H5有多个音频时，可以在ready的callback里面重新load一遍，后面在适当的时机调用play就可以了，不然的话，依然会报出play方法undefined的error。

混合云专线服务 ios webrtc 音频播放 webrtc手记之videoengine 自动弹出解决方法 safari支持webrtc音频

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

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

工作手记之ios safari禁止音频自动播放的解决方法

摘要：问题场景制作一个，需要微信打开后背景音乐或者其他音频文件进行播放，但是经常出现的结果是，安卓基本没有问题，但是苹果手机确不行，总是不进行播放，这是为什么呢问题原因苹果为了用户着想，禁止了和加载播放。问题场景：制作一个H5，需要微信打开后背景音乐或者其他音频文件进行播放，但是经常出现的结果是，安卓基本没有问题，但是苹果手机确不行，总是不进行播放，这是为什么呢？问题原因：苹果为了...

Flink_China 2019-08-05 10:32 评论0 收藏0
工作手记之ios safari禁止音频自动播放的解决方法

摘要：问题场景制作一个，需要微信打开后背景音乐或者其他音频文件进行播放，但是经常出现的结果是，安卓基本没有问题，但是苹果手机确不行，总是不进行播放，这是为什么呢问题原因苹果为了用户着想，禁止了和加载播放。问题场景：制作一个H5，需要微信打开后背景音乐或者其他音频文件进行播放，但是经常出现的结果是，安卓基本没有问题，但是苹果手机确不行，总是不进行播放，这是为什么呢？问题原因：苹果为了...

wangbinke 2019-06-25 15:53 评论0 收藏0
音频视频开发问题总结

摘要：移动端音频视频自动播放有别于端，移动端浏览器禁止音频和视频自动播放能力，而当前微信内置浏览器是支持自动播放的。大部分安卓机给或标签设置属性即可而其它机型特别是系统，则需要在微信加载完毕并触发事件后，利用直接调用音频或视频的方法。移动端音频、视频自动播放有别于 PC 端，移动端浏览器禁止音频和视频自动播放能力，而当前微信内置浏览器是支持自动播放的。大部分安卓机给或标签设...

hosition 2019-08-05 12:13 评论0 收藏0
工作手记之工作点滴积累之Javascript方法篇

摘要：最新使用的组织机构代码在年颁布实施，由位数字或大写拉丁字母本体代码和位数字或大写拉丁字母校验码组成。本体代码采用系列即分区段顺序编码方法。 1.截取指定字节数的字符串 /** * 截取指定字节的字符串 * @param str 要截取的字符穿 * @param len 要截取的长度，根据字节计算 * @param suffix 截取前len个后，其余的字符的替换字符，一般用… ...

0xE7A38A 2019-08-20 10:28 评论0 收藏0
H5项目常见问题汇总及解决方案

摘要：解决方案可以解决在手机上点击事件的延迟的模块，事件也是为了解决在的延迟问题显示屏原理及设计方案说明屏是一种具备超高像素密度的液晶屏，同样大小的屏幕上显示的像素点由个变为多个，如在同样带下的屏幕上，苹果设备的显示屏中，像素点个变为个。转自 https://github.com/FrontEndZQ... H5项目常见问题及注意事项 Meta基础知识： H5页面窗口自动调整到设备宽度，并...

WelliJhon 2019-08-05 17:52 评论0 收藏0