• Friday , 29 May 2020

Custom Audio Player | CSS – JavaScript Tutorial

Code Canyon



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

3d Ocean

Related Posts

39 Comments

  1. anthony trinidad
    April 28, 2019 at 05:18

    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.

  2. TopDownloads
    April 28, 2019 at 05:18

    tankssss

  3. Dani Maloschik
    April 28, 2019 at 05:18

    what is the software you are using ti code this?

  4. Kabir Kayastha
    April 28, 2019 at 05:18

    can you control audio with that created seek bar of yours???

  5. Aaron Esteban
    April 28, 2019 at 05:18

    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.

  6. Aaron Esteban
    April 28, 2019 at 05:18

    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!

  7. aslani mohammad
    April 28, 2019 at 05:18

    thanks can you show mute an unmute this code?please I need this is pleasee

  8. Xtian Josh
    April 28, 2019 at 05:18

    where did js get the audio?

  9. Seav Chhing
    April 28, 2019 at 05:18

    nice

  10. Michael Tanner
    April 28, 2019 at 05:18

    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?

  11. GABA8 play.
    April 28, 2019 at 05:18

    Part two!!!!

  12. Background Music for Youtube Videos
    April 28, 2019 at 05:18

    Great video! Can you create video how to made this type of player: https://pinkzebramusic.com/music/?

  13. GET Channel
    April 28, 2019 at 05:18

    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&quot😉 no-repeat;

    margin-left: auto;

    margin-right: auto;

    width: 50%;

    }

  14. Ksee
    April 28, 2019 at 05:18

    nope jquery

  15. David Picarazzi
    April 28, 2019 at 05:18

    How can I add a volume slider control?

  16. Darok Viana
    April 28, 2019 at 05:18

    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.

  17. Kaung Kaung
    April 28, 2019 at 05:18

    Thank you. This helps me a lot.

  18. Nicolás Tastaca
    April 28, 2019 at 05:18

    What IDE is this? I love it.

  19. ZXC Technology
    April 28, 2019 at 05:18

    How did you call your music file into your js?

  20. Sudarshan poojary
    April 28, 2019 at 05:18

    lots of love from india

  21. Sudarshan poojary
    April 28, 2019 at 05:18

    amazing dude

  22. da levi
    April 28, 2019 at 05:18

    hello can this audio player to native like android or iphone , if yes would you like give this tutorial on mobile apps

  23. Rap K
    April 28, 2019 at 05:18

    Best Video 🔥🔥🔥🔥How can I shuffle Music ?

  24. Gerardo Sa
    April 28, 2019 at 05:18

    Thanks man!

  25. ZidaneDaMan10
    April 28, 2019 at 05:18

    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?

  26. GhostGoblin
    April 28, 2019 at 05:18

    Part 2???

  27. Muhammad Ilyas
    April 28, 2019 at 05:18

    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 ^^

  28. Mattie Bit
    April 28, 2019 at 05:18

    how do you set the player colour?

  29. فوتبول √
    April 28, 2019 at 05:18

    thank you from Morocco

  30. Ridwan Ridiawan
    April 28, 2019 at 05:18

    How to download and play audio..

  31. Vincent Emilio
    April 28, 2019 at 05:18

    Wowo! You're a boss bro. Would you mind if I use this for my site?

  32. A YouTube User
    April 28, 2019 at 05:18

    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.

  33. PG Jay
    April 28, 2019 at 05:18

    Excellent video! Thank you:) #Brazil

  34. Anelation Music
    April 28, 2019 at 05:18

    Ho do I make a seek bar responsive?

  35. Arno vandijck
    April 28, 2019 at 05:18

    Can you upload a file where the Music player is responsive for mobile and tablet? 🙂

  36. OMGITSGB
    April 28, 2019 at 05:18

    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. 😮

  37. joaquin delgado
    April 28, 2019 at 05:18

    my play and pause icon not change when click

  38. joaquin delgado
    April 28, 2019 at 05:18

    Great man !!!. Please, can you explain the play/pause toggle with font awesome icons?. You are amazing.Cheers from Spain

  39. Aso Ako
    April 28, 2019 at 05:18

    Pictures are not changing when i click next

Leave A Comment

You must be logged in to post a comment.