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

简介: iOS 4.2.1之后的Safari中, 如果没有得到用户的手动允许,即便对audio标签设置了autoplay="autoplay"属性,也不会自动播放音频的,安卓5.0及以上的机器也存在同样问题。去掉audio的autoplay属性,手动点击按钮播放是经过考量后最合适的方法。

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"属性,手动点击按钮播放是经过考量后最合适的方法。

目录
相关文章
|
1月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
130 2
|
3月前
|
存储 缓存 前端开发
前端谷歌浏览器面版属性
【8月更文挑战第19天】前端谷歌浏览器面版属性
44 0
|
3月前
|
Web App开发 监控 前端开发
前端必备浏览器调试工具
【8月更文挑战第19天】前端必备浏览器调试工具
59 0
|
8天前
浏览器的兼容性问题
浏览器的兼容性问题。
18 4
|
13天前
|
前端开发 JavaScript API
前端开发的秘密花园:这些技巧让你轻松应对各种浏览器兼容性问题!
【10月更文挑战第31天】前端开发是一个充满创意与挑战的领域,追求极致用户体验的同时,浏览器兼容性问题却时常阻碍我们前进。本文将介绍几种解决浏览器兼容性的最佳实践:使用CSS前缀、Autoprefixer工具、现代JavaScript特性与Babel转译、Polyfill与Feature Detection、响应式设计以及跨域问题处理。掌握这些技巧,助你轻松应对各种兼容性难题,创建更稳定、用户友好的网页应用。
27 3
|
13天前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
|
22天前
|
缓存 前端开发 JavaScript
"面试通关秘籍:深度解析浏览器面试必考问题,从重绘回流到事件委托,让你一举拿下前端 Offer!"
【10月更文挑战第23天】在前端开发面试中,浏览器相关知识是必考内容。本文总结了四个常见问题:浏览器渲染机制、重绘与回流、性能优化及事件委托。通过具体示例和对比分析,帮助求职者更好地理解和准备面试。掌握这些知识点,有助于提升面试表现和实际工作能力。
57 1
|
1月前
|
机器学习/深度学习 自然语言处理 前端开发
前端大模型入门:Transformer.js 和 Xenova-引领浏览器端的机器学习变革
除了调用API接口使用Transformer技术,你是否想过在浏览器中运行大模型?Xenova团队推出的Transformer.js,基于JavaScript,让开发者能在浏览器中本地加载和执行预训练模型,无需依赖服务器。该库利用WebAssembly和WebGPU技术,大幅提升性能,尤其适合隐私保护、离线应用和低延迟交互场景。无论是NLP任务还是实时文本生成,Transformer.js都提供了强大支持,成为构建浏览器AI应用的核心工具。
434 1
|
26天前
|
NoSQL 前端开发 MongoDB
前端的全栈之路Meteor篇(三):运行在浏览器端的NoSQL数据库副本-MiniMongo介绍及其前后端数据实时同步示例
MiniMongo 是 Meteor 框架中的客户端数据库组件,模拟了 MongoDB 的核心功能,允许前端开发者使用类似 MongoDB 的 API 进行数据操作。通过 Meteor 的数据同步机制,MiniMongo 与服务器端的 MongoDB 实现实时数据同步,确保数据一致性,支持发布/订阅模型和响应式数据源,适用于实时聊天、项目管理和协作工具等应用场景。
|
3月前
|
机器学习/深度学习 存储 前端开发
实战揭秘:如何借助TensorFlow.js的强大力量,轻松将高效能的机器学习模型无缝集成到Web浏览器中,从而打造智能化的前端应用并优化用户体验
【8月更文挑战第31天】将机器学习模型集成到Web应用中,可让用户在浏览器内体验智能化功能。TensorFlow.js作为在客户端浏览器中运行的库,提供了强大支持。本文通过问答形式详细介绍如何使用TensorFlow.js将机器学习模型带入Web浏览器,并通过具体示例代码展示最佳实践。首先,需在HTML文件中引入TensorFlow.js库;接着,可通过加载预训练模型如MobileNet实现图像分类;然后,编写代码处理图像识别并显示结果;此外,还介绍了如何训练自定义模型及优化模型性能的方法,包括模型量化、剪枝和压缩等。
51 1