php - Play a certain audio track when clicked -
all songs have .song
class plays first song on playlist. it's play button whole playlist. i've play around awhile , can't seem right. might simplest thing too. have song populate php depending on album. want people able click song , song plays.
example: http://mixtapemonkey.com/mixtape?m=637
also if know how toggle between play , stop button, nice throw in there too. thanks!
<script> jquery(document).ready(function(){ i=0; nowplaying = document.getelementsbyclassname('playsong'); nowplaying[i].load(); $('.play').on('click', function() { nowplaying[i].play(); callmeta(); }); $('.song').on('click', function() { nowplaying[i].play(); callmeta(); }); $('.pause').on('click', function() { nowplaying[i].pause(); callmeta(); }); $('.next').on('click', function() { $.each($('audio.playsong'), function(){ this.pause(); }); ++i; nowplaying[i].load(); nowplaying[i].play(); callmeta(); }) function callmeta(){ var tracktitle = $(nowplaying[i]).attr('data-songtitle'); $('.songtitle').html(tracktitle); var trackartist = $(nowplaying[i]).attr('data-songartist'); $('.songartist').html(trackartist); } })
you have target audio element inside each .song
, you're targeting first one.
toggle, check if audio paused
, , play()
or pause()
accordingly :
$('.song').on('click', function() { var audio = $('.playsong', this).get(0); if (audio.paused) { audio.play(); }else{ audio.pause() } callmeta(); });
edit:
with few changes, i'm guessing work :
jquery(document).ready(function($){ var audios = $('.playsong'); var audio = audios.get(0); audio.load(); $('.play').on('click', function() { callmeta(audio); }); $('.song').on('click', function() { audio = $('.playsong', this).get(0); callmeta(audio); }); $('.pause').on('click', function() { audio.pause(); }); $('.next').on('click', function() { var = audios.index(audio); audio = $(audios).get(i+1); callmeta(audio); }); function callmeta(elem){ audios.each(function(i,el) { if (!el.paused) { el.pause(); el.currenttime = 0; } }); elem.load(); elem.play(); $(elem).on('ended', function() { $('.next').trigger('click'); }); $('.songtitle').html($(elem).attr('data-songtitle')); $('.songartist').html( $(elem).attr('data-songartist') ); } });
Comments
Post a Comment