javascript - 从Bootstrap Modal移除MediaElement.js

在页面上，我有一个带有几个数据属性(标题和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函数中缺少某些内容，无法正确删除播放器，我只是不知道什么。提前致谢。

最佳答案

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

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>

关于javascript - 从Bootstrap Modal移除MediaElement.js，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47932649/