
tinyPlayer.js is a jQuery plugin used to generate a minimal, responsive, cross-platform audio player for playing HTML5 audio files (MP3, Wav, and Ogg) on your podcast page.
Dependencies:
- jQuery
- Font Awesome (for player controls)
- howlerjs (a cross-platform audio library)
How to use it:
1. Load the necessary JavaScript and CSS files in the document.
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"> </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.0.13/howler.min.js" integrity="sha384-sFkNm3ufIBzWAEmeHSpFm2ssvymvtHM/tWp7sSasJfEtwWoHYkkpVAr+neXTwJxH" crossorigin="anonymous"> </script>
2. Download and load the jQuery tinyPlayer.js plugin's files in the document.
<link href="src/css/tinyPlayer.css" rel="stylesheet"> <script src="src/js/tinyPlayer.js"></script>
3. Embed an HTML5 audio into the document and specify the audio title which will be displayed in the audio player.
<audio controls class="iru-tiny-player" data-title="Sample Audio File"> <source src="audio.mp3" type="audio/mpeg"> </audio>
This awesome jQuery plugin is developed by Irubataru. For more Advanced Usages, please check the demo page or visit the official website.
- Publication date: 08.07.2018
- Source