Как посчитать, сколько раз проигрывался HTMLAudio? - PullRequest
Новая
       10

Как посчитать, сколько раз проигрывался HTMLAudio?

0 голосов
/ 04 мая 2019

Я пытаюсь подсчитать, сколько раз воспроизводился объект HTML5 Audio (audioPlayer), добавив событие 'ended' и используя свойство played, которое возвращает объект Timesrange.Тем не менее, этот подход работает только
нормально до 1-го полного прослушивания, т.е. когда он заканчивается, я получаю Timesrange объект со всеми частичными прослушиваниями.Для дальнейших прослушиваний он просто «забывает» первое прослушивание.

Вот мой код 

const audioPlayer = document.getElementById('soundPlayer');
audioPlayer.addEventListener(
    'ended',
    function() {
      const timesPlayed = audioPlayer.played;
      let totalTimePlayed = 0;
      for (let i = 0; i < timesPlayed.length; i += 1) {
        totalTimePlayed += timesPlayed.end(i) - timesPlayed.start(i);
      }
      const ratioPlayed = totalTimePlayed / audioPlayer.duration;
    },
    true
  );

Второй вопрос: как вызвать событие ended, если пользователь покидаетстраницу во время воспроизведения аудио (т.е. без окончания)?(Этот эксперимент представляет собой многостраничный «опрос» веб-приложения с аудиоэлементом HTML5 на каждой странице, который пользователь слушает, а затем, нажав кнопку, переходит на следующую страницу.

Я пытаюсь использоватьonbeforeunload, но я не могу вызвать событие «конец». 

function preventNavigatingAway() {
  window.onbeforeunload = function() {
    $('#soundPlayer').trigger('ended');
  };
}

Дополнительный комментарий: я не уверен, что порядок, для которого я вызываю события, правильный, поэтому здесьмой полный код: 

function initAudio(audioPlayer) {

  audioPlayer.addEventListener(
    'ended',
    function() {
      const ratioPlayedInput = $("input:text[name='input-ratioPlayed']").val() || '0';
      let ratioPlayed = parseFloat(ratioPlayedInput);
      let timesPlayed = $("input:text[name='input-timesPlayed']").val();
      timesPlayed = parseInt(timesPlayed, 10) || 0;
      const currTimesPlayed = audioPlayer.played;
      let totalTimePlayed = 0;
      for (let i = 0; i < currTimesPlayed.length; i += 1) {
        totalTimePlayed += currTimesPlayed.end(i) - currTimesPlayed.start(i);
      }
      ratioPlayed += totalTimePlayed / audioPlayer.duration;
      ratioPlayed = parseFloat(ratioPlayed.toFixed(2));
      timesPlayed += currTimesPlayed.length;

      $("input:text[name='input-ratioPlayed']").val(ratioPlayed);
      $("input:text[name='input-timesPlayed']").val(timesPlayed);
    },
    true
  );
  return true;
}

function preventNavigatingAway() {
  console.log('preventNavigatingAway');
  window.onbeforeunload = function() {
    $('#soundPlayer').trigger('ended');
    console.log('in window.beforeunload()');
  };
}

document.addEventListener('DOMContentLoaded', function() {
  console.log('DOMContentLoaded!');
  const audioPlayer = document.getElementById('soundPlayer');
  initAudio(audioPlayer);
  preventNavigatingAway();
});
...