Play a certain audio track when clicked - php

Question

All the songs have a .song class but it plays the first song on the playlist. It's basically the play button for the whole playlist. I've play around with this for awhile and I can't seem to get it right. It might be the simplest thing too. I have the song populate with php depending on the album. I want people to be able to click a certain song and that song plays.
example: http://mixtapemonkey.com/mixtape?m=637
Also if you know how to toggle between the play and stop button, that would be nice to 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);
}
})

Answer 1

You have to target the audio element inside each .song, now you're always targeting the first one.
To toggle, check if the audio is paused, and 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 a few changes, I'm guessing something like this would 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 i = 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') );
}
});

Answer 2

Just for clarity - you say the songs have class "song", yet your code says "playsong". A typo, perhaps?
The first song always plays because you always play nowPlaying[i], and i=0 - which only changes when $('.next').on('click', function(){}) is called! You need a way to either change i when a song is clicked, or make the HTML more "modular" (I use this loosely) around each song.
Example HTML:
<audio id="coolSong1">
<!-- Sources -->
</audio>
<!-- I'm not sure what you're using as play, pause, next buttons, so I'll use buttons -->
<input type="button" class="play" name="coolSong1" value="play" />
<input type="button" class="pause" name="coolSong1" value="pause" />
<input type="button" class="next" name="coolSong1" value="next" />
Corresponding script:
$(".play").click(function(event) {
document.getElementById(event.target.name).play();
});
$(".pause").click(function(event) {
document.getElementById(event.target.name).pause();
});