Minimal Music Player With Audio Visualizer - jQuery jsRapAudio

Minimal Music Player With Audio Visualizer - jQuery jsRapAudio

The jsRapAudio jQuery plugin lets you dynamically render a minimal clean, music player from any HTML5 audio files, for example Ogg, Mp3, Wav.

Integrated a classic audio visualizer that auto resizes to frequency scale of your audio.

1. Insert jQuery library together with the jQuery jsRapAudio plugin's files into the html file.

<link rel="stylesheet" href="jsRapAudio.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
 </script>
<script src="jsRapAudio.js"></script>

2. Create a container in which you want to insert the audio player.

<div id="example" ></div>

3. Call the function on the container element and specify the path to the audio file.

$('#example').jsRapAudio({
  src:'example.mp3'
});

4. Possible options to customize the music player & audio visualizer.

$('#example').jsRapAudio({
  src:'example.mp3',
  autoplay:false,
  controls:true,
  loop:false,
  capHeight:4,
  capSpeed:0.6,
  meterCount:40,
  meterGap:2,
  frequency:0.7,
  capColor:'#fff'
});

5. Callback functions available.

$('#example').jsRapAudio({
  onEnded:null,
  onLoadedmetadata:null,
  onVolumechange:null
});

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

  • Publication date: 07.09.2018
  • Source