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

あなたが与えたリンクによると、 .toggleClass ではなく.toggle ()を使用する必要があります

于 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 に答える