Removing MediaElement.js from Bootstrap Modal

On the page I have a button with several data attributes, title and audioURL. One click, I have some javascript that populates a modal window with the title, and simple html5 audio player with the data-audioURL in the src attribute. Once that is complete, I initialize MediaElement. On success, I play the audio.

When the user closes the modal window, I want to remove the MediaElement so that another button with a different title and audioURL can populate the audio player and then reinitialize MediaElement. Currently, the code I have succeeds to stop the audio playback, but it doesn't destroy the player.

HTML:

<button type="button" class="btn btn-info btn-lg btn-block" data-toggle="modal" data-target="#closerLook" data-title="Song Title" data-audio="audio.mp3"><i class="fa fa-headphones" aria-hidden="true"></i> Hear a Sample</button>

<div class="modal fade" id="closerLook" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title text-center">Audio Modal</h4>
      </div>
      <div class="modal-body">
        <h3 id="cl-title" class="text-center"></h3>
        <audio id="audioSample" preload="meta" tabindex="0" controls><source src=""/></audio>
      </div>
    </div>
</div>

JS:

$(document).ready(function(){

    var me;

    $('#closerLook').on('shown.bs.modal', function (event) {
        $('#audioSample').attr("src", "");
        var button = $(event.relatedTarget);
        var theTitle = button.data('title');
        var theAudio = button.data('audio');
        var modal = $(this);
        modal.find('#cl-title').text(theTitle);
        $('#audioSample').attr("src", theAudio);
        loadPlayer();
    });


    $('#closerLook').on('hide.bs.modal', function (event) {
        console.log(me);
        me.remove();
    });
});

function loadPlayer() {

    $('#audioSample').mediaelementplayer({
        audioWidth: '100%',

        success: function(mediaElement, originalNode, instance) {
            mediaElement.play();
            me = mediaElement;
        }
    });
}

I know I'm missing something in the hide.bs.modal function to properly remove the player, I just don't know what. Thanks in advance.

move var me out of document.ready and initialize the variable inside the success function with instance see the working example below

var me;
$(document).ready(function() {

  $('#closerLook').on('shown.bs.modal', function(event) {
    let button = $(event.relatedTarget);
    let theTitle = button.data('title');
    let theAudio = button.data('audio');
    let modal = $(this);
    modal.find('#cl-title').text(theTitle);
    //setSrc (src)
    $('#audioSample').attr("src", theAudio);
    loadPlayer();
  });


  $('#closerLook').on('hide.bs.modal', function(event) {
    console.log('removing');
    //me.pause();
    me.remove()
  });
});

function loadPlayer() {
  $('#audioSample').mediaelementplayer({
    audioWidth: '100%',
    error:function(mediaElement, originalNode, instance) {
    console.log('error');
    },
    success: function(mediaElement, originalNode, instance) {
      console.log('success');
      console.log(mediaElement)
      instance.play();
      me = instance;
    }
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.7/mediaelementplayer.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.7/mediaelement-and-player.min.js"></script>

<button type="button" class="btn btn-info btn-lg btn-block" data-toggle="modal" data-target="#closerLook" data-title="SoundHelix" data-audio="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"><i class="fa fa-headphones" aria-hidden="true"></i> Hear a Sample</button>

<div class="modal fade" id="closerLook" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title text-center">Audio Modal</h4>
      </div>
      <div class="modal-body">
        <h3 id="cl-title" class="text-center"></h3>
        <audio id="audioSample" preload="meta" tabindex="0" controls><source src=""/></audio>
      </div>
    </div>
  </div>