Play a certain audio track when clicked

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') );
    }
});