サイトでオーディオ プレーヤーを使用しようとしていますが、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;
}
どんな援助でも大歓迎です。