Create a Custom JavaScript Audio Player with playlist & visualizer

In this tutorial you'll learn how to make a custom audio player with JavaScript with a playlist and visualizer.

00:42 Setup
02:52 Creating elements
08:49 Hooking up playback
15:46 Styling the player
21:20 Adding the viusaliser
30:58 Customising the visualiser

— Follow Me —
— Thanks! —

So in this JavaScript Audio Player tutorial we'll build our own custom audio player with JavaScript. There will also be a playlist with our audio player.

We'll make a JavaScript class that constructs a new custom audio player object that we can load our own audio files into.

The class will build all of the HTML markup for us and we just need to add our own custom stylesheet to style the playlist elements which is basically the links to play each song in our player.

The final piece of our JavaScript audio player with playlist will be to create a JavaScript audio visualizer to create a frequency graph based on the audio input that is currently playing.

[unddpix]

Thank you! A music player tutorial with it's maker commenting! No music as a filler! This one I really want to watch and learn from it!

[MM-vrrj]

I love that you offer a wide variety of tutorials

[emranweb]

I am trying to make audio player and truck in the visualization part. after follow your tutorial, It work now thanks

[pendonamusic]

Amazing tutorial. Thank you very much! Would you mind making a part 2 to add a progress bar and next/prev controls. Thanks!

[jemrl]

JS coding looks great and fairly advanced, where did you learn these skills? In terms of JS training what courses would be recommended to develop more advanced skills. Thanks

[billkeithchannel]

So is a video player that much different? I have the Rumble script to embed a player but they don't have playlist support only individual videos so I want to make my own custom list and have it autoplay once a video is done. I also want it to play the audio in the background if the page is loaded using a phone.
I also have been using blogger as my sandbox for testing code and wonder if this code will work there? So if you use an actual URL to a song or video will it load it from the web?

[ItsAndyYo]

Would be interesting to try and apply this to a live audio signal like an icecast source. No reason why it wouldnt work, right?

[armandoalvarez]

Hello, I'm currently learning JavaScript and I am following along with your code, but I don't understand a certain part and wondering if you can help me understand?

I don't understand how you set the variable "currentAudio = null", but then you use it in your event function to compare the audioItem's href with currentAudio's href. Since currentAudio is nothing but a null value, what exactly are you comparing here?

Then you in your else statement you set currentAudio = audioItem. Does this happen before the above comparison, so you are comparing the clicked audioItem with the current href value of currentAudio?

Appreciate any help, thanks.

[saurabhchaudhary]

Hey there James. I am not that confident with JS yet. Keeping a job as the end goal, what should be my priority ?
JS Projects or Practicing the Algos.

[chrisandrew]

I'd like to follow along with how you do things in the video... I have VSCode installed and also an older version of node which have used before (though only once and I can't remember much of it... and it is an old version as I use windows 7 and cannot get the latest versions).

For the sake of node noobs, such as myself. Can you outline some steps or procedures that we must do or follow in order to get the page to load as needed throughout the tutorial?

I'd really appreciate that personally.. I am not far into the course and I am enjoying your teaching style tbh... thanks for the tutorial.

[kovendanragupathi]

Hi, Is it possible to do video player like VLC by using Nodejs and javascript, if yes can you please do one video tutorial since i want to learn and build video player like VLC, MX player ..

[lalit]

Great work sir.please make new communication app which have admin to control user and one to one user to other user for chat.please do this in nodejs and angular

[jakewagner]

This looks awesome but it doesn't seem to be working properly. I've cloned both the starter branch and the main branch, npm install then npm run serve, and it seems to be having an issue with the script from package.json. What is the solution to this??? Anybody else having a problem getting this server start??

cp -R src/songs dist/songs && parcel --no-source-maps src/index.html

[NERO-ezmn]

can you make a tutorial on ELECTRON with this 1 from zero to hero? w/ an upload feature? keep up the Good Work

[kat_Lindrud]

I've followed along to a T but my app.js will not run at all, I did the inspect element in firefox and did not see the audio div appear, and when I plugged in my URLs, I did not see them appear. I see no difference in what I am doing versus yourself, except that I am using Adobe Dreamweaver 2020. I am baffled. I will try and follow along until the end of the video and update my comment if suddenly it starts working.