2015-04-10 7 views
12

OK Ich habe hier mehrere Antworten lesen, aber sie haben mir nicht helfen, alle (in der Tat, keiner von ihnen wird als Antwort akzeptiert)ein Piepton auf den Knopf klicken

Frage ist, wie man " spielen Sie einen Piepton“ auf ‚klicken‘

ich versuche, eine Website zu machen, die auf Touchscreen-Gerät funktioniert, damit ich alle Tastenklick Ereignisse wollen einen Piepton spielen, die schöner für Benutzer sein sollten, die mit Die Webseite. Beep-Sound-Datei ist hier: http://www.soundjay.com/button/beep-07.wav. Ich brauche nur diese Arbeit auf Google Chrome (unterstützt HTML5)

ich diese Notwendigkeit verstehen auf Client-Seite zu arbeiten, so habe ich versucht, dies:

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, passiert nichts, wenn ich auf den Knopf klicke.

+1

Versuchen Sie, ein ''

+2

Versuchen Sie dieses i denke, es ist nützlich für Sie: http://stackoverflow.com/questions/879152/how-do-i-make-javascript-beep –

Antwort

23

Sie können eine Audio-Tag wie folgt verwendet werden:

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

Hier ist ein Plunker

+1

OK, es hat funktioniert, danke mein Mann! –

+0

Ich bin froh, dass ich helfen konnte. :) – netrevisanto

+0

Danke. Verwenden Sie für Internet Explorer 10 .mp3 anstelle von .wav –

4

Dies funktioniert

function playSound() { 
 
    document.getElementById('play').play(); 
 
}
<audio id="play" src="http://www.soundjay.com/button/beep-07.wav"></audio> 
 

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

+0

Ja, es funktioniert perfekt, danke! –

+1

Sie würden wahrscheinlich gerne eine MP3-Sounddatei verwenden, da sie derzeit die größte Unterstützung unter den gebräuchlichsten Browsern bietet: http://caniuse.com/#search=audio – Robert

2

einfachen Ansatz (ohne HT ML)

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

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

GRENZEN

Allerdings werden Sie feststellen, dass, wenn Sie versuchen, auf einem .btn der Spieler Feuer wird nicht so viel klingt, als Klicks riffleClick (das der Fall ist alles andere Lösung auch). Dies liegt daran, dass der Player das Ende des Audiosignals warten muss, um es erneut abspielen zu können. loswerden dies zu umgehen, ist dies die einzige Lösung, die ich gefunden habe:

// 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 
} 
0

mich verrückt gefahren, aber mit JQuery fand ich eine Lösung ... nicht wirklich den besten Weg, es zu tun, aber es richtig für mich gearbeitet ...

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

nicht sicher, wie viel von dem embed-Tag wirklich erforderlich ist, aber sobald es anfing zu arbeiten, ich hörte auf zu schreiben (einbetten aus einer anderen Lösung kopiert).

Hoffnung hilft dies jemand anderes (oder mir das nächste Mal hilft ich vergessen)