1. introduce

html5 audio player(with playlist) using flexbox, svg, css animations and js api.

forked from @k-ivan at

demo: html5-audio-player


2. how to use

  1. insert Google Material Icons and AudioPlayer.css before </head>
  2. insert AudioPlayer.js before </body>
  3. use AP.init function

code example:

<!DOCTYPE html>
<html >
    <meta charset="UTF-8">
    <title>Audio player HTML5</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="" rel="stylesheet">
    <link rel="stylesheet" href="css/AudioPlayer.css">

        position: relative;
        max-width: 700px;
        height: 500px;
        border: solid 1px gray;

      <!-- Audio player container-->
     <div id='player'></div>

    <!-- Audio player js begin-->
    <script src="js/AudioPlayer.js"></script>

        // test image for web notifications
        var iconImage = null;

            container:'#player',//a string containing one CSS selector
            volume   : 0.7,
            autoPlay : true,
            notification: false,
            playList: [
                {'icon': iconImage, 'title': 'Try Everything', 'file': 'mp3/try-everything.mp3'},
                {'icon': iconImage, 'title': 'Let It Go', 'file': 'mp3/let-it-go.mp3'}
    <!-- Audio player js end-->


it will work!

HTML5 Audio Player

html5 audio player(with playlist) forked from @k-ivan

HTML5 Audio Player Info

⭐ Stars49
🔗 Source
🕒 Last Updatea year ago
🕒 Created7 years ago
🐞 Open Issues3
➗ Star-Issue Ratio16
😎 Authorlikev