2013-04-08 6 views
7

Ich habe Schwierigkeiten, Audio mit jQuery zu erstellen. Ich habe dies sowohl mit .wav und .ogg-Formaten versucht. (Firefox 19.0.2)Wie spiele ich eine Audiodatei mit jQuery ab?

Durch Klicken auf die starten Taste ergibt:

TypeError: buzzer.play is not a function

Ich bin nicht sicher, ob jQuery Selektoren ein Array zurück, aber ich die Erfassung sowohl die Audio-Datei versucht haben:

var buzzer = $('buzzer'); 

und

var buzzer = $('buzzer')[0]; 

regardles s, ich kann die Audioelemente nicht abspielen.

<!DOCTYPE html>  
<html>  
    <head>  
    <meta name="viewport" content="width=device-width, initial-scale=1">  
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>  
</head>  

<body>  

<audio id="buzzer" src="buzzer.ogg" type="audio/ogg">Your browser does not support the &#60;audio&#62; element.</audio>  
<form id='sample' action="#" data-ajax="false">  
    <fieldset>  
    <input value="Start" type="submit">  
    </fieldset>  
</form>  
<script type="text/javascript">  

var buzzer = $('buzzer')[0];  

$(document).on('submit', '#sample', function() {  
    buzzer.play();  
    return false;  
});  

</script>  
</body>  
</html> 
+0

Warum würden Sie ein Formular als Startknopf verwenden? – adeneo

+0

Sie sollten wirklich 'document.getElementById ('buzzer')' hier verwenden ... Sie * verwenden * jQuery-Wrapped Elemente nicht wirklich, Sie nehmen nur den langen Weg herum, um das native dom Element zu bekommen. – meagar

Antwort

13

Sie haben vergessen, den Hash-# in Ihrer ID-Selektor:

var buzzer = $('#buzzer')[0]; 

$(document).on('submit', '#sample', function() {  
    buzzer.play();  
    return false;  
});  

Und document.getElementById('buzzer') besser geeignet scheint!

würde ich das HTML ändern:

<audio id="buzzer" src="buzzer.ogg" type="audio/ogg"></audio>  
<input type="button" value="Start" id="start" /> 

und zu tun:

$('#start').on('click', function() { 
    $('#buzzer').get(0).play(); 
}); 
+0

Oder '$ ('# Summer') [0] .play();' mit einem schönen 'event.preventDefault();' –

0
var buzzer = document.getElementById("buzzer"); 

Sie können dies auch tun:

var buzzer = $('audio')[0]; 

Und wenn id buzzer ist einzigartig (Wie es sollte) Sie können dies auch tun - keine Notwendigkeit von [0]

var buzzer = $('#buzzer'); 
+1

'document.getElementById (" Summer ");' und BTW bereits von @adeneo –

+0

vorgeschlagen @roXon .. true .... –

+0

auch nach Ihrer Bearbeitung wird es nicht funktionieren, wie von Ihnen vorgeschlagen, haben Sie 'Elements' anstelle von' Element' –

0

Sie verwenden die ID Ihren Audio-Tag im HTML zu markieren. Daher sollten Sie # hinzufügen, wenn Sie den Selektor verwenden.

var buzzer = $('#buzzer')[0]; 

außerdem ID Nummer verwenden, um Ihre Audio-zu identifizieren, können Sie auch Ihre wertvolle wie folgt definieren:

var buzzer = $('#buzzer'); 

haben nicht die [0], [0] bedeutet, dass Sie hinzufügen Hol dir das erste Element.

Verwandte Themen