前端常见兼容性问题系列7: 部分浏览器不支持音频自动播放

1、问题又来了

曾做一个活动页,需要打开页面时自动播放一小段背景音乐。因为音乐持续时间非常短,所以设计这个页面时,没想要设置一个播放控制按钮。一开始我也以为确实没有必要。开发中,用我的老古董机器小米2S测了也没发现啥问题。 但是,用iOS机器测试时,问题就来了,有的平台中可以听到背景音乐(如iOS中的支付宝),有的则始终出不来(如iOS 中的Safari浏览器)。用JavaScript来load音频,再自动触发音频的play()方法,也没有效果。

2、定位问题、查找原因

Google一番发现原来是iOS 4.2.1之后,Safari浏览器中禁止了音频的自动播放,必须在得到用户手动允许(比如触摸屏幕,单击按钮等)的情况下,才能播放音频——也就是说,iOS 4.2.1之后的Safari中, 如果没有得到用户的手动允许,即便对audio标签设置了autoplay="autoplay"属性,也是不会自动播放音频的。参见:https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html在进一步的测试中,我发现安卓5.0及以上的机器也存在iOS Safari中同样的问题。

大致是这些浏览器认为不经过用户允许的情况下播放音频,可能会在用户不知情的情况下给用户带来较大流量的消耗。这与我“好像经常在微信中见到带自动播放背景音乐的页面”的日常生活印象是背道而驰的。经过进一步了解原因,原来是在微信平台里,页面确实可以自动播放音频。

3、解决办法

清楚了问题,办法也就有了。在页面中加上一个按钮,点击按钮时,暂停背景音乐的播放,然后紧接着又播放它。

$('#playBtn').on('click',function(){
    var audio = $('#myAudio')[0];
    audio.pause();
    audio.play();
})

这样,在支持自动播放音频的平台中,背景音乐会自动播放,且点击播放按钮的话,声音也不会停掉;在不支持音频自动播放的平台中,点击声音播放按钮,也能进行背景音乐的播放。

当然,你可能希望这个声音播放按钮在声音播放的时候,显示为播放中状态,点击可以暂停;在声音不播放的时候,显示为暂停状态,点击可以开始播放。

我目前找到的最好的办法是:去掉audio的autoplay="autoplay"属性,让音频在所有平台下都不自动播放。在点击播放声音按钮的时候,才进行播放,并切换按钮的状态。这样就可以正确的切换按钮状态。

那为什么不保留autoplay="autoplay"属性,让能自动播放的平台就自动播,不能播放的平台就点击后再播放呢?事实上我尝试过,但因为对自动播放音频的支持与否不同,各个平台中按钮的初始状态是不一致的,而我无法正确地获取到这种初始状态——我试过用if( $('#myAudio')[0].paused)来进行页面加载后音频播放状态的获取,试验结果也是获取不到。因此,去掉audio的autoplay="autoplay"属性,手动点击按钮播放是经过考量后最合适的方法。

时间: 2024-09-06 23:53:04

前端常见兼容性问题系列7: 部分浏览器不支持音频自动播放的相关文章

前端常见兼容性问题系列1:丢失的CSS补间动画

[前言] 有人说,前端开发的过程常常就是一个不断"入坑"和"出坑"的.这句话道出了前端开发中的磕磕绊绊以及相伴而来的成长.遗憾的是,这些成长大都只存储在工程师的脑海里,日复一日的,相信总有不少人花掉昂贵的时间在重复解决着同样的"坑". Stack Overflow是我们查找一些常见bug解决办法的好帮手,但我们每天也遇到各式各样的新问题以及有一定独特性的问题.若能花一点精力将自己遇到的问题.思考过程.解决方案.延伸感悟等记录下来,让经验更具延续性

前端常见兼容问题系列4:sort方法在浏览器中执行效果的差异

前面写了好几个安卓系统下一些手机中的兼容性问题.这次我们来一个iOS系统下的. 有这么一个HTML片段: <body> <p id="container"></p> <div> <script> var str = '' var arr = [ {name: "3", value: "50"}, {name: "2", value: "60"},

前端常见兼容问题系列6: 一些安卓APP的WebView中&lt;input type=&quot;file&quot;&gt;不工作

有一次想做一个HTML5的图片上传功能,主要是依赖<input type="file">来选择本地的图片.开始一切都很顺利,在浏览器中,在淘宝等容器中,都能如预期进行文件选择和上传.在iOS系统下的APP中也都工作正常,但是在一个安卓APP中,无论怎么尝试选择文件,都始终出不来. 我给input的onchange事件打了个alert(),点击时也没有任何反应.看来是<input type="file">在这个容器中根本就不工作. 经过一番检索

前端常见兼容问题系列3:永远置于顶层的video

上一篇我们把消失的video找了出来.这一篇我们接着在video上面遮盖一个层,以方便放置一些内容.于是,我们这么做: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="format-detection" content="telephone=no, address=no, email

前端常见兼容问题系列5:¥符号在部分Android APP的WebView中不见了

问题再现 ¥符号在涉及到售卖的页面再常见不过了.但是,测试中居然发现,华为荣耀6 plus(系统4.4.2)上,某APP中该符号不见了,所有用到该符号的地方均成了空白(如图1所示). (图1) 而实际上,我所期望的效果如图2所示: (图2) 分析过程 莫非是编码不对?首先,来看一下我是怎么实现¥这个符号的--用的是CSS,形如 .price:before{ content:'\A5'; display:block; font-size:12px; } 的伪元素. 发现这个问题之后,我尝试把它直接

前端常见兼容问题系列2:视频哪里去了?

<video>是HTML5中新增的重要标签,用它来引入视频这一生动活波的媒体形式,简单好用,因而这个标签在各种网页中非常常用.但它却并不那么完美. 问题来啦 我们来看一个再简单不过的页面(代码清单如下),主题内容只添加了一个video标签和一个用于做参照物的p标签: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta

前端常见兼容问题系列8: 安卓机器中通过JS设置焦点无法拉起软键盘

有时候,为了优化用户体验,做交互设计的同学可能会希望让输入框自动获得焦点并弹出软键盘,这样用户不用点击输入框就可以直接输入.的确,这对用户来说很方便.但真正用HTML5页面去实现的时候,却遇到了问题. 首先我做了这样一个demo. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="apple-mobile

Javascript在IE和Firefox浏览器常见兼容性问题总结_javascript技巧

本文总结分析了Javascript在IE和Firefox浏览器常见兼容性问题.分享给大家供大家参考,具体如下: 表单 document.formName.item("itemName") IE:可以使用document.formName.item("itemName")或document.formName.elements["elementName"] Firefox:只能使用document.formName.elements["el

安全高速兼容性 4大主流双核浏览器横评

对用户而言,速度与兼容性是判断一款浏览器好坏的重要标准,具有极速的浏览体验且兼容性极强的双核浏览器摆脱了不同操作系统带来的限制,因而备受用户好评,其中又以 "Trident+Webkit",也就是俗称的"IE+Chrome"的组合最为流行.IE内核具有最广泛的兼容性.而Chrome拥有极致的解析速度.将两者完美的融合已成为双核浏览器的最终目标. 我们以目前主流的4大双核浏览器360极速浏览器.傲游浏览器.搜狗浏览器.QQ浏览器为待测对象,从性能.用户体验.安全性三大