In this video we will create a custom Audio Player using CSS and JavaScript.
All the stuff (exclude songs) and code available at : https://github.com/DaftCreation/Custom-Audio-Player
Hey guys! What about part – 2?
With more functions.
Tell me in the comment box.
Social Media
—————————
FACEBOOK : https://www.facebook.com/DaftCreation
INSTAGRAM : https://www.instagram.com/DaftCreation01
WHATSAPP : https://chat.whatsapp.com/JjoXHH0gkSZBqqe4MDkLND
Web site design tutorials.
Including :
HTML, CSS, JavaScript, CSS Layouts, Responsive Design
Original source
39 responses to “Custom Audio Player | CSS – JavaScript Tutorial”
This is a really awesome tutorial. I would definitely like to see a followup tutorial on this with more features and especially with a sound spectrum/visualization. This is something I want to create but I don't know where I would even start. Thanks to this tutorial I can create an audio player but to add a sound spectrum animation created in C4D is a little more difficult. So, if there is any way that you can cover this as well would be amazing. Thanks again the tutorial.
tankssss
what is the software you are using ti code this?
can you control audio with that created seek bar of yours???
It's a great video, but I just built a PURE Javascript play that has a lot more functionality than what is shown in this video. You got me of to a great start though & thanks for that. I now know how to create a whole playlist and when clicked, it selects the song & shows the info (images, titles, prices, etc., etc.). I didnt realize that Javascript is so easy until I really took the time to start learning it.
Awesome tutorial! I would like to see you create more styles, especially an audio player that has a playlist underneath it and when clicked, it plays the selected song from the list. Please write me back here if you create such a video. Thanks!
thanks can you show mute an unmute this code?please I need this is pleasee
where did js get the audio?
nice
The problem with this (and every other html media player code I have seen posted) is that the songs have to be hard-coded. I've been looking for something that will pull the songs from a folder on my computer, like I can do with a C# app. I understand that this requires something like PHP code, but I'm a PHP novice at best 🙂 From my understanding, javascript cannot access the file system, though this could be incorrect. Anyone have any ideas?
Part two!!!!
Great video! Can you create video how to made this type of player: https://pinkzebramusic.com/music/?
Can i add audio alert in my code?
body {
background-color: rgba(0, 0, 0, 0);
margin: 0px auto;
overflow: hidden;
}
/* border*/
._4-u2 {
border: 0
}
/* background */
._4-u8 {
background: none
}
._2l6k {
display: none
}
/* Donation amount */
._2l6m {
color: #FFFFFF;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black, 4px 4px 6px #000000;
text-align: center;
font-size: 45px;
}
/* Profile name */
a {
color: #FFFFFF;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black, 4px 4px 6px #000000;
text-align: center;
font-size: 65px;
font-weight: 800;
font-family: "Arial Black", Gadget, sans-serif;
}
/* profile picture */
._2l6h {
width: 170px;
height: 170px
}
/*Donation text*/
._2l6n {
color: #FFFFFF;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black, 4px 4px 6px #000000;
background-color: rgba(0, 0, 0, 0);
box-shadow: 0px 0px 0px black;
text-align: center;
font-size: 40px
}
._2l6i {
padding-top: 8px
}
.UFICommentBody {
display: none;
visibility: hidden;
}
._2l6i {
visibility: hidden
}
._2l6i > span > a {
visibility: hidden !important
}
._2l6i > span > a:nth-child(1) {
visibility: initial !important
}
._25zr,
._3-8j {
display: none;
}
._4-u2>._4-u3 {
border: 0;
}
.uiScrollableAreaContent > ._2l6d {
display: none;
}
.uiScrollableAreaContent > ._2l6d:nth-child(1) {
display: block !important;
}
._2l6j { visibility: initial !important
}
/*Gif animation*/
._2l6l {
width: 370px;
height: 300px;
background: url("https://media.giphy.com/media/dCACLID46CPjBU2QQq/giphy.gif"😉 no-repeat;
margin-left: auto;
margin-right: auto;
width: 50%;
}
nope jquery
How can I add a volume slider control?
Thanks for the lesson. Did you do Part 2? I'd like to know how to control the sound through the bar and any other tricks you can display.
Thank you. This helps me a lot.
What IDE is this? I love it.
How did you call your music file into your js?
lots of love from india
amazing dude
hello can this audio player to native like android or iphone , if yes would you like give this tutorial on mobile apps
Best Video 🔥🔥🔥🔥How can I shuffle Music ?
Thanks man!
For some reason my image wont fit to the screen, its like going to the bottom left. Is there anyway i can make it fit to the screen?
Part 2???
Can i add new music on it? i already add Song4.mp3 and Song5.mp3 in var song, but it can't be played. Need some advice here thank you ^^
how do you set the player colour?
thank you from Morocco
How to download and play audio..
Wowo! You're a boss bro. Would you mind if I use this for my site?
I'm very new to js.
So, can you please tell me that how did you run the codes?
I mean how did you create a "window" box program in video?
Please help me.
Excellent video! Thank you:) #Brazil
Ho do I make a seek bar responsive?
Can you upload a file where the Music player is responsive for mobile and tablet? 🙂
what is controlling the number of songs here. I downloaded the github stuff but couldnt locate where thats done. I assumed removing the song3.mp3 and poster3 would do it, but it just shows a blank area. 😮
my play and pause icon not change when click
Great man !!!. Please, can you explain the play/pause toggle with font awesome icons?. You are amazing.Cheers from Spain
Pictures are not changing when i click next