当前位置：网站首页 > 技术文章 > 正文

html5背景音乐不自动播放解密(原创)

myzbx 2024-12-28 14:19 15 浏览

在切图网一个客户项目中，用到了背景音乐，采用了html5 audio标签，并且设置了 autoplay 自动播放，在PC上正常，但是一到手机下就无法自动播放。

即便使用JS ,调用audio 对象的播放方法 play() 也不能自动播放！这是为什么呢？

于是打破砂锅问到底的决心，做了好多种demo，例子

http://m.slicy.cn/bg-music.html

测试，苹果、安卓还是不行，最后发现真相的我，眼泪掉下来。原因在这：

为了防止不必要的自动播放浪费流量，手机网页访问带有audio的页面是不会自动播放的。

Safari屏蔽了autoplay，必须由用户交互事件触发，因为autoplay在移动网络环境下可能会造成用户流量费剧增

下面是引自Safari Reference

In Safari on iPhone OS (for all devices, including iPad), where the
user may be on a cellular network and be charged per data unit,
autobuffering 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()
method is triggered by user action.

HTML 音频

上一篇：20个免费音乐音效下载网站，无版权素材商业影片也可用
下一篇：调用酷狗搜索音乐播放API实例html页面源码

相关推荐

以文本的方式绘制简单的SVG流程图——flowchart.js: 介绍flowchart.js是在浏览器和终端中运行的流程图DSL和SVG渲染。节点和连接是分别定义的，因此可以重复使用节点，并可以快速更改连接。也可以在DSL中对节点和连接器样式进行细微的更改。Git...

全国首套构网型SVG在木垒投运: 中新网新疆新闻1月5日电（翟文辉）12月29日，全国首套构网型SVG在新疆木垒华电220千伏四十个井子汇集站并网，本项目是新疆电网继阿克陶构网型储能后又一次构网型支撑项目示范。为全面响应国家“双碳”...

Popmotion – 小巧，灵活的 JS 运动引擎: Popmotion是一个只有12KB的JavaScript运动引擎，可以用来实现动画，物理效果和输入跟踪。原生的DOM支持：CSS，SVG，SVG路径和DOM属性的支持，开箱即用。Popmoti...

零基础教你学前端——43、初识SVG: 解决网站图标问题的最佳方案——SVG！SVG是一种基于XML语法的图像格式，英文全称是：ScalableVectorGraphics，即可缩放矢量图，是W3C的一项建议。我们用手机拍摄...

2.3 文件格式全解:PSD/JPG/PNG/SVG/GIF: 2.3文件格式全解：PSD/JPG/PNG/SVG/GIF一、文件格式的核心意义文件格式是数字图像的存储规则，决定了：-信息保留程度（图层/透明度/动画）-压缩方式与画质损失-跨平台兼容性-...

vite v6.3.2 发布!HMR 优化+CSS 增强+稳定性提升，前端开发再提速!: 前言：Vite6.3.2来了！2025年4月18日，Vite团队正式发布了v6.3.2版本！虽然是一个小版本更新，但修复了多个关键问题，并带来了性能优化和稳定性提升，让开发体验更丝滑！如果你还...

一篇文章带你了解SVG 蒙版(Mask): SVG蒙版功能可将蒙版应用于SVG形状。蒙版可确定SVG形状的哪些部分可见，以及具有什么透明度。运行效果可以将SVG蒙版视为剪切路径的更高级版本。一、简单的蒙版代码解析：本示例使用ID=mask1定义...

SVG实现的流程图绘制: 一、项目简介使用SVG技术实现的流程图绘制二、实现功能流程图块生成、连线、拖拽产生相应的xml和xpdl导入导出json数据放大缩小功能保存操作（选择、自动插入、开始结束、普通活动、子活动、块活动、路...

解锁国内 404 页面:Next.js 设置指南和 33 个有趣 SVG 资源分享: 前言当我们访问网站时，如果访问到不存在的路径时，会出现404错误。为了避免给访问者带来不良体验，设计网站时通常会在页面上展示“404页面不存在”的提示，并引导用户进行返回首页等操作。因此在建立网...

交互设计师做好动画后，提交给开发的文档有哪些?: 谢邀！简单的说一下自己的看法。首先从制作动画开始。目前制作动画的方式主要有：Gif动画视频动画Web动画，而Web动画又包括：CSS动画、JS动画（Canvas动画、原生JS动画API）、SVG动画等...

Motion for Vue:为Vue量身定制的强大动画库: 在前端开发中，动画效果是提升用户体验的重要手段。Vue生态系统中虽然有许多动画库，但真正能做到高性能、易用且功能丰富的并不多。今天，我们要介绍的是MotionforVue（motion-v），...

Web开发人员的福音!8个实用的SVG工具: SVG可缩放矢量图形（ScalableVectorGraphics）是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。SVG是W3C在2000年8月制定的一种新的二维矢量图形格式...

一键画波浪线、一键多图片调色?这3个网站好玩到停不下来: 作为一个经常收集网站的PPT设计师，无意中发现了一些超级有趣的网站。只要你动手能力足够强，就一定会利用它做出创意作品。不说废话，直接进入主题。1、炫酷的光线绘画网站http://weavesilk.c...

vite 6.2.5 更新速递:告别SVG路径Bug，构建效率再提升!: Vite6.2.5更新公告2025年4月3日，Vite团队正式发布了Vite6.2.5版本！此次更新虽然是一个小版本迭代，但修复了一个关键问题，涉及SVG文件路径检查，对前端开发者尤...

DrawSVG – SVG 路径动画 jQuery 插件: jQueryDrawSVG使用了jQuery内置的动画引擎实现SVG路径动画，用到了stroke-dasharray和stroke-dashoffset属性。DrawSVG是完全...

一周热门

最近发表

首页
收录
顶部