Mobile Safari:音频 + 缓存清单

2023-11-22

我有一个小型网络应用程序,只需单击几个按钮即可播放非常短的声音。它明确针对 iOS (iPad) 上的移动 Safari。

在阅读了此处和其他地方有关移动 Safari 上的 HTML5 音频在这种情况下的几个“缺点”并尝试了一些“黑客”和技巧之后,我陷入了 Safari 看起来很简单的情况(因为缺乏更好的词)破碎的:

我可以在单击按钮 A 时播放声音 A(它需要很长时间才能启动 - 我假设它[再次]下载?)。之后,单击按钮 B 将立即再次播放声音 A。按钮 C 也是如此。在某些情况下,它会播放不同的声音,有时甚至是正确的声音。但主要是声音 A。使用的格式是 .aiff ,现在是 .m4a 。

在自己写了几个小版本之后,我决定使用Buzz处理声音加载/播放等的库。

有趣的是,他们的演示包括一个游戏,它几乎完全满足了我的需要and触发相同的错误行为。我什至遇到了这样的情况:移动 Safari 中任何选项卡中的任何音频播放器都会播放 Buzz 演示游戏中的特定声音(!)。

我希望缓存清单可以帮助克服苹果的预加载限制,并强制应用程序在离线模式下按下按钮后立即播放声音。但在确认整个应用程序已被缓存后,我无法在离线模式下播放/听到任何声音。

有没有人设法让这样的东西以某种方式工作?(——在了解了苹果如何处理某些事情后,我不期望有太多回应……)


更新1:

此答案中的示例会产生相同的效果:如何在 iPad 上使用 HTML5/Javascript 合成音频


更新2:

更新 iOS(以及 Safari)似乎可以解决音频错误。不过,缓存清单似乎不会影响音频文件。这些文件根本不可用。

删除缓存清单后,应用程序可以正常工作,但将其添加到“主屏幕”并重新加载也会阻止音频播放。


我希望我能告诉您有一个神奇的公式可以让所有 html5 媒体完美运行,但事实并非如此。目前对 HTML5 音频/视频的移动支持相当差;比它的桌面前身落后得多。更糟糕的是,每个不同的平台对其处理方式都不同,并且大多数平台仅在半新版本中支持它。

不过,您可以采用一些技巧来使媒体文件在移动 Safari 中正常工作。为了解释它们,您需要了解它的一些缺点。


1) 无法加载多个音频/视频文件

根据我的经验,浏览器一次只会加载一个文件。如果您播放一个文件,请去播放另一个文件,然后回来,它会重新加载该文件。而且,虽然我自己没有尝试过,但我不相信缓存清单会对您有所帮助。

我所要做的就是将所有音频文件合并为一个大音频文件。然后,根据请求的音轨,我将播放位置移动到适当的起始位置并播放该曲目。然后,我将使用 setInterval 每隔几毫秒检查一次播放,以确定当前播放位置是否到达曲目末尾。一旦完成,我就暂停了。另外,我在每个曲目之间给自己留了几秒(2-3)秒的时间,以防手机的 CPU 负载过重,检查提要有点太晚了。

2) 无法自动播放音频/视频文件

Apple 在其 HTML5 媒体标签技术中内置了这样的限制:这些曲目只能响应用户点击事件而加载和播放。这样,当您访问他们的网站时,开发人员就无法自动播放烦人的曲目。

当我使用音频/视频标签时,我试图构建一个富媒体广告。因此,当您单击横幅并展开广告时,我将音频/曲目加载挂钩到横幅单击事件。

我建议你应该做的是弹出一个小灯箱,询问用户是否要打开/关闭声音。您可以将加载函数附加到该弹出框的单击事件,无论用户是否打开或关闭声音。

就我个人而言,我在使用 load() 函数时运气不佳。我会运行该函数来加载音频,然后单击播放,它会再次加载它。可能一直以来我都没有做对,所以请随时证明我错了并让它发挥作用。我所做的是告诉曲目播放,这样它就会开始加载,然后我使用 setInterval 来查看当前播放时间是否只增加了几毫秒。一旦我注意到它开始播放曲目,我就会立即暂停。

3)音频/视频标签仅在iOS 4.0及更高版本中支持

没有什么技巧可以解决这个问题。这只是事实。


以下是一些在我使用音频/视频标签进行开发时提供帮助的网站:

http://www.w3.org/wiki/HTML/Elements/video
http://dev.w3.org/html5/spec-author-view/video.html#media-elements

祝你好运!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Mobile Safari:音频 + 缓存清单 的相关文章

