Bootstrap 4 Audio Player With Playlist - jQuery audioPlayer.js

This is a minimal, clean Audio player plugin with playlist support, built using jQuery library, Bootstrap 4 framework, Material Icons and jQuery UI slider widget.

How to use it:

1. Include the needed JavaScript and CSS libraries on the webpage.

<-- Stylesheets -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/flick/jquery-ui.css">

<-- JavaScript -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I5f" crossorigin="anonymous"></script>
<script src="js/jquery-ui-slider.js"></script>

2. Include the Audio Player's files on the webpage.

<link rel="stylesheet" href="css/audio-player.css">
<script src="js/audioPlayer.js"></script>

3. The required markup for the audio player & playlist.

<section class="audio-player card">
  <div class="card">
    <div class="card-body">
      <h2 class="card-title col text-center">Bootstrap 4 Audio Playlist</h2>
      <div class="row align-items-center mt-4 mb-3 mx-0">
        <i id="play-button"class="material-icons play-pause text-primary mr-2" aria-hidden="true">play_circle_outline</i>
        <i id="pause-button"class="material-icons play-pause d-none text-primary mr-2" aria-hidden="true">pause_circle_outline</i>
        <i id="next-button"class="material-icons text-primary ml-2 mr-3" aria-hidden="true">skip_next</i>
        <div class="col ml-auto rounded-circle border border-primary p-1">
          <img id="thumbnail" class="img-fluid rounded-circle" src="https://lorempixel.com/400/400/cats/1" alt="">
        </div>
      </div>
      <div class="p-0 m-0" id="now-playing">
        <p class="font-italic mb-0">Now Playing: </p>
        <p class="lead" id="title"></p>
      </div>
      <div class="progress-bar progress col-12 mb-3">
      </div>
    </div>
    <ul class="playlist list-group list-group-flush">
      <li audio_url="https://archive.org/download/TabbyCatPurr/Purring.ogg"
      img_url="https://lorempixel.com/400/400/cats/1"
      class="active list-group-item playlist-item">
      Duis aute irure</li>
      <li audio_url="https://archive.org/download/Purring_/AnxiousPurringmp3.ogg"
      class="list-group-item playlist-item"
      img_url="https://lorempixel.com/400/400/cats/4">
      Dapibus ac facilisis in</li>
      <li audio_url="https://archive.org/download/Anxious_Purring/AnxiousPurringmp3.ogg"
      class="list-group-item playlist-item"
      img_url="https://lorempixel.com/400/400/cats/3">
      Vestibulum at eros</li>
    </ul>
  </div>
  <audio id="audio-player" class="d-none" src="" type="audio/mp3" controls="controls"></audio>
</section>

---

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