Custom Audio Player | CSS – JavaScript Tutorial




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”

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

  3. 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!

  4. 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?

  5. 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%;

    }

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

Leave a Reply