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
- 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>
it will work!