0

我正在尝试在我的网站上使用音频播放器，我需要使用 jquery 使图像充当播放/暂停按钮。

目前我正在使用 JS 和 CSS 图像精灵来使图像在单击时发生变化。因此，首先图像显示为播放按钮，当第一次单击它时，它变成了暂停按钮。然后，如果再次单击它，它将成为播放按钮等。

第一次单击它会在音频播放器中播放曲目，但是如果再次单击它不会暂停它。

理想情况下，我需要这样做，以便在单击按钮时播放曲目，然后在再次单击时暂停。

音频播放器带有自定义事件，我相信这些事件可以用来实现我所追求的，但我不太确定如何实现播放和暂停事件。

自定义事件可以在这里找到： http ://radykal.de/codecanyon/fullwidthaudioplayer/#api

下面是我正在使用的当前 JS 和 CSS。

JS

<script type = "text/javascript">
 jQuery(document).ready(function() {
   jQuery(".fap-single-track").click(function() {
      jQuery(this).toggleClass('playing');
   });
});
  </script>

CSS

.fap-single-track {
display: block;
width: 24px;
height: 23px;
text-indent: -99999px;
background: url(http://www.danceyrselfclean.com/wp-content/uploads/2012/12/sprites.png);
cursor: pointer;
}

.playing{
background-position: -27px 0;
}

.playing:hover {
background-position: -27px -28px !important;
}

.play_pause:hover {
background-position: 0 -28px;
}

任何帮助将不胜感激。

4

2 回答 2

1

根据您提供的链接，您必须使用.toggle()而不是.toggleClass

于 2013-01-05T21:52:53.523 回答
1

最后我得到了一点帮助。我只需要在正确的位置添加自定义事件，因此 JS 现在看起来像这样：

<script type = "text/javascript">
jQuery(document).ready(function() {
jQuery(".fap-single-track").click(function() {
    jQuery(this).toggleClass('playing');
  jQuery.fullwidthAudioPlayer.toggle();
});
});
</script>
于 2013-01-05T22:14:43.710 回答