javascript - 从 Bootstrap Modal 中删除 MediaElement.js

Question

在页面上，我有一个带有多个数据属性、标题和audioURL 的按钮。单击一下，我就有了一些 javascript，可以使用标题填充模态窗口，以及使用 src 属性中的 data-audioURL 的简单 html5 音频播放器。完成后，我将初始化 MediaElement。成功后，我会播放音频。

当用户关闭模式窗口时，我想删除 MediaElement，以便具有不同标题和 audioURL 的另一个按钮可以填充音频播放器，然后重新初始化 MediaElement。目前，我的代码成功停止了音频播放，但它不会破坏播放器。

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;
        }
    });
}

我知道我在 hide.bs.modal 函数中缺少一些内容来正确删除播放器，我只是不知道是什么。提前致谢。

Answer 1

将 var me 移出 document.ready 并使用 instance 初始化 success 函数内的变量，请参阅下面的工作示例

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>