我有一个画廊,其中包含 10 个左右的缩略图,每个缩略图代表一首歌曲。为了控制每个播放,我设置了一个播放按钮以通过 jQuery 淡入。在对 Apple 的开发中心进行一些挖掘之后,我发现了一些原生的 JavaScript 来控制音频。它工作得很漂亮,但是是为一次控制一个对象而编写的。我想做的是将其重写为一个动态控制您选择的缩略图的播放/暂停的函数。
下面是我找到的代码.. 可以工作,但是写 10 次就会有很多不必要的代码。
感谢您一直以来的帮助和建议!
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:
<script type="text/javascript">
function playPause() {
var song = document.getElementsByTagName('audio')[0];
if (song.paused)
song.play();
else
song.pause();
}
</script>
最佳答案
jQuery 非常适合这类事情。它使您能够根据元素与 DOM 树中其他元素的关系轻松地操作元素。在您的示例中,您希望能够制作 <a>
元素只影响 <audio>
单击时紧挨着它们的元素。
您当前的 Javascript 代码的问题在于它实际上只是抓取整个页面上的第一个音频元素。
以下是如何更改代码以支持无限数量的 <a> & <audio>
对。
- 向
<a>
添加一个类标记(在我的示例中为“播放”) - 将 href 属性替换为“#”
- 然后使用 jQuery 将处理程序附加到具有该类的元素的点击事件。
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
<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>
关于javascript - 使用 JavaScript 动态控制 HTML5 音频,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5697974/