为什么音频自动播放在 Google Chrome 中不起作用?

2024-06-08

我正在尝试在页面刚刚打开时自动播放音频文件。我的浏览器是谷歌浏览器更新到最新版本..这是代码

<body>

    <iframe class="audio" autoplay="autoplay" controls style = "display:none;">
    <source src="./sound/pacmanbegin.mp3" type="audio/mpeg"/>
    </iframe>

</body>

这在 Internet Explorer、Edge 等其他浏览器中也不起作用。有人可以帮助我吗?


最近很多浏览器只能在关闭声音的情况下自动播放,所以你需要在音频标签中添加静音属性,这是没有意义的,所以在我看来最好的方法是添加:

 document.getElementById('audio').play();

在你之后</audio> tag.
看一下这段代码:

 <audio controls style="display:none" id="audio">
  <source src="https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_700KB.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<script>
document.getElementById('audio').play();
</script>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

为什么音频自动播放在 Google Chrome 中不起作用? 的相关文章

  • 如何获取div背景图像上的锚标记?

    HTML div a href http www facebook com au a div css facey float left width 32px height 32px background url file C Users U
  • 带搜索框的 D3 图表

    我在 D3 中创建了一个图表 其中节点显示特定个人创建文档的时间 该图表还显示了一个搜索框 该搜索框根据搜索框输入是否与与该文档关联的单词匹配而将节点变成红色 这些单词列在数据集的第 5 列中 请参阅下面的数据集 我的问题 一旦将搜索输入到
  • 使用 CSS flexbox 重叠两个居中元素

    我试图将两个元素绝对居中于页面中间 一个元素在另一个元素后面 目的是让页面完全响应 中间有一个圆圈 后面有一个脉冲效果 这是一个小提琴 http jsfiddle net Fy8vD 2003 以下的 html body height 10
  • 检测滚动到 DIV 底部

    我想检测我是否到达了 div 的底部 我的 div 高度为 400px 溢出隐藏 我不知道正常高度但超过400px 我正在使用这段代码 但它不起作用 任何想法 if article txt scrollTop article txt hei
  • 与基线和文本区域垂直对齐

    我试图让标签与文本区域中第一行文本的基线对齐 天真的尝试 div style display inline block div
  • 使用 Python 和 lxml 从 HTML 中删除类属性

    Question 如何使用 python 和 lxml 从 html 中删除类属性 Example I have p class DumbClass Lorem ipsum dolor sit amet consectetur adipis
  • webview中的html select标签似乎有问题

    我已经做了一个带有简单网络视图的应用程序 当我从 webview 打开页面 search php 并触摸 html 选择以从不同类型的单词中进行选择时 但是 休斯顿 我们有问题 D 当我在输入字段中写下我需要的内容时 这是可以的 但是当我触
  • 如果鼠标不移动,JQuery 隐藏鼠标

    如果鼠标一段时间没有移动 我会尝试隐藏鼠标 这是我正在使用的代码 document ready function var j document mousemove function clearTimeout j html css curso
  • 使用JQUERY滑动切换页面

    我在 stackoverflow 上搜索以查找在我的应用程序之间滑动的代码 并找到了下面的 jquery 代码 从答案中我读到它工作正常 但是当我将它放在我的页面上时 它无法工作 JavaScript div ui page live sw
  • 伪元素:after和溢出隐藏

    我有这个标记 label required after content color red
  • DataTable 不是 DataTables JQuery 库的函数错误

    我有一个使用 Datatable 库的简单示例 我让它与 JSFiddle 一起工作 http jsfiddle net 3hhn7y7f http jsfiddle net 3hhn7y7f 但是当我尝试使用实际文件执行此操作时 出现以下
  • d3 添加 html 链接到表中的数据列

    我是 d3 和 Javascript 的新手 我正在尝试添加一个 a 元素 带有 href 属性 到指定数据列中的每个值 目前我正在使用以下代码来生成表 function tabulate data columns var table d3
  • Chrome 扩展:如何重定向到自定义 HTML 页面以响应特定的 Web 请求?

    I d like to write an extension that redirects all web traffic to a specific domain let s say wikipedia org to an interme
  • 部分在 JSF 中应该是什么样子? HTML5 还是 XHTML?

    这只是我现在的好奇心 在 Eclipse 中这是定义在的部分新 Facelet 模板例如 但对于大多数模板来说都是一样的 我想使用更多clear上面的代码 所以我更改为
  • 如何使用 css3 动画将宽度和高度设置为 100%?

    我有以下代码 HTML div div css div background tomato width 100px height 100px webkit animation animateThis 0 3s ease in webkit
  • 如何像这样包裹div?

    假设您有一个具有固定高度和重量的 div 在图中是最里面的一个 并且您希望周围的 div 包含它 其外边距为例如1 厘米 你会怎么做 一种方法是使用inline block显示风格 div border 1px solid blue div
  • 通过 JavaScript 传输事件来调用 :hover 伪类

    这是场景 您有两张图像 它们彼此堆叠在一起 最高阶的 z 索引图像负责处理点击事件 想想 Google 的 Map API 并且是透明的 而下面的图像负责视觉表示 这是一个伪 HTML CSS 表示 div visual container
  • 如何在javascript中获取表中复选框的值

    我需要获取表行中提供跨度的复选框的值 下面的代码是我的项目的一部分 HTML 代码用于动态我的表格 而 javascript 代码用于获取不适用于复选框的元素的值 它适用于其他输入元素 我的桌子 var html tr class rows
  • Select2 的行为与未为 Select2 定义的 Uncaught 查询函数非常不同

    我按以下方式加载 select2 的值 声明类型 var AdjustmentType Backbone Model extend url Hexgen getContextPath referencedata adjustmenttype
  • HTML/CSS:清除中间的浮动元素,而不添加不需要的标签[重复]

    这个问题在这里已经有答案了 大多数 ClearFix 技术都涉及在父容器的最底部添加内容 我最喜欢伪元素方法 因为它不会将不需要的元素添加到 HTML 中 然而 最近我发现我正在处理一个容器 其中有一些孩子漂浮 但不是全部 假设前 2 个子

随机推荐