使用 JavaScript 动态控制 HTML5 音频
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5697974/
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
Dynamically control HTML5 audio with JavaScript
提问by technopeasant
I've got a gallery of sorts with 10 or so thumbnails that each represent one song. To control the playback of each, I've set a play button to fades in via jQuery. After some digging around Apple's Dev Center I found some native JavaScript to control audio. It works beautifully, but is written for control of one object at a time. What I'd like to do is rewrite it as one function that dynamically controls the playback/pause of the thumbnail you're selecting.
我有一个画廊，里面有 10 个左右的缩略图，每个缩略图代表一首歌。为了控制每个的播放，我设置了一个播放按钮以通过 jQuery 淡入。在对 Apple 的 Dev Center 进行了一番挖掘之后，我发现了一些本机 JavaScript 来控制音频。它工作得很好，但它是为一次控制一个对象而编写的。我想做的是将其重写为一种动态控制您选择的缩略图的播放/暂停的功能。
Below is the code that I found.. works, but it'd be a lot of unnecessary code to write it 10 times.
下面是我发现的代码..有效，但写 10 次会产生很多不必要的代码。
Thanks for your help and advice, always!
感谢您的帮助和建议，永远！
HTML:
HTML：
<div class="thumbnail" id="paparazzixxx">
<a href="javascript:playPause();">
<img id="play" src="../images/icons/35.png" />
</a>
<audio id="paparazzi">
<source src="../audio/fernando_garibay_paparazzisnlmix.ogg" type="audio/ogg" />
<source src="../audio/fernando_garibay_paparazzisnlmix.mp3" type="audio/mpeg" />
Your browser does not support HTML5 audio.
</audio>
</div>
JavaScript:
JavaScript：
<script type="text/javascript">
function playPause() {
var song = document.getElementsByTagName('audio')[0];
if (song.paused)
song.play();
else
song.pause();
}
</script>
回答by jessegavin
jQuery is awesome for this sort of thing. It gives you the ability to easily manipulate elements based on their relationship to other elements in the DOM tree. In your example you want to be able to make the <a>elements only affect the <audio>elements that are right next to them when clicked.
jQuery 非常适合这种事情。它使您能够根据元素与 DOM 树中其他元素的关系轻松操作元素。在您的示例中，您希望能够使<a>元素仅<audio>在单击时影响它们旁边的元素。
The problem with your current Javascript code is that it is actually just grabbing only the first audio element on the entire page.
您当前的 Javascript 代码的问题在于它实际上只是抓取了整个页面上的第一个音频元素。
Here's how you can change your code to support an unlimited number of <a> & <audio>pairs.
以下是如何更改代码以支持无限数量的<a> & <audio>对。
- Add a class to the
<a>tag ('playback' in my example) - Replace the href attribute with a '#'
- Then use jQuery to attach a handler to the click event for elements with that class.
- 向
<a>标签添加一个类（在我的示例中为“播放”） - 用“#”替换 href 属性
- 然后使用 jQuery 将处理程序附加到具有该类的元素的 click 事件。
HTML
HTML
<div class="thumbnail" id="paparazzixxx">
<a class="playback" href="#">
<img id="play" src="../images/icons/35.png" />
</a>
<audio id="paparazzi">
<source src="../audio/fernando_garibay_paparazzisnlmix.ogg" type="audio/ogg" />
<source src="../audio/fernando_garibay_paparazzisnlmix.mp3" type="audio/mpeg" />
Your browser does not support HTML5 audio.
</audio>
</div>
Javascript
Javascript
<script type="text/javascript">
$(function() {
$(".playback").click(function(e) {
e.preventDefault();
// This next line will get the audio element
// that is adjacent to the link that was clicked.
var song = $(this).next('audio').get(0);
if (song.paused)
song.play();
else
song.pause();
});
});
</script>
