Minimal Cross Platform Audio Player - jQuery tinyPlayer.js

Minimal Cross Platform Audio Player - jQuery tinyPlayer.js
File Size: 418 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

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.