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

Popular posts from this blog

php - Calling a template part from a post -

Firefox SVG shape not printing when it has stroke -

How to mention the localhost in android -