Воспроизведение звукового сигнала при нажатии кнопки

OK Я прочитал несколько ответов здесь, но они мне совсем не помогли (на самом деле ни один из них не принимается в качестве ответа)

Вопрос: как "Воспроизвести звуковой сигнал" на кнопке ", нажмите"

Я пытаюсь создать веб-сайт, который работает на устройстве с сенсорным экраном, поэтому я хочу, чтобы каждое событие нажатия кнопки воспроизводило звуковой сигнал, который должен быть приятнее для пользователей, которые используют веб-сайт. Звуковой файл звукового сигнала находится здесь: http://www.soundjay.com/button/beep-07.wav. Мне нужна эта работа только в Google Chrome (поддерживает HTML5)

Я понимаю, что нужно работать на стороне клиента, поэтому я пробовал это:

JavaScript:

<script>
    function PlaySound(soundObj) {
        var sound = document.getElementById(soundObj);
        sound.Play();
    }
</script>

HTML

<embed src="/beep.wav" autostart="false" type="audio/mpeg" loop="false" width="0" height="0" id="beep" enablejavascript="true" />
<asp:LinkButton ID="lbtnExit" runat="server" OnClick="lbtnExit_Click" OnClientClick="PlaySound('beep')" CssClass="btn btn-lg btn-danger" Text="Exit <i class='fa fa-sign-out' style='font-size: 40px'></i>"></asp:LinkButton>

Но это не работает, ничего не происходит, когда я нажимаю кнопку.

Ответ 1

Вы можете использовать аудио тег, как это:

    <audio id="audio" src="http://www.soundjay.com/button/beep-07.wav" autoplay="false" ></audio>
    <a onclick="playSound();"> Play</a>
    <script>
    function playSound() {
          var sound = document.getElementById("audio");
          sound.play();
      }
    </script>

Вот плункер

Ответ 2

Допустим, у вас уже есть что-то вроде <div class='btn'>Click to play!</div>

ПРОСТОЙ ПОДХОД (без HTML)

var audio = new Audio('audio.mp3'); // define your audio

$('.btn').click( () => audio.play() ); // that will do the trick !!

ЧТОБЫ ИДТИ ДАЛЬШЕ Уметь быстро вызывать звуки

Тем не менее, вы заметите, что если вы попытаетесь рифлить, нажмите на один .btn игрок будет ждать конца звука, чтобы иметь возможность запустить другой звук (что в случае со всеми остальными тоже решение). Чтобы избавиться от этого, это единственное решение, которое я нашел:

// array with souds to cycle trough
// the more in the array, the faster you can retrigger the click 
var audio = [new Audio('audio.mp3'), new Audio('audio.mp3')];
var soundNb = 0; // counter

$('.btn').click( () => audio[ soundNb++ % audio.length ].play());

РАБОЧАЯ ДЕМО

Ответ 3

Это прекрасно работает

function playSound () {
    document.getElementById('play').play();
}

<audio id="play" src="http://www.soundjay.com/button/beep-07.wav"></audio>

<button onclick="playSound()">Play</button>

Ответ 4

С необработанным JavaScript вы можете просто позвонить:

new Audio('sound.wav').play()

Ответ 5

Я сводил меня с ума, но с JQuery я нашел решение... на самом деле не лучший способ это сделать, но он работал правильно для меня...

function ding() {
      $("body").append('<embed src="/ding.mp3" autostart=false autoplay=false type="audio/mpeg" loop="false" width="0" height="0" id="beep" enablejavascript="true" />');
      setTimeout(function(){ $("#beep").remove(); },2000);
}

не уверен, сколько из тега embed действительно требуется, но как только он начал работать, я прекратил писать (вставлять скопированные из другого решения).

Надеюсь, это поможет кому-то другому (или поможет мне в следующий раз, когда я забуду)

Ответ 6

Технически, следующее не отвечает на вопрос о "воспроизведении" звукового сигнала, но если вы спрашиваете, как "сгенерировать" звуковой сигнал, рассмотрите следующий код, который я нашел на этом сайте:

a=new AudioContext()
function beep(vol, freq, duration){
  v=a.createOscillator()
  u=a.createGain()
  v.connect(u)
  v.frequency.value=freq
  v.type="square"
  u.connect(a.destination)
  u.gain.value=vol*0.01
  v.start(a.currentTime)
  v.stop(a.currentTime+duration*0.001)
}

Пример значений для звонка: beep(20, 100, 30). Вышеупомянутый веб-сайт содержит больше деталей и звуковых образцов.

Звук может быть в ответ на нажатие кнопки или программно генерируется по желанию. Я использовал его в Chrome, но не пробовал в других браузерах.