JQuery HTML5 аудио останавливается, когда пользователь покидает страницу - PullRequest
Новая
       6

JQuery HTML5 аудио останавливается, когда пользователь покидает страницу

0 голосов
/ 03 июля 2018

Я не разбираюсь в 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>
...