如何使用 jQuery 播放音频文件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15888716/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I play an audio file with jQuery?
提问by BryanWheelock
I'm having a difficult time getting audio to work with jQuery. I've tried this with both .wav and .ogg formats. (Firefox 19.0.2)
我很难让音频与 jQuery 一起工作。我已经用 .wav 和 .ogg 格式尝试过这个。（火狐 19.0.2）
Clicking the Startbutton yields:
点击Start按钮产生：
TypeError: buzzer.play is not a function
TypeError: buzzer.play 不是函数
I'm not sure if jQuery selectors return an array, but I've tried the capture the audio file with both:
我不确定 jQuery 选择器是否返回一个数组，但我已经尝试使用以下两种方式捕获音频文件：
var buzzer = $('buzzer');
and
和
var buzzer = $('buzzer')[0];
Regardless, I can't get the audio elements to play.
无论如何，我无法播放音频元素。
<!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 <audio> 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>
回答by adeneo
You forgot the hash #in your ID selector :
您忘记了#ID 选择器中的哈希值：
var buzzer = $('#buzzer')[0];
$(document).on('submit', '#sample', function() {
buzzer.play();
return false;
});
And document.getElementById('buzzer')does seem more appropriate!
而且document.getElementById('buzzer')似乎更合适！
I'd change the HTML to:
我会将 HTML 更改为：
<audio id="buzzer" src="buzzer.ogg" type="audio/ogg"></audio>
<input type="button" value="Start" id="start" />
and do:
并做：
$('#start').on('click', function() {
$('#buzzer').get(0).play();
});
回答by Mohammad Adil
var buzzer = document.getElementById("buzzer");
You can also do this:
你也可以这样做：
var buzzer = $('audio')[0];
And if id buzzeris unique (As it should) you can also do this - no need of [0]
如果 idbuzzer是唯一的（正如它应该的那样）你也可以这样做 - 不需要[0]
var buzzer = $('#buzzer');
回答by athanzhang
You are using the id to mark your audio tag in your HTML. So,you should add # when your are using the selector.
您正在使用 id 在 HTML 中标记音频标签。因此，您应该在使用选择器时添加 #。
var buzzer = $('#buzzer')[0];
besides, you are using id to identify your audio, you can also define your valuable like this:
此外，您使用 id 来识别您的音频，您还可以像这样定义您的价值：
var buzzer = $('#buzzer');
don't have to add the [0],[0] means you get the first element.
不必添加 [0]，[0] 表示您获得第一个元素。
