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

我不精通js或jquery，目前我的网站上有播放列表和html5音频文件。现在，当用户离开页面时，如果正在播放音频，它将继续播放。没有办法关掉它。我有它，所以键盘控制是打开的，但如果用户进入一个网络表单，音频将打开和关闭，每次你点击空格键。无论如何，这是我的播放列表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>

var hap_玩家；
jQuery（document）.on（'turbolinks:load'，function（）{
变量设置={
instanceName:“artwork5”，
源路径：“”，
活动播放列表：“”，
activeItem:0，
体积:0.5,，
自动播放：错误，
预加载：“自动”，
随机播放：错误，
罗平贡：没错，
mediaEndAction：“下一步”，
soundCloudAppId:“”，
gDriveAppId:“”，
是的，
播放方向：“垂直”，
播放主题：“黑暗2”，
使用键盘导航播放：false，
facebookAppId:“644413448983338”，
useNumbersInPlaylist:true，
可排序轨迹：false，
播放项目内容：“标题”
};
hap#u player=$（“#hap wrapper”）.hap（设置）；
$（'.hap播放列表切换'）。打开（'单击'，函数（）{
var playerHolder=$（'.hap玩家持有者'），
ease='easeInOutCubic'，
时间=500，
openValue=$（“#hap包装”）.width（）-50；
如果（！hap_player.playly已打开）{
playerHolder.stop（）.设置动画({
“左”：openValue+“px”
}, {
持续时间：时间，
放松：放松，
完成：函数（）{
playerHolder.addClass（'hap-player-holder-opened'）；
}
});
}否则{
css（'left'，playerHolder.css（'left'））.removeClass（'hap-player-holder-opened'）.stop（）.animate({
“左”：0+“px”
}, {
持续时间：时间，
放松：放松
});
}
hap_player.playlipopened=！hap_player.playlipopened；
})
});

我不理解这段代码，但你应该从事件中思考。例如，有一个名为onfocusout的事件，在该事件中，您可以执行一个函数，在焦点不在某个位置时停止声音，或者执行onkeyup来检测哪个键被击中，以执行您想要的内容。您为播放器使用的库是什么？此外，如果您能给我们一个JSFIDLE和工作代码，将帮助我们帮助您；-）这是我从codecanyon买的html5 jquery播放器。作者说尝试监听onunload和onbeforeunload事件，但我不知道如何实现这些事情。我必须使用的特定播放列表中包含了大约7个不同的js文件。我不知道在那样的条件下我怎么做一把js小提琴。