Как сделать так, чтобы при нажатии на кнопку проигрывался звук?

Question

Я хочу сделать так, чтобы при нажатии на кнопку "Заказать билет" [input type="submit"] воспроизводился звук. Проблема в том, что при нажатии на кнопку "Заказать билет" у меня просто обновляется страница и все, никакой звук не воспроизводится. Но если вызывать функцию через консоль в браузере (F12), то она работает как надо.

<input type="submit" form="order_form" value="Заказать билет" onclick="order();"></input>

<script type="text/javascript">
        function order()
        {
            var audio = new Audio();
            audio.src = 'src/sound.mp3';
            audio.autoplay = true;
            alert("Ваш заказ был принят, ждите звонка в дверь");

            return true;
        }
</script>

Answer 1

Проблема в обновлении страницы если я правильно понимаю, в таком случае всё более менее просто. Есть два варианта.

Отключить событие нажатия на кнопку по умолчанию:

<input type="submit" id="submitBtn" onclick="drawShelves(); return false;">

Отключить событие отправки формы по умолчанию:

<form id="mainForm" onsubmit="return false;">

Но в обоих случаях вам нужно каким-либо образом без перезагрузки страницы отправить данные на сервер. Самый верный способ -- использовать Ajax запрос.

Вот тут есть пошаговый гайд как реализовать это с помощью ajax https://fructcode.com/ru/blog/how-to-send-html-form-with-ajax/

Answer 2

function playSound(sound) {
  var song = document.getElementById(sound);
  song.volume = 1;
  if (song.paused) {
    song.play();
  } else {
    song.pause();
  }
}

<audio id="sound"><source src="https://ozarnik.ru/uploads/files/2019-02/1549784984_dj-ozarnik-primite-zakaz.mp3" type="audio/mp3"></audio>
<input type="submit" value="Заказать билет" form="order_form" id="button" class="button" onclick="playSound('sound'); setTimeout('alert(\'Откладываем второе событие\')', 7000)"">

БЛОГ НА HUSL

Как сделать так, чтобы при нажатии на кнопку проигрывался звук?

Ответы (2 шт):