2013-04-08 49 views
7

Tôi đang gặp khó khăn khi nhận âm thanh để hoạt động với jQuery. Tôi đã thử điều này với cả định dạng .wav và .ogg. (Firefox 19.0.2)Làm cách nào để phát tệp âm thanh với jQuery?

Nhấp vào Bắt đầu nút suất:

TypeError: buzzer.play is not a function

Tôi không chắc chắn nếu jQuery selectors trả về một mảng, nhưng tôi đã cố gắng chụp các tập tin âm thanh với cả hai:

var buzzer = $('buzzer'); 

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

Regardles Tôi không thể phát các phần tử âm thanh.

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

Tại sao bạn sử dụng biểu mẫu làm nút bắt đầu? – adeneo

+0

Bạn thực sự chỉ nên sử dụng 'document.getElementById ('buzzer')' ở đây ... Bạn không thực sự * bằng cách sử dụng * Các phần tử jQuery-wrap, bạn chỉ đang thực hiện một quãng đường dài để có được phần tử dom nguyên bản. – meagar

Trả lời

13

Bạn quên băm # trong selector ID của bạn:

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

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

document.getElementById('buzzer') dường như thích hợp hơn!

Tôi muốn thay đổi HTML sang:

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

và làm:

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

Hoặc '$ ('# buzzer') [0] .play();' với 'event.preventDefault();' –

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

Bạn cũng có thể làm điều này:

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

Và nếu id buzzer là duy nhất (Vì nó phải là), bạn cũng có thể làm điều này - không cần [0]

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

'document.getElementById (" buzzer ");' và btw đã được gợi ý bởi @adeneo –

+0

@roXon .. true .... –

+0

ngay cả sau khi bạn chỉnh sửa nó sẽ không hoạt động như bạn đề xuất, bạn có 'Elements' thay vì' Element' –

0

Bạn đang sử dụng id để đánh dấu thẻ âm thanh của bạn trong HTML của bạn. Vì vậy, bạn nên thêm # khi bạn đang sử dụng bộ chọn.

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

bên cạnh đó, bạn đang sử dụng id để xác định âm thanh của bạn, bạn cũng có thể xác định bạn có giá trị như thế này:

var buzzer = $('#buzzer'); 

không cần phải thêm [0], [0] có nghĩa là bạn lấy yếu tố đầu tiên.

Các vấn đề liên quan