iPhone HTML5 音频标签不起作用

2024-04-24

我遇到了音频标签无法在 iPonhe 上工作的问题。在 W3Schools 网站上测试时它可以播放 HTML5 音频标签,但不适用于我下面的网站

 <audio autoplay ><source  src="audio/alarm1.mp3" type="audio/mpeg"></audio>

此代码在桌面和 Android 浏览器上运行良好,但不适用于 ipod 或 iphone safari

EDITED

音频文件似乎工作正常,但事实并非如此autoplay

有没有一种方法可以让用户按下按钮,然后在需要时播放音乐而无需用户干预?


自动播放不适用于 iOS 和 Android。 它们需要某种用户交互来播放音频或视频。

如果您在用户事件(单击/触摸开始)上播放音频,它将正常播放。

如果您没有应该播放的用户事件,我通常会在文档上绑定一个 touchstart 事件,并在我收到的第一个 touchstart 上播放和暂停音频。 然后每当我需要播放音频时,我都会再次播放。 (如果使用用户交互播放和暂停音频一次,则下次无需用户交互即可再次播放)。

//play and pause it once
document.addEventListener('touchstart', function () {
    document.getElementsByTagName('audio')[0].play();
    document.getElementsByTagName('audio')[0].pause();
});

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

iPhone HTML5 音频标签不起作用 的相关文章

  • 为什么百分比边距会导致换行?

    div style background color dd3fb8 a style margin left 10 a a a b a a c a div 在上面的示例中 字母 c 将在新行上 但如果我将 margin left 设置为px单
  • 如何在html5中使用现有的sqlite数据库

    我已经使用 sqlite 浏览器创建了一个 sqlite 数据库文件 我有一个文件 sample sqlite 现在我想知道如何在 javascript 中导入此文件并使用 sqlite 文件中的数据 我一直在使用下面提到的脚本 var d
  • 如何检测形状是否被单击(HTML5 画布)?

    我正在使用画布绘制不同的形状 如矩形 三角形 六边形等lineTo方法如这个博客 http blog riacode in 2011 03 03 drawing regular polygons in html5 canvas 我只是想要一
  • Firefox 中缺少表格边框

    我有一个包含数据的表格 当我在 Firefox 中查看它时 某些边框没有显示 请参阅随附的屏幕截图 在任何其他浏览器中都不会发生这种情况 在 Firefox IE Safari 和 Chrome 中测试 知道为什么以及如何解决它吗 我使用样
  • 单击按钮时执行 python 脚本

    我有一个带有一个按钮的 HTML 页面 当我们单击该按钮时 我需要执行一个 python 脚本 并返回到包含结果的同一 HTML 页面 所以我需要对返回值进行一些验证并执行一些操作 这是我的代码 HTML
  • 使用 CSS 更改文本选择颜色?

    我目前正在开发一个网站 我想更改文本选择颜色 我已经有点工作了 这是我的样式表中的代码 部分 selection background FF0099 color black text shadow none moz selection ba
  • iframe可以弹出Lightbox风格的盒子吗?

    这个问题不是关于在 Lightbox 中弹出 iframe 的问题 而是关于在 Lightbox 中弹出 iframe 的问题 相反 它是关于页面上的 iframe 它可以在页面中启动自己的 Lightbox 样式框contains那个 i
  • 如何隐藏表格行溢出?

    我有一些 html 表 其中文本数据太大而无法容纳 因此 它垂直扩展单元格以适应这种情况 因此 现在存在溢出的行的高度是数据量较小的行的两倍 这是无法接受的 如何强制表格具有相同的行高1em 这是一些重现该问题的标记 表格应该只有一行的高度
  • PHP cookie 和会员安全

    我创建了一个论坛 该论坛在登录时使用 PHP 会话来确定用户 ID 并使用 cookie 来进行日志登录 我想我有两个问题 这是最好 最安全的方法吗 可以使用javascript通过地址栏手动添加cookie 这是一个巨大的安全风险 有没有
  • 选项卡式导航

    我真的很难弄清楚如何执行以下操作 我想要有两个选项卡 水平相邻 一个用于搜索 并如此标记 另一个用于帖子 如此标记 当选择搜索选项卡时 我希望出现一个搜索框 当选择帖子选项卡时 我希望出现另一个搜索框 我不想隐藏搜索框 我猜它本质上是使用
  • 如何使用 HTML/CSS/jQuery 编写复数分数?

    我希望能够使用 HTML CSS jQuery 编写分数 而不是使用 TeX 渲染器甚至 MathML 目前 有一个很好的解决方法可以编写简单的分数 如果您有one term对于分子和分母来说 但是一旦你开始使用多个术语 它看起来就相当可怕
  • 使 Flex 子项的高度等于网格列内父项的高度

    我正在尝试构建一个定价表 其中每列都包含一张卡片 我希望所有卡片都拉伸到其父 col 元素的高度 注意 我正在使用 Bootstrap 4 并尝试使用现有的网格系统来实现这一点 为了保持一致性 并使用这个特定的标记 我无法让卡片增长到其父容
  • 如何在 Ruby 中获取网页的 HTML 源代码 [重复]

    这个问题在这里已经有答案了 在 Firefox 或 Safari 等浏览器中 打开网站后 我可以右键单击该页面 然后选择以下内容 查看页面源代码 或 查看源代码 这显示了该页面的 HTML 源代码 在 Ruby 中 是否有一个函数 也许是一
  • CSS 定位相对于固定/绝对

    如果我对 CSS 显得很 菜鸟 请见谅 我一直在尝试设置以下 0 width 100 height y border 1px solid black a position fixed float left width x height y
  • 如何偏移网格项目,同时移动其兄弟项目? [复制]

    这个问题在这里已经有答案了 我正在使用 CSS 网格 我想偏移一个元素 以便它在网格列上水平移动 我还希望这个元素保留其当前宽度 并应用偏移值此外到元素的宽度 Example container display grid grid temp
  • “块样式”单选按钮适用于除 iPad 之外的所有设备

    我有一组单选按钮 并对它们进行了样式设置 以便它们显示 块 以便它们看起来像按钮 还隐藏了单选按钮本身 这在台式机和 Android 平板电脑上的 Chrome 和 Firefox 中效果很好 但在 iPad 上不起作用 在这里查看 htt
  • 如何在 div 中加载页面?

    我被告知使用 Div 代替 iframe 是前进的方向 所以我使用横幅和主体中的框架 如何将我的index html加载到我的div中 你尝试过 jquery 的 load 吗 通过服务器端技术 您可以轻松地做到这一点
  • 如何删除html中单击的元素周围的虚线

    我发现如果有一个a页面中的链接不链接到新页面 那么当用户单击它时 该元素周围会有一条虚线 只有当用户单击页面中的其他任何内容时它才会消失 如何删除它 Example 注意元素周围的虚线Section 2 Use outline none锚定
  • > 有必要吗?

    我现在开发网站和 XML 接口已有 7 年了 从来没有遇到过真正有必要使用 gt for a gt 到目前为止 所有消歧都可以通过引用来处理 lt and alone 有没有人遇到过这样的情况 与 SGML 处理 浏览器问题 XSLT 等相
  • 在现有 HTML 输入字段中加载图像/徽标 - UIWebView

    因为我是编程新手 所以我做了这样的事情 void completeUserFieldsForWebView UIWebView webView withUsername NSString username TextField Which h

