audio timing

Forum Moderators: open

Message Too Old, No Replies

audio timing

find time elapsed

ctoz

10:09 am on Nov 1, 2016 (gmt 0)

Hi, I'm looking to trigger a function when the listener gets to a certain point in playing a song.

Simply setting a setTimeout from onplay doesn't take account of the listener pausing, or replaying the song before getting to the point in question.
Is there a way with js or jQuery? pointers very welcome.

birdbrain

12:54 am on Nov 2, 2016 (gmt 0)

Hi there ctoz ,

here is a possible solution...


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Stop Audio at specified point</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
  background-color: #f0f0f0;
  font: 1em/150% verdana,arial,helvtica,sans-serif;
 }
#audio-container {
  max-width: 30em;
  padding: 2.5em;
  margin: 2em auto;
  border: 0.06em solid #999;
  border-radius: 1em;
  box-shadow: inset 0 0 2em #999;
  box-sizing: border-box;
  background-color: #fff;
 }
#audio-container audio {
  display: block;
  width: 100%;
 }
</style>

</head>
<body>
<div id="audio-container">
  <audio id="player" controls preload>
    <source src="http://coothead.co.uk/audio/Leadbelly-GoodnightIrene.mp3" type="audio/mpeg">
  </audio>
</div>

<script>
(function() {
  'use strict';
  var se;
  var stoppoint=29; /* the audio stops here in this value plus 1 seconds */
  var temp=stoppoint;
  var delay=1000;
  var p=document.getElementById('player');
  p.addEventListener('play',playIt,false);
  p.addEventListener('pause',pauseIt,false);
  p.addEventListener('ended',playItAgain,false);
function playIt(){
  if(p.currentTime>stoppoint){
   clearTimeout(se);
  if(stoppoint<p.duration-1) {
   p.pause();
   alert('This is for testing purposes only.\n\n'+
      'Any code that is required will go here.');
  }

   stoppoint=p.duration;
   return;
  }
  var se=setTimeout(playIt,delay);
  }

function pauseIt(){
   clearTimeout(se);
   return;
 }
function playItAgain(){
   stoppoint=temp;
   p.load();
 }
}());
</script>

</body>
</html>

birdbrain

ctoz

2:42 am on Nov 2, 2016 (gmt 0)

Many thanks! and for the modern css. Couple of queries:

What does 'use strict' do?

I'll have a play, see if I can get the hang of it. However, I may not have made this clear: not intending to stop at a specified point, only to launch another function.

If the listener has the patience to play the song through to, say, 30 seconds from the end--or has skipped to or past this point--a link to the next song in the sequence is displayed.

The page has links to five songs at any one time. The idea is to retain an element of suspense, rather than giving the listener/viewer the full five to choose from at the outset... eg in a waltz sequence: "Wreck on the Highway" >> "Amazing Grace" ...etc.

Cheers.

birdbrain

10:33 am on Nov 2, 2016 (gmt 0)

Hi there ctoz,

What does 'use strict' do?

'use strict' mode [developer.mozilla.org]

This amended code will work 30 seconds or less before the end of the audio...


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Stop Audio at specified point</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
  background-color: #f0f0f0;
  font: 1em/150% verdana,arial,helvtica,sans-serif;
 }
#audio-container {
  max-width: 30em;
  padding: 2.5em;
  margin: 2em auto;
  border: 0.06em solid #999;
  border-radius: 1em;
  box-shadow: inset 0 0 2em #999;
  box-sizing: border-box;
  background-color: #fff;
 }
#audio-container audio {
  display: block;
  width: 100%;
 }
</style>

</head>
<body>

<div id="audio-container">
  <audio id="player" controls preload>
    <source src="http://coothead.co.uk/audio/Leadbelly-GoodnightIrene.mp3" type="audio/mpeg">
  </audio>
</div>

<script>
(function() {
  'use strict';

  var p=document.getElementById('player');
  var beforeend=30; /* adjust value to suit */
  var stoppoint;
  var temp;
  var se;
  var delay=1000;
  var test=true;

function init() {
  stoppoint=p.duration-beforeend; 
  temp=stoppoint;
 }

  p.addEventListener('play',playIt,false);
  p.addEventListener('pause',pauseIt,false);
  p.addEventListener('ended',playItAgain,false);

function playIt(){
  if(p.currentTime>stoppoint){
   clearTimeout(se);
  if(test===true) {
   test=false;
   alert('This is for testing purposes only.\n\n'+
      'Any code that is required will go here.');
  }
   stoppoint=p.duration;
   return;
  }
  var se=setTimeout(playIt,delay);
  }

function pauseIt(){
   clearTimeout(se);
   return;
 }

function playItAgain(){
   stoppoint=temp;
   test=true;
   p.load();
 }
  setTimeout(init,delay);
}());
</script>

</body>
</html>

birdbrain

ctoz

10:52 pm on Nov 2, 2016 (gmt 0)

Most grateful. Will send link to result... cheers!

birdbrain

11:03 pm on Nov 2, 2016 (gmt 0)

No problem, you're very welcome. ;)

birdbrain

audio timing

find time elapsed

ctoz

birdbrain

ctoz

birdbrain

ctoz

birdbrain

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week