Minimal Cross Platform Audio Player - jQuery tinyPlayer.js

Minimal Cross Platform Audio Player - jQuery tinyPlayer.js
File Size: 419 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 (OPTIONAL).

<audio controls 
       class="iru-tiny-player" 
       data-title="Sample Audio File">
       <source src="audio.mp3" type="audio/mpeg">
</audio>

Changelog:

2020-01-17

  • Added the option to seek by clicking in the box

This awesome jQuery plugin is developed by Irubataru. For more Advanced Usages, please check the demo page or visit the official website.