HTML аудио проигрывается при загрузке страницы

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 (), а также мой (текущий) способ использовать ее как часть моего существующего кода, они оба работают, но также оба воспроизводят все под нагрузкой.

Любая помощь приветствуется.

Answer 1

Я не знаю PHP, но по JavaScript внутри тега PHP:

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

говорит * "если $soundFX истинно (даже если оно должно быть набрано уткой), тогда укажите ссылку на аудио-тег и .play() файл, загруженный в аудио-тег. Не знаю, что такое $soundFX, но я Я уверен, что он был объявлен в реальном коде, что делает условие всегда истинным при загрузке страницы. Поэтому удалите условие:

if ($ soundFx == true) { ...

Обычно обработчик событий не запускается при загрузке страницы, но он в тегах PHP, и я не уверен на 100%, но я верю, что все, что находится в тегах PHP, анализируется и выполняется. Если это так, вам действительно не нужен PHP для такой тривиальной задачи. Вам также следует удалить теги PHP. В следующей демонстрации показана простая кнопка переключения, которая переключает звуковой тег для воспроизведения / паузы в jQuery - без PHP.

$('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;
}

<button>⏯</button>
<audio src="http://soundbible.com/mp3/chinese-gong-daniel_simon.mp3"></audio>.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

Удалите весь код javascript на странице, очистите кеш и посмотрите, воспроизводится ли звук автоматически (не должно).Если это не так, это означает, что какая-то часть вашего скрипта запускает функцию воспроизведения без взаимодействия с пользователем.

Добавьте обратно в ваш javascript и закомментируйте упомянутый вами обработчик события click.Проверьте, воспроизводится ли звук при перезагрузке страницы.Если это не так, это означает, что что-то вызывает событие нажатия вашей кнопки, которая, в свою очередь, воспроизводит звук.Если он воспроизводится, это означает, что какая-то другая часть вашего кода вызывает метод play () вашего аудиоэлемента.

Используйте console.log () в вашем коде, чтобы следить за ходом выполнения.

Или просто добавьте alert('Clicked'); в свой обработчик событий и посмотрите, появится ли он без нажатия кнопки.