Single Button Audio Player In jQuery

A minimal audio player plugin for jQuery that enables you to play/pause audio files or live steaming with a single button.

See Also:

• 10 Best Custom Audio Players In JavaScript And jQuery

How to use it:

1. Install & download the package.

# NPM
$ npm install jquery.button-audio-player --save

2. Put the stylesheet jquery.button-audio-player.css and JavaScript jquery.button-audio-player.js.

<link rel="stylesheet" href="/path/to/dist/jquery.button-audio-player.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/dist/jquery.button-audio-player.js"></script>

3. Or use with NPM.

@import '~jquery.button-audio-player/dist/jquery.button-audio-player.css';
import $ from 'jquery';
window.jQuery = $;
import 'jquery.button-audio-player';

4. Create a container to hold the audio player.

<div id="default"></div>

5. Initialize the audio player and specify the path to the audio file. Done.

$(function(){
  $('#default').buttonAudioPlayer({
    src: 'https://www.jqueryscript.net/dummy/1.mp3'
  });
});

6. Create a single button audio player with a bar animation similar to a audio visualizer.

$(function(){
  $('#default').buttonAudioPlayer({
    src: 'https://www.jqueryscript.net/dummy/1.mp3',
    type: 'bar-animation'
  });
});

7. Enable & config the infinite loop.

$(function(){
  $('#default').buttonAudioPlayer({
    src: 'https://www.jqueryscript.net/dummy/1.mp3',
    type: 'bar-animation',
    loop: true,
    loopStart: false, // in seconds
    loopEnd: false // in seconds
  });
});

Changelog:

2020-07-29

• Added infinite loop

---

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