Accio Music Player

The tutorial that I have previously mentioned has come in very handy, basically I followed it step by step pausing as and when and created the most basic music player ever! However it worked which is something!

So how did it work?

So it is done by using an array, we start off by declaring the number the array starts at, which in jQuery is 0 because 0 = 1, confusing but it goes up in increments of 1 so not too bad.

We also had to declare a variable which we did at the top of the code.
We then told the varible to look through the page by using GetElementByClass, which is similar to ID, but instead of ID's we used classes, ID's could have been used also.

The tutorial first started with a play button, which is simple enough.

Originally the tutorial has used divs but because of the way I have styled I've changed to <li> List items set within a <ul> Unordered List.

We can see here that I have set them all using the classes that I want to use.


At the top of the page I have the jQuery to go with this.

Within this snippet lies the play and stop class.

Top of the page

Using jQuery we have made this on-click functions which basically mean, when you click on something it will do something. Now we have created that inside of it we are able to program it. What I have asked the play to do is look at the array. Its worth noting at the top of the page I've loaded the array into the variable. So now that when you click play it looks at the array and see's what is number 0 and plays that song.

This is the first song in the array, the way jQuery defines this is by going through the DOM and looking for the first object with the class 'playsong'.. Like we told it to earlier. And because this is the first object it can find it will play this first, it knows to play this as a song because of the <audio tag>

It does the same with stop also.

This snippet of code is different.

We will start with next. So it's talking to the next class we can see this at the top and we have set it as a on-click function.
Inside the function we have said for the function for each audio tag with a class of playsong. When clicked pause the song.
We then come out the function but stay inside the other function we tell it increment in the array by using ++i. We then tell it to load the next song and then to play it.

The previous is the same as next however instead of telling it to increment we tell it to decrement by using --i.

Using this code, we have created an array which will increment and decrement as told.

In the next part it will tell you how to change the song name, song artist and artwork.

So in this we have called the function callMeta, because we calling Meta Data, we have 3 variables in this function. They all do the same just to different parts.

Starting off with trackTitle, we have declared the variable here and we then link it through to our array, but then by using .attr we tell it to look into the array for the attribute 'data-songtitle' once we have done this. We need to write this class down in our list.

So we written the class in our list then by using .html it will override everything thats in that tag and change it to trackTitle which we have declared above it.

The same principle applies to the next tag, in the img one because we are using images some things change and we have to say looking for the images in album.art then we use attr('src', albumArt) So basically the image in album art.

We then need to callMeta in our play, pause, next and previous variables so that they know to change.

Once you have done this you will have a working music player.

It will look so basic but it will be present.