sound - reproducir audio en javascript

Reproducir un pitido al hacer clic en el botón

Question

OK, he leído varias respuestas aquí, pero no me ayudaron en absoluto (de hecho, ninguna de ellas se acepta como respuesta)

La pregunta es cómo "Reproducir un pitido" en "clic en el botón"

Estoy tratando de crear un sitio web que funcione en un dispositivo con pantalla táctil, por lo que quiero que todos los eventos de clic de botón emitan un pitido, que debería ser más agradable para los usuarios que usan el sitio web. El archivo de sonido del pitido está aquí: http://www.soundjay.com/button/beep-07.wav . Solo necesito este trabajo en Google Chrome (soporta HTML5)

Entiendo que esta necesidad de trabajar en el lado del cliente, así que intenté esto:

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>

Pero no funciona, no pasa nada cuando hago clic en el botón.

Answer 1

Admitir que ya tienes algo como <div class=''btn''>Click to play!</div>

ENFOQUE SIMPLE (sin HTML)

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

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

IR MÁS ADELANTE Podrás disparar sonidos rápidamente

Sin embargo, notará que si intenta hacer un clic en un .btn el reproductor esperará el final del sonido para poder activar otro sonido (ese es el caso de todas las demás soluciones). Para deshacerse de esto, esta es la única solución que he encontrado:

// 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());

DEMO DE TRABAJO

Answer 2

Con JavaScript en bruto, puede simplemente llamar:

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

Answer 3

Esto funciona bien

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

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

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

Answer 4

Me estaba volviendo loca, pero con JQuery encontré una solución ... no es realmente la mejor manera de hacerlo, pero funcionó correctamente para mí ...

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);
}

No estoy seguro de cuánta etiqueta de incrustación se requiere realmente, pero una vez que comenzó a funcionar, dejé de escribir (incrustar copiada de otra solución).

Espero que esto ayude a alguien más (o me ayude la próxima vez que me olvide)

Answer 5

Podrías usar una etiqueta de audio como esta:

    <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>

Aquí hay un Plunker