Jouer un bip sonore sur un clic de bouton

OK j'ai lu plusieurs réponses ici mais elles ne m'ont pas aidé du tout (en fait, aucune d'elles n'est acceptée comme réponse)

la Question est de savoir comment "Jouer un bip sonore""cliquez sur le bouton"

j'essaie de faire un site web qui fonctionne sur l'appareil d'écran tactile donc je veux que chaque bouton claquer des événements va jouer un son de bip, qui devrait être plus agréable pour les utilisateurs qui utilisent le site web. Bip sonore fichier est ici: http://www.soundjay.com/button/beep-07.wav . J'ai seulement besoin de ce travail sur Google Chrome (prend en charge HTML5)

je comprends ce besoin de travailler sur le côté client, j'ai donc essayé ceci:

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>

mais ça ne marche pas, rien ne se passe quand je clique sur le bouton.

20
demandé sur Ronaldinho Learn Coding 2015-04-10 20:41:56

5 réponses

Vous pouvez utiliser une balise audio comme ceci:

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

Voici un Plunker

34
répondu netrevisanto 2017-05-03 03:54:27

Cela fonctionne très 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>
6
répondu Downgoat 2015-04-10 17:55:40

avec JavaScript brut, vous pouvez simplement appeler:

new Audio('sound.wav').play()
4
répondu Joe Iddon 2018-04-06 17:13:27

simple APPROACH (with no HTML)

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

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

LIMITATIONS

Toutefois, vous remarquerez que si vous essayez de riffleClick sur un .btn le joueur ne tirera pas autant de sons que de clics (c'est le cas avec toutes les autres solutions aussi). C'est parce que le lecteur a besoin d'attendre la fin de l'audio pour pouvoir le rejouer. Pour m'en débarrasser, c'est la seule solution que j'ai trouvée:

// array with as much same sounds as needed
// 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;

$('.btn').click( function()  {
    audio[ soundNb % audio.length ].play(); // 
    soundNb++; // next sample
}
3
répondu Sébastien Garcia-Roméo 2017-11-07 14:47:52

me rend fou, mais avec JQuery j'ai trouvé une solution... pas vraiment la meilleure façon de le faire, mais cela a fonctionné correctement pour moi...

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

Je ne sais pas quelle quantité de la balise embed est vraiment nécessaire, mais une fois qu'elle a commencé à fonctionner, j'ai arrêté d'écrire (embed copié à partir d'une autre solution).

Espérons que cela aide quelqu'un d'autre (ou aide-moi la prochaine fois j'oublie)

0
répondu thphoenix 2017-11-17 16:15:38