Build An Audio Player Using HTML5 & jQuery – Part 1

Here I will show you how to build a fully functional Audio player using the HTML5 JavaScript audio API. It allows you to create a playlist of songs and skip …


#codango #developer #development #coder #coding

We're happy to share this resource that we found. The content displayed on this page is property of it's original author and/or their organization.


39 Replies to “Build An Audio Player Using HTML5 & jQuery – Part 1”

  1. brilliant video…….
    I don't want to use folders, images, media ect,… I want my html files and everything else to all be together  in the same folder. How would I alter the code below to reflect that.??
    $('img.cover').attr('src','img/covers/'+ cover);

  2. At the end of the media files the script stops. What I can do if I want that after a musictitle the new (next on the Playlist) starts automatically?

    I hope you can help me by this. Thanks

  3. Really great tutorial Brad.

    To Brad or anyone:

    Would you be able to point me in the right direction so I could figure out:

    1. How to make the playlist repeat.
    2. Be able to move ahead or back by dragging the mouse along the progress bar.

    Thanks in advance!

  4. Hi, my name is Joe Navera. I am doing a similar like yours. Everything is fine, but when I input this:


    Then I "f5", nothing change. Can you help me?

  5. This is a really cool audio player and I have spent several hours watching the two tutorials and messing with the code, One thing that I am looking for, as are a  lot of users, is a player that will work in all browsers. I have seen a lot of code where the audio player is instantiated and in the playlist are the audio files in different formats to handle multiple browsers. These lists usually contain an .mp3 file and an .ogg file. Through out these two videos I have notice that only .mp3 files are used and no .ogg files.

    Not knowing a lot about jQuery I went to w3schools site to find out some basic information about it. One of the questions from someone was:

    Q.Will jQuery work in all browsers?
    A.The jQuery team knows all about cross-browser issues, and they have written this knowledge into the jQuery library. jQuery will run exactly the same in all major browsers, including Internet Explorer 6! 

    So Brad, my question to you is: when you were putting together the code for this really nice audio player were you under the assumption and do you you believe that your player "will run exactly the same in all major browsers?" Have you tested?


  6. hi brad . super tutorial . very well explained . i've followed it to the letter but no audio plays when i click the play button . i then downloaded the files from github and replaced the tracks with my own but they still don't play . bit of a broad question i know but any recommendations? thanks

  7. Hey Traversy Media nice tutorial just one question can these HTML5 codes you showed in the video can still work and add in JQuery Mobile? For Example:
    <div data-role="page">
    <div data-role="header">
    <h1>Welcome To My Homepage</h1>

    <div data-role="main" class="ui-content">
    <p>add content!!</p>

    <div data-role="footer">
    <h1>Footer Text</h1>

  8. Hey Brad I want to thank you for styling the audio Player, most show the basic simple code without any styling..I am trying to learn a little basic coding here and this is truly an awesome video my friend..

Leave a Reply

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