web-dev-qa-db-fra.com

Jouez un bip sonore en cliquant sur un bouton

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

La question est de savoir comment "émettre un bip sonore" sur "cliquez sur le bouton"

J'essaie de créer un site Web qui fonctionne sur un appareil à écran tactile, je veux donc que chaque événement de clic sur un bouton émette un bip sonore, ce qui devrait être plus agréable pour les utilisateurs qui utilisent le site Web. Le fichier audio bip est ici: http://www.soundjay.com/button/beep-07.wav . Je n'ai besoin que de ce travail sur Google Chrome (supporte HTML5)

Je comprends ce besoin de travailler côté client alors j'ai 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.

javascriptjqueryasp.nethtml5embed
23
Ronaldinho Learn Coding

Vous pouvez utiliser une balise audio comme ceci:

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

Voici un Plunker

37
netrevisanto

En admettant que vous avez déjà quelque chose comme <div class='btn'>Click to play!</div>

APPROCHE SIMPLE (sans HTML)

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

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

POUR ALLER PLUS LOIN Être capable de déclencher rapidement des sons

Cependant, vous remarquerez que si vous essayez de cliquer sur un .btn, le lecteur attendra la fin du son pour pouvoir déclencher un autre son (c'est le cas de toutes les autres solutions) .. C'est la seule solution que j'ai trouvée:

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

7
Sébastien Garcia-Roméo

Cela fonctionne 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
Downgoat

Avec JavaScript brut, vous pouvez simplement appeler:

new Audio('sound.wav').play()
5
Joe Iddon

Cela 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 combien de balises incorporées sont vraiment nécessaires, mais une fois que cela a commencé à fonctionner, j'ai arrêté d'écrire (intégrer une copie d'une autre solution).

J'espère que cela aide quelqu'un d'autre (ou m'aide la prochaine fois que j'oublie)

0
thphoenix