当用户退出页面时，jQuery HTML5音频停止

Question

我不精通js或jquery，目前我的网站上有播放列表和html5音频文件。现在，当用户离开页面时，如果正在播放音频，它将继续播放。无法关闭它。我这样做是为了使键盘控件处于打开状态，但是如果用户进入Web窗体，则每次您按下空格键时，音频都会打开和关闭。无论如何，这是我的播放列表JavaScript。在那之后我被困住了。我也在Rails 5中使用了它。

<script type="text/javascript">
  var hap_player;
  jQuery(document).on('turbolinks:load', function() {
    var settings = {
      instanceName: "artwork5",
      sourcePath: "",
      activePlaylist: "",
      activeItem: 0,
      volume: 0.5,
      autoPlay: false,
      preload: "auto",
      randomPlay: false,
      loopingOn: true,
      mediaEndAction: "next",
      soundCloudAppId: "",
      gDriveAppId: "",
      usePlaylistScroll: true,
      playlistScrollOrientation: "vertical",
      playlistScrollTheme: "dark-2",
      useKeyboardNavigationForPlayback: false,
      facebookAppId: "644413448983338",
      useNumbersInPlaylist: true,
      sortableTracks: false,
      playlistItemContent: "title"
    };

    hap_player = $("#hap-wrapper").hap(settings);

    $('.hap-playlist-toggle').on('click', function() {
      var playerHolder = $('.hap-player-holder'),
        ease = 'easeInOutCubic',
        time = 500,
        openValue = $("#hap-wrapper").width() - 50;

      if (!hap_player.playlistOpened) {
        playerHolder.stop().animate({
          'left': openValue + 'px'
        }, {
          duration: time,
          easing: ease,
          complete: function() {
            playerHolder.addClass('hap-player-holder-opened');
          }
        });
      } else {
        playerHolder.css('left', playerHolder.css('left')).removeClass('hap-player-holder-opened').stop().animate({
          'left': 0 + 'px'
        }, {
          duration: time,
          easing: ease
        });
      }
      hap_player.playlistOpened = !hap_player.playlistOpened;
    })
  });
</script>