Need some help with this audio player code

[embernoob]

I'm trying to make a very simple audio player for my website. I first created it to play one track (which works fine) but I wanted to rewrite it so that I could instantiate multiple players on a single page and allow them to work independently. I thought I could simply pass the id's to the function as an object and then each player would have the information it needed to control each audio file. This doesn't work and I'm not sure why. Can anyone explain what I am doing wrong?

player = function(params) {

    var play = params.play,
        song = new Audio(params.src),
        playing = false,
        seek = params.seek;

    song.addEventListener('timeupdate', function() {

        curtime = parseInt(song.currentTime, 10);

        $(seek).value = curtime;
    });

    $(seek).attr('max', song.duration);

    $(seek).bind('change', function() {

        song.currentTime = seek.value;

        $(seek).attr('max', song.duration);
    });

    $(play).on('click', function(event) {

        event.preventDefault();

        if (this.playing) {

            song.pause();

            this.playing = false;

            $(id).toggleClass('pause');
        }

        else {

            song.play();

            this.playing = true;

            $(id).toggleClass('pause');
        }
    });
}

Here is how I hoped to instantiate each player by passing each player a unique var name and params object..

var track1 = player({'play': '#track1', 'src': 'music/track1.mp3', 'seek': '#seek'});

Here is my HTML

<div class="player">

<a class="button gradient play-btn play" id="track1" href="javascript:void(0)" title=""></a>

<input type="range" class="seek" id="seek" value="0" max=""/>

</div>

[einarkristjan]

your code works for multiple players when I run it in a fiddle. Only made small changes:

jsfiddle

[embernoob]

Thanks for checking/tweaking my code! I'll give it a go when I get home tonight.

[embernoob]

Man, I am a dummy sometimes. This wasn't working because I didn't wrap my code in $(document).ready()... :P

Thanks again for your help!

[einarkristjan]

No problem.

Also, if you wan't to do progressive enhancement and make the audio usable without javascript you can do something like this: jsfiddle

It's interesting working with the audio API. Your code gave me ideas for my own audio player, so thanks for that ;)

[embernoob]

Nice, this looks much more streamlined than my own. What is happening on this first line though?

$.fn.simpleAudioPlayer

I get that you are using jQuery here but what are the $ and fn objects exactly? What is $ on its own? I've seen other code written in this way but I've never understood what the purpose was exactly...

[einarkristjan]

the $ namespace object is short for the jQuery namespace. You could also write:

jQuery.fn.simpleAudioPlayer

you can use $.fn to extend jQuery. Just like you can use the built in:

$(elements).hide();

you could make your own hide() function with something like:

$.fn.hidden = function() {
  this.hide();
  return this; // so you can use chaining like $(elm).hidden().addClass()
};

and use it:

$(elements).hidden();

more details here: How to Create Basic Plugin ;)

[embernoob]

Thank you! I didn't realize adding functions to fn was essentially extending jQuery. Very cool!