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.

How to use it:

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

<link rel="stylesheet" href="jsRapAudio.css">
<script src="jquery.min.js"></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
});

Changelog:

2022-07-04

• JS update

2022-02-25

• JS update

2020-12-22

• JS & CSS update

2018-10-02

• JS & CSS update

2018-09-11

• JS & CSS update

---

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