john1-lab / html5-audio-player Goto Github PK

View Code? Open in Web Editor NEW

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

License: Other

CSS 31.01% HTML 4.32% JavaScript 64.67%

html5-audio-player's Introduction

html5-audio-player

1. introduce

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

forked from @k-ivan at http://codepen.io/k-ivan/pen/pJMLmJ

demo: html5-audio-player

2. how to use

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

code example:

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

    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="css/AudioPlayer.css">
    <style>

    #player{
        position: relative;
        max-width: 700px;
        height: 500px;
        border: solid 1px gray;
    }
    </style>
  </head>

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

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

    <script>
        // test image for web notifications
        var iconImage = null;

        AP.init({
            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'}
          ]
        });
    </script>
    <!-- Audio player js end-->

  </body>
</html>