JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.jsdelivr.net/mediaelement/2.15.1/mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/mediaelement/2.15.1/mediaelementplayer.min.css">
<a class="audio-player" href="http://mediaelementjs.com/media/AirReview-Landmarks-02-ChasingCorporate.mp3">This mp3 is cool</a>

<br />
<a class="audio-player" href="http://mediaelementjs.com/media/AirReview-Landmarks-02-ChasingCorporate.mp3">This is another mp3</a>

JavaScript

jQuery(document).ready(function ($) {
    var audioDiv = document.getElementsByClassName("audio-player");
    $(audioDiv).each(function (index) {
        if ($(this).className != 'mediaplayer-processed') {
            var playlist = $(this).attr('href');
            playlist = playlist.replace("%20", " ");
            sourceType = playlist.split('.').pop().toLowerCase();
            console.log(sourceType);
            if (sourceType == 'mp3') {
                sourceType = 'mpeg';
            }
            audioTag = '<audio class="audio-player">'
            audioTag = audioTag + '<source type="audio/' + sourceType + '" src="' + playlist + '" />';
            audioTag = audioTag + '</audio>';
            // $(this).outerHTML = audioTag;
            this.outerHTML = audioTag;
            config_me = {
                enableAutosize: true,
                features: ['playpause', 'volume'],
                alwaysShowControls: true,
            };
            //config_me.videoHeight = 30;
            //config_me.videoWidth = 60;
            config_me.audioWidth = 120;
            config_me.audioHeight = 30;
            config_me.loop = false;
        }
    }); // each
    $(".audio-player").addClass('mediaplayer-processed').mediaelementplayer(config_me);
}); // ready