JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/howler/1.1.17/howler.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<button type="button" class="btn btn-default sound"> 
    <i class="fa fa-play"></i>
    <span>Playlist</span>
</button>

CSS

.playing {color:green;}

JavaScript

var playlist = function(e) {
        // initialisation:
          pCount = 0;
          playlistUrls = [
            "https://upload.wikimedia.org/wikipedia/commons/8/8a/Zh-Beijing.ogg",
            "https://upload.wikimedia.org/wikipedia/commons/7/73/Zh-Shanghai.ogg",
            "./audio/a.mp3", // doesn't exist
            "./audio/b.mp3", // doesn't exist
            "./audio/c.mp3", // doesn't exist
            "./audio/d.mp3"  // doesn't exist
            ], // audio list
          howlerBank = [],
          loop = true;
    
        // playing i+1 audio (= chaining audio files)
        var onEnd = function(e) {
          if (loop === true ) { pCount = (pCount + 1 !== howlerBank.length)? pCount + 1 : 0; }
          else { pCount = pCount + 1; }
          howlerBank[pCount].play();
        };
    
        // build up howlerBank:     
        playlistUrls.forEach(function(current, i) {   
          howlerBank.push(new Howl({ urls: [playlistUrls[i]], onend: onEnd, buffer: true }))
        });
    
        // initiate the whole :
            howlerBank[0].play();
    }

$(document).ready(function() {
    $(".sound").click(function(){ 
        playlist();
    });
 });