HTML – Audio Playlist


hey guys what’s up several years ago I
made a video about an html5 audio player and call it HTML audio player and
It got about 30,000 views which is awesome thanks for all those who watched
that one but i got a question about how to make a list of songs so that’s what
this is going to be about, how do you get the music hosted as well as mozilla
firefox supports the mp3 ok so I’m going to be going over these
first few things really quickly before we get into the actual video “how do you get the music and how do you
host it?” so I will have a link to that it’s pretty simple essentially if you
want to host it within the same HTML file you just uploaded to the same place
you put your HTML file and then linked to it and i’ll have a link to an HTML audio host in
the description if you want to host it that way instead now what about Firefox? “mozilla firefox
supports mp3” well at the time of this video opera and firefox didn’t support mp3 but
now the html5 has pretty much been finalized it will work so as you can see we have hello every
time we touch and shake it off and this is going to be our final project so yes it’s going to be very easy now
that all browsers support mp3 files so I’m just going to go here and i’m going
to look and we have every time we touch .mp3, hello and shake it off and i’m
going to create a file called index.html and i’m going to create a basic
layout I’m gonna say html5 audio player ok now
we just need to make our audio player soso that’s
how we get the player you just add controls if you didn’t know how to do
that I got some comments saying how do you add controls just add controls to
the audio tag ok and we want to give this an ID
because we’re going to be using javascript to actually manipulate our
player if you don’t know JavaScript i’ll have a link in the description where you
can learn JavaScript it’s really helpful to know if you’re going to be building
websites you’re going to want to know JavaScript all or at least some JQuery
so within this audio player i’m going to put “sorry your browser doesn’t support
html5!” and that message doesn’t show up because our browser does support
html5 audio players ok so continuing on we’re going to make an unordered list and we’re going to give this an ID of playlist this is going to contain all the links
so we’re going to make a line item list item we’re gonna make three of them and
within it we’re gonna make an anchor tag so and then we’re just going to link to
our all our different mp3’s give them some titles such as hello shake it off and every time we touch now
if we refresh we get our list of links awesome now let’s style it so the
styling part you can do however you want and it’s not specific to this video once again I will have a link to the
source code of this project in the video description so do #playlist to
target the playlist ID and do list-style: none that gets rid of all the
different bullet points and now we’re going to do “#playlists li a” to target the
actual links within the lineup of list items so let’s do a color black and let’s
also get rid of the underlining so let’s do text-decoration:none so now we come over here you can see
that all the links are black but what about the current song we’re on? We
want it to stand out so let’s go ahead and so some changes but first let’s change “Everytime We Touch” so it looks proper. Ok now let’s do #playlist .current-song a that’s essentially a class and within that class we want to target the link within that line item so color blue so coming into the list item and then
just say class equals current – song and what this is going to do is make the
link blue and ideas it’s going to change between the different tracks depending
on what song is playing so if the song is playing it’s going to be blue and if
it’s not it’s going to be black pretty simple and straightforward ok so
coming down here we actually want to go ahead and write our script that is
actually going to process our audio player because you can’t use html5 to
actually do this you need to use some JavaScript and it’s pretty simple to do
so I you want to include jquery which I just did and then we can start writing
your code a link to jquery in the video description if you need the link so let’s call their function audio
player and call it and so function audio player and all this code is going to
automatically run since we already called the function in up above right there and so we just
want to test this so just put alert hi that’s just going
to give us a little pop-up saying hi if it works properly and it does sell
come back over here so it’s good to test your code everyone still want to make
sure it’s working properly right so let’s continue with our project and
audio player 0 that’s going to target the element 0 so
elements are off by one so it’s 0 1 2 3 4 5 we want the first audio player so we
targeted element 0 and then we get the source from that we want to set the
source equal to the first link so playlists li a it’s the first link once you put the
0ther so playlists li a grabs all the links and we want the zero link element
0 ok so what that’s going to do is if i
hit save it’s going to set the link to the first
link in our list now we also want to hit we actually
wanted to play automatically and if you don’t want to play automatically just
don’t write this line of code and then do . played actually play so now it’s playing every time we touch
and then pause that and come back here so good we are getting really good on
timing so I thought this was going to be a lot longer video but it shouldn’t be ok cool now we actually want to do an
action when we click between the link so we’re going to do that so let’s do a
hashtag playlists li a and what’s going to happen is we want to
write a function that runs every time you click one of the links oh hello and
then shake it off ok cool so playlists li a target all the
different links we want to do . click function so what this is going to do is it’s
going to pass see as a parameter and he being the event and so this is going to
run every time you click on one of those links ok so we don’t want it to actually
switch between the links and actually go to the page so we want to eat . prevent
default because normally when you click a link it will actually go to the page
but that doesn’t happen ok so if we click one of these links it
goes to the actual page and so II . prevent default i tells the browser hey don’t do that default action of what you think the
link should do because by default that you’re going to a file but that’s not
what we’re doing so II . prevent default ok now its
target the audio player again and set the source equal to this so we’re essentially grabbing the source
from the link you clicked on and setting it and putting it into the audio player
that’s essentially what that does and so as you can see it works pretty
well to switch between them I can jump between the song and then we can hit
play and pretty simple right ok that’s pretty cool but we need to
write some more code for styling an event listeners and things like that so
we’re not quite done but we’re about halfway there ok so do audio player 0 once again
targeting the audio player and let’s make it to a place automatically so now
when i refresh click between the links it’s which is
automatically I don’t actually have to play which is what we want cool that’s
pretty simple but what if we want to go ahead and work with our styling that we
created earlier switch between the current songs so we want to create a
variable called current song is going to track what song number were on so by
default the first song once again is 0 because arrays are off by one so it was
0 1 2 3 4 5 6 cetera ok so now we just want to go ahead and
set the current song so to do that we just first want to do
playlists li and then do removeclass current – song so what this is actually doing is
it’s removing the blue text so when I click on another link and removes the
blue styling that we applied earlier ok pretty simple now we just need to do
current song equals this and so this is this being the link we
clicked and then we want to grab the parent which is the actual list item and
then we want to grab the index which is the same as what number is 0 1 2 3 4 so it’s item 0 so within the actual list
so that’s what indexes so it says UL li and then get the number based on that
within our playlist itself ok self need to do this . add class or we
want to do this . parent add class because we want to target the parent not
the actual link right we want to target the list item so we
want to add the class current song based on the link were clicking on so as you
can see when you click between um you’re switching between the song and it
changes color which is exactly what we want to do ok cool so now what we want to do is we
want to add an event listener which automatically will run after the song
finishes because we want to plan order and we don’t want to have to wait and
manually click between the songs after song and we wanted to play the next song
automatically so we want to do audio player . adamant lister ended and then
write a function within that event listener which is going to run every
single time a song and so for example let’s look right here so if i skip to
the very end of the song let’s see here skip to 350 or 3 15 ok and we see hello
there hi or whatever that was just to test make sure code is working once
again it’s always good to test your code make
sure it’s working right so after the song ends we want to increment the song
count by one which makes sense because we’re going to a different song and now
we’re just going to write if current song is equal to the playlists li a so the amount of links length so if this
current song is equal to the length of the playlist we want to go back to zero essentially
and restart our playlist over again if you don’t want to do that you can leave
those two lines out and now we want to remove the class from the song that just
ended so removeclass current song playlist I like a song that’s what that does so
if we go to the very end wait a couple seconds and it removed the
class in the tape tex changed to black now we want to make
the text to blue for the current song so we want to do playlists li eq which is actually
charging that specific element so we want to target the element that is the
current song so our variable current song will handle
that for us and the plus signs are just used to contain concatenate variable so
it automatically will insert whatever song number where in and automatically
reference that that’s essentially what we’re doing here and then after that we want to add the
class and we want to add the class current – song pretty simple right ok that sounds pretty simple now let’s do / audio player yeah I
didn’t target 20 element and then do source and then do playlists li a and then current songs so this is
actually setting up the new song and grabbing it based on the current song we
want to change it to right there because it’s selecting the current song which is
the number what the song is on ok so the do audio
player and let’s do 0 . play and the song will automatically play once it
ends so as you can see it you can click
between them just fine and if we go to every time we touch and
go to the very and you sockets let’s just weigh wait and it should go to the next one
automatically and there we go so it changed between colors and it
automatically change you can jump between them and that’s pretty much our
project and so as you see it automatically starts over 2 which is
awesome if you want to loop between the playlist over and over you can customize this however you want
now the last thing i want to do i’m just going to cut this code because there’s a
lot of JavaScript here so I’m just going to remove it and put it in a separate
file and i’m just going to call this audio player . jas paste the coded and
then just reference it within our index dot HTML file so we want to type script
SRC audio player . Jas and then reference it there so it still shows up
and everything is still working just like it should so if you enjoyed this video and you
found it helpful make sure you hit the subscribe button right there and until next time i will catch you
guys later

100 Comments

Add a Comment

Your email address will not be published. Required fields are marked *