it-swarm.com.de

Beim Klicken auf die Taste einen Piepton hören

OK, ich habe hier einige Antworten gelesen, aber sie haben mir überhaupt nicht geholfen (tatsächlich wird keine von ihnen als Antwort akzeptiert).

Die Frage ist, wie man "Pieptöne wiedergeben" auf "Tastenklick"

Ich versuche, eine Website zu erstellen, die auf Touchscreen-Geräten funktioniert. Ich möchte, dass bei jedem Klick ein Klick-Ereignis einen Piepton ausgibt, der für Benutzer, die die Website verwenden, besser geeignet ist. Die Tonsounddatei ist hier: http://www.soundjay.com/button/beep-07.wav . Ich brauche diese Arbeit nur in Google Chrome (unterstützt HTML5)

Ich verstehe diese Notwendigkeit, auf der Clientseite zu arbeiten, also habe ich Folgendes versucht:

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>

Aber es funktioniert nicht, es passiert nichts, wenn ich auf die Schaltfläche klicke.

Sie könnten ein Audio-Tag wie folgt verwenden:

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

Hier ist ein Plunker

37
netrevisanto

Zugegeben, Sie haben schon etwas wie <div class='btn'>Click to play!</div>

EINFACHER ANSATZ (ohne HTML)

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

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

WEITERFÜHREN Sie können schnell Sounds auslösen

Wenn Sie jedoch versuchen, auf einen .btn zu klicken, wartet der Player auf das Ende des Sounds, um einen anderen Sound auszulösen (dies ist auch bei allen anderen Lösungen der Fall) . Dies ist die einzige Lösung, die ich gefunden habe:

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

ARBEITSDEMO

Das funktioniert gut

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

Mit rohem JavaScript können Sie einfach Folgendes aufrufen:

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

Im Folgenden wird die Frage zum "Spielen" eines Signaltons technisch nicht beantwortet. Wenn Sie jedoch gefragt werden, wie ein Signalton "erzeugt" werden soll, beachten Sie den folgenden Code, den ich auf dieser Website gefunden habe:

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

Beispielwerte für den Aufruf: beep(20, 100, 30). Die oben genannte Website enthält weitere Details und Hörproben.

Der Sound kann als Reaktion auf einen Tastenklick oder programmgesteuert nach Belieben generiert werden. Ich habe es in Chrome verwendet, aber nicht in anderen Browsern ausprobiert.

0
Alan M.

Ich habe mich verrückt gemacht, aber mit JQuery habe ich eine Lösung gefunden ... nicht wirklich der beste Weg, es zu tun, aber es hat für mich richtig funktioniert ...

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

ich weiß nicht, wie viel von dem eingebetteten Tag wirklich benötigt wird, aber als es funktioniert hat, hörte ich auf zu schreiben (eingebettetes Kopieren aus einer anderen Lösung).

Hoffe das hilft jemand anderem (oder hilft mir das nächste Mal wenn ich es vergesse)

0
thphoenix