随机推荐

  • ECMAScript 6 的 function.name 属性

    简单问题 这段代码的正确结果是什么 let f function let n f name or f 根据兼容表 http kangax github io compat table es6 n应该有这个值 f 然而 Mozilla 文档
  • 正则表达式捕获部分行

    我一直在努力捕获 snmp 响应的一部分 Text IF MIB ifDescr 1 1 1 g1 Office to DMZ Regex P
  • 如何使用我自己的 CSS 设计 Twitter 小部件的样式

    我有自己的 Twitter feed 设计 并且我想使用我自己的设计来设计默认 feed 的样式 有没有办法做到这一点 问题是您无法使用 CSS 选择器 因为它仅在加载页面后才出现 请检查这张图片 让您更多地了解我需要什么 Thanks 好
  • 使用 FileSystemWatcher 从文件中获取新行

    我正在观看一个包含以下代码的文件 FileSystemWatcher watcher new FileSystemWatcher watcher Path C watcher Filter t log watcher Changed new
  • matlab中的分箱

    我一直无法在 matlab 或 Octave 中找到函数来完成我想要的操作 我有一个两列的矩阵 m x 和 y 值 我知道我可以通过执行 m 1 或 m 2 来提取列 我想将其分成 可能 大小相等的较小矩阵 并绘制这些矩阵的平均值 换句话说
  • 替换sql server 2000中的ntext(超过4000个字符)

    如何替换sql server 2000中ntext列中超过4000个字符的文本 转换为 nvarchar max 不起作用 因为它会截断值 使用 TEXT NTEXT 是一团糟 这是尽快摆脱这些字段的众多原因之一 您需要使用 READTEX
  • 如何在Linux内核中启用CONFIG_PREEMPT选项?

    我是 Linux 内核编程的新手 尝试在 x86 64 上使用旧内核 Linux 2 6 32 我想启用其中的 CONFIG PREEMPT 选项 但找不到有关如何执行此操作的信息 我可以使用我的首选选项编译新内核 但不知道在这种情况下我需
  • 如何在没有 JoinTables 的 JPA 中创建一对多关系?

    我正在尝试使用以下表结构在 JPA 中创建 OneToMany 关系 CATALOG catalogId PK name PRODUCT productId PK name catalogId FK 我将类定义为 Entity public
  • Neo4j - 计算带有标签的节点

    我想要一个查询来计算数据集中有多少个节点具有每个标签 例如 标签A 100 标签B 200 我可以为每个单独的标签执行此操作 例如 MATCH n LabelA return count n 但是 我想在一个命令中为每个标签执行此操作 尝试
  • 普通的 console.warn() 显示在日志中,并带有服务器性“错误”

    当我记录一些东西时console warn 它似乎出现在 Stackdriver 日志中 严重性为 错误 Stackdriver 错误报告不显示这些错误 因此它们似乎不被视为错误 这使得无法过滤日志以仅显示错误 读取 Stackdriver
  • iFrame 中的 Angular2 不安全资源 URL 与 DomSanitationService

    背景 我正在为我们正在研究的过渡策略进行概念验证 该策略将在我们致力于将现有功能转换为 Angular 的同时将 旧 Web 应用程序引入 iFrame Issue 我遇到的问题是尝试在 iFrame 上设置 src 标记 我正在尝试使用
  • REST 何时/如何取代 SOAP [关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions 我目前正在写关于 IT 技术等的论文
  • 如何在php中检查来自其他网站的cookie并不允许访问我的网站?

    如何在php中检查来自其他网站的cookie并不允许访问我的网站 如果客户端有 cookie 示例 如果有来自 www example com 的 cookie 它会被重定向到其他网站吗 请帮助我其他网站上的一些人对我的不良网站发表评论 我
  • Android - 将 ProgressBar 设置为垂直条而不是水平条?

    我正在尝试使用 ProgressBar 作为类似计量的显示 我认为这将是一个简单的任务 并认为 ProgressBar 有一个属性可以设置为垂直 但我没有看到任何东西 此外 我希望能够在栏的侧面显示类似标尺的指示器 以清楚地指示当前级别 感
  • 在 Linux 中生成相同的数字,但在 Windows 中则不然

    下面的代码旨在生成区间 1 100 中的五个伪随机数的列表 我播种default random engine with time 0 它返回系统时间UNIX时间 https en wikipedia org wiki Unix time 当
  • 与 Post 进行交叉呼叫,但在飞行前失败

    我必须从我的网站向第三方域 服务器进行网络服务调用 当我使用 jQuery Ajax by Post 方法和 content type text plain 进行此调用时 它工作正常 但是 当我将其更改为 content type text
  • 如何隐藏 WPF ListView 的标头?

    我希望能够隐藏 WPF ListView 中每个网格列顶部的标题 这是我的 ListView 的 XAML
  • 在同一 URL 上运行 SOAP 和 RESTful

    假设我们有一个响应主机标头 kebab shop intra net 的网站 此 URL 中是否可以同时包含 SOAP 和 RESTful 也就是说 这两者都是在已部署的代码中处理的 kebab shop intra net takeawa
  • 在我的绘画程序中绘制矩形时出现错误

    public partial class Form1 Form Point downPoint upPoint List
  • iPhone HTML5 音频标签不起作用

    我遇到了音频标签无法在 iPonhe 上工作的问题 在 W3Schools 网站上测试时它可以播放 HTML5 音频标签 但不适用于我下面的网站