用户交互后自动播放 HTML 音频

问题描述 投票:0回答:1

Chrome 的自动播放政策于 2018 年 4 月发生了更改。 我想使用其中一项政策:如果用户与域进行了交互(单击、点击等),则允许带声音的自动播放。这样,我就有了一个网页

<a href="d2.php">dictation</a>

当用户单击上述页面上的链接时,将加载第二个网页 d2.php。其内容如下

<!DOCTYPE html>
<html>
<body>

<h1>The audio autoplay attribute</h1>

<p>Click on the play button to play a sound:</p>

<audio controls autoplay>
  <source src="https://www.w3schools.com/tags/horse.ogg" type="audio/ogg">
  <source src="https://www.w3schools.com/tags/horse.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

</body>
</html>

音频自动播放在 Chrome 上按预期工作。还可以验证自动播放适用于 Edge 和 Opera。然而,

  1. 它不适用于 Firefox 117.0.1(64 位),即音频不会自动播放。
  2. 我使用 WINE 在 Ubuntu 上安装了 Safari 版本,它给我“您的浏览器不支持音频元素”。留言。

我认为 Safari 消息是由我的 Ubuntu - WINE 安装引起的。但是,有人可以帮我解决 Firefox 音频自动播放问题吗?我对任何使用 HTML、PHP 和 JaveScript 的解决方案持开放态度。预先感谢。

PS:我在网上读过很多关于“html音频自动播放”的热门帖子。

javascript php html audio autoplay
1个回答
0
投票

对于 Firefox(至少最新版本(截至今天):Firefox 117.0.1),除非同一页面上有人工交互(例如单击按钮),否则无法自动播放视频

所以,你需要使用JS(比如与点击按钮相关联)来触发音频播放,例如:

<!DOCTYPE html>
<html>
<body>

<h1>The audio autoplay attribute</h1>

<p>Click on the play button to play a sound:</p>

<audio controls autoplay id=audio1>
  <source src="https://www.w3schools.com/tags/horse.ogg" type="audio/ogg">
  <source src="https://www.w3schools.com/tags/horse.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

<input type=button onclick="javascript:play1();" value="Play">
</body>
</html>

<script>
function play1(){
document.getElementById('audio1').play();
}
</script>   
© www.soinside.com 2019 - 2024. All rights reserved.