我有一个画廊,有10个左右的缩略图,每个都代表一首歌曲.为了控制每个播放,我设置了一个播放按钮,通过jQuery进行淡入淡出.经过一些挖掘苹果开发中心,我发现一些本机
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> &安培; <音频>对.
>将类添加到< a>标签(在我的示例中为“播放”)
>用’#’替换href属性
>然后使用jQuery将一个处理程序附加到该类的元素的click事件中.
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>