随机推荐

  • 如何使用 jQuery 去除 HTML 标签?

    我想从字符串中删除 HTML 标签 例如假设我们有字符串 p example ive got a string p 我怎样才能编写一个函数来删除 p p p 并仅返回 示例我有一个字符串 Use the text 功能 var text p
  • Pydrive 谷歌驱动器自动身份验证

    我有以下代码 from pydrive auth import GoogleAuth gauth GoogleAuth gauth DEFAULT SETTINGS save credentials True client config b
  • 如何在没有 jQuery 的情况下用 JavaScript 打开 JSON 文件?

    我正在用 JavaScript 编写一些代码 在此代码中我想读取一个 json 文件 该文件将从 URL 加载 如何在 JavaScript 中的对象中获取此 JSON 文件的内容 例如 我的 JSON 文件位于 json main jso
  • 访问 commerce.js 公钥时出现 TypeError: t is undefined in React

    我试图在 React 中访问 c ommercejs 库的公钥 但我没有这样做并遇到了这个错误 我不明白为什么我会收到此错误 src lib commerce js import Commerce from chec commerce js
  • nvd3 中的cumulativeLineChart 上的自定义工具提示

    当我将鼠标悬停在累积折线图上的线上时 我在某个 y 时间收到一条工具提示消息 x 值 我想编辑此消息并添加更多内容 因为在我的值数组中 我有包含 X x Y y Z z Dt date 的 json 所以我希望显示一条自定义消息 列出日期的
  • 使用 ctypes 读取进程内存

    我正在开发一个小型单人训练器 我不知道为什么 ReadProcessMemory 函数不起作用 通常它返回 False 或 True 但在这种情况下什么也不返回 GetlastError 给我错误代码 6 coding cp1252 imp
  • 如何使用 watchFile() 在 Node.js 中观看符号链接文件

    我正在尝试使用以下代码监视与 node js 的 watchFile 进行 软 符号链接的文件 var fs require fs file somesymlink config persist true interval 1 fs wat
  • R情节地忽略文本标签对齐hjust

    我正在使用plotly 4 8和ggplot2 3 0 0 并尝试将文本标签添加和对齐到我的散点图 然而 似乎hjust参数被plotly忽略geom text aes hjust left 也尝试过hjust 0 GG 图输出 看到它在绘
  • 我应该如何解码 UTF-8 字符串

    我有一个像这样的字符串 About xee x80 x80John F Kennedy xee x80 x81 xe2 x80 x99s Assassination unsolved mystery xe2 x80 x93 45 years
  • 使用可变键解析 json

    我刚刚想出了一个具有挑战性的问题 下面是 json 响应 其中 key 是变量 GUID 我该如何解析它 我尝试过 Google Gson 但没有成功 87329751 7493 7329 uh83 739823748596 type wo
  • 使用 MSVC 2013 初始化“static constexpr double”

    标题说明了一切 这两种通常的方法都不起作用 我缺少什么 1 class Cl static constexpr double PI constexpr double Cl PI 3 14 26 错误 C2737 私有 静态双常量 Cl PI
  • 如何测试php中是否存在远程图像文件?

    这会吐出一大堆 否 但图像在那里并且路径正确 因为它们显示为 img foreach imageNames as imageName image http path imageName jpg if file exists image ec
  • Entity Framework Core:如何在 Linq 中使用 DateDiff?

    我想在 EF Core 中创建一个查询 如下所示 SELECT SUM DATEDIFF DAY FromDate ToDate AS Diff FROM Table1 上面的查询适用于 T SQL 如何在 Linq 中创建查询 Using
  • java中什么破坏了局部变量?

    我怀疑方法局部变量仅在方法执行时存在 另外 当Eden or Long generation块溢出 minor major GC 等 那么 如果在方法体的末尾怎么办Eden没有溢出 所以不需要触发GC 尽管没有触发major minor G
  • 将 url 路径映射到 nginx 中的服务器

    如何映射表单的 URIstaging example com siteA到位于的虚拟服务器 var www siteA 主要限制是我不想为 siteA 创建子域 到目前为止 我看到的所有 nginx conf 示例都依赖于子域来进行映射 T
  • AngularJS – 在指令中的元素后面追加行

    我的问题类似于this one 但我不想在行前面添加行 而是希望将其附加 这不起作用 app directive createTable function compile return link function scope element
  • 隐含的字符串比较,0=='',但是1=='1'

    我正在调试一些东西 发现 JavaScript 中有一些奇怪的地方 alert 1 gt false alert 0 gt true alert 1 gt false 隐含的字符串比较 0 应该 0 是有意义的 对于所有非零值都是如此 但为
  • webkit 中的选择范围 (Safari/Chrome)

    我正在使用内容可编辑的 iframe 在 javascript 中创建语法突出显示器 最重要的事情之一是能够正确缩进代码 以下代码的工作方式与在 Firefox 中的工作方式相同 Create one indent character va
  • Maven 不复制非 java 文件

    我有一个 pom xml 文件 其中包含以下内容
  • Mobile Safari:音频 + 缓存清单

    我有一个小型网络应用程序 只需单击几个按钮即可播放非常短的声音 它明确针对 iOS iPad 上的移动 Safari 在阅读了此处和其他地方有关移动 Safari 上的 HTML5 音频在这种情况下的几个 缺点 并尝试了一些 黑客 和技巧之