Question

我正在使用

<button id="collect" class="btn">button</button>
<script type="text/javascript">
    $('#collect').click(function(event) {
        event.preventDefault();
        <?php if($soundFx == true){ ?>
            var sound = document.getElementById("collect_a");
            sound.play();
        <?php } ?>

... //script continues

</script>

触发一些包含非常基本声音的javascript（仅在单击按钮/提交表单时调用）

var sound = document.getElementById("collect_a");
sound.play();

指定目标

<audio id="collect_a" src="audio/collect.wav" autoplay="false" autostart="false" preload ="none" ></audio>

一切正常，单击时发出声音，没有其他问题。

但是，在加载/刷新页面上正在播放音频时，它会立即播放所有音频，然后停止播放并表现出预期的效果。我已经读过标签了

autoplay="false" autostart="false" preload ="none"

应该全部帮助，但没有一个能解决我的问题，所以我想知道我在做什么错。只是放置在html页面中，因此无论是否调用它都会自动触发？这些标签肯定会阻止这种情况吗？

我尝试了一个单独的.js来调用play（）函数，以及我将其作为现有代码一部分的（当前）方法，它们既可以工作，又可以在加载时播放所有内容。 / p>

感谢您的帮助。

Answer 1

删除页面中的所有javascript代码，清除缓存并查看音频是否仍在自动播放（不应该）。如果没有，则意味着脚本的某些部分无需用户干预即可触发播放功能。

重新添加您的JavaScript，并注释掉您提到的click事件处理程序。检查音频是否仍在页面重新加载时播放。如果不是，则表示触发按钮的click事件，这又会播放音频。如果确实可以播放，则意味着代码的其他部分将调用音频元素的play（）方法。

在代码中使用console.log（）来遵循执行流程。

或者只是在事件处理程序中添加order by，然后看看是否在不单击按钮的情况下显示出来。

Answer 2

我不了解PHP，但了解PHP标签中的JavaScript：

<?php if($soundFx == true){ ?>
  var sound = document.getElementById("collect_a");
  sound.play();
<?php } ?>

说*“如果$soundFX为真（即使必须用鸭子输入），则引用音频标签和.play()引用音频标签中加载的文件。不知道{{ 1}}是，但是我确定它是在真实代码中声明的，从而使该条件在页面加载时始终为true。因此，请删除条件：

~~if（$ soundFx == true）{~~ ...

通常，页面加载时事件处理程序不会触发，但是它在PHP标记中，我不确定100％，但是我相信PHP标记中的任何内容都会被解析并执行。如果是这样，那么您真的不需要PHP来完成如此简单的任务。您还应该删除PHP标记。在下面的演示中，有一个简单的切换按钮，用于切换音频标签以在jQuery中播放/暂停-无需PHP。

$soundFX

$('button').on('click', function(e) {
  const A = $('audio')[0];
  A.paused || A.ended ? A.play() : A.pause();
});

button {
  font-size: 2rem;
  border: none;
  background: none;
  cursor: pointer;
  outline: none;
}

页面加载时播放HTML音频

2 个答案: