¿Cómo se puede detectar si se ha escuchado una etiqueta de audio HTML5 durante al menos x segundos?

Question

Me gustaría iniciar sesión cuando los usuarios escuchan un elemento de audio durante más de 5 segundos. ¿Cómo puedo detectar esto con HTML5?

Answer 1

Manejaría el evento de reproducción, y luego usaría una pista de llamada setTimeout cuando terminen. Algo como esto (pseudocódigo):

var timeHandler = null; 

// if they stop listening, don't give them the alert 
    myAudioElement.addEventListener('stop', function() { 
    if (timeHandler) clearTimeout(timeHandle); 
    }); 

// when they start to play, set an event to pop up 5 seconds later 
    myAudioElement.addEventListener('play', function() { 
     timeHandler = setTimeout(5000,function() { 
      // here I would make some kind of ajax call to log the event 
      alert("it's been 5 seconds!"); 
     }); 

Como siempre, esto podría ponerse mucho más complejo dependiendo de sus necesidades. También puede usar el evento ontimeupdate para rastrear dónde se encuentra sentado el cursor de reproducción. Para una referencia sobre los eventos de audio HTML5, echa un vistazo a esta página:

https://developer.mozilla.org/en/DOM/Media_events

Buena suerte!