Syntax problems

[IndianaGuy]

I couldn't find my original post so I made this one. Sorry.

Why is this not working? Thank you

function myplaying(){
var Expo = document.getElementById("exposure");
var L = Expo.played.length; 
document.getElementById("t").innerHTML = L; 
Expo.addEventListener(played, function() {
      for (i = 0; i < L; i++) {
      var S = Expo.played.start;
      var E = Expo.played.end;
document.getElementById("s").innerHTML = S;
document.getElementById("e").innerHTML = E;      
      };
   };
};

Edited December 13, 2016 by IndianaGuy

[Ingolme]

You're passing an undefined variable "played" to addEventListener. I'm not sure if you are calling myplaying () anywhere in your code. Each time you call it you will be adding another copy of the event listener.

[IndianaGuy]

What do you mean "undefined" played" to addEventListener"? It is a part of the HTML video/audio properties. Here is my entire code to be safe. I have been fighting with this for two days and almost 16 hours total (no joke). please help :-)

<audio id="exposure" controls preload="auto"  onplaying="myplaying()">
<source src="<? echo $Exposure; ?>" type="audio/mpeg" align="middle">
Your browser does not support the audio element.
</audio>
<br>
Total<p id="t"></p>
Most recent start time<p id="s"></p>
Most recent finish time<p id="e"></p>

<script>
function myplaying(){
var Expo = document.getElementById("exposure");
var L = Expo.played.length; 
document.getElementById("t").innerHTML = L; 
Expo.addEventListener(Expo.played, function() {
      for (i = 0; i < L; i++) {
      var S = Expo.played.start;
      var E = Expo.played.end;
document.getElementById("s").innerHTML = S;
document.getElementById("e").innerHTML = E;      
      };
   };
};
</script>

Edited December 13, 2016 by IndianaGuy

[justsomeguy]

According to the spec for the audio element (actually the media element, which the audio element extends):

 

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement

 

The played property is a TimeRanges object. When you get the length property of that, you're getting the number of ranges in the TimeRanges list (the number of different time ranges where they played the item). It doesn't make sense to pass a TimeRanges object to addEventListener. That should be the type of event as a string, so you probably want to use the string "played" instead of a TimeRanges object or other variable.

 

Also, note that start and end in the TimeRanges object are methods, not properties. If you try to print that in an element it's going to print something like "function" or "native code" or something like that. You have to call the start and end methods and give them the index of the time range that you're looking for:

 

https://developer.mozilla.org/en-US/docs/Web/API/TimeRanges/start

[IndianaGuy]

I am very thankful for your advice. Looks like you gave me lots of great tip. However, they all sound Chinese to me. I am way too new to understand what you said :-(

 

All I want is a list of

Start time xx:xx TO end time xx:xx for the parts of the media they played. I never in my wildest dreams thought I would spend almost 20 hours now trying to figure it out.

[justsomeguy]

var Expo = document.getElementById("exposure");

for (var i = 0; i < Expo.played.length; i++) {

  console.log('Range ' + i + ' starts at ' + Expo.played.start(i) + ' and ends at ' + Expo.played.end(i));

}

That will print everything to your browser's developer console.

[IndianaGuy]

OOOOH my god! you are so awesome. I am about to get emotional lol.

Any particular place I need to put this code? and what will cause it to be called or ran if that's the proper lingo?

 

Thank you so very much

[IndianaGuy]

This is what I am using and the console log has nothing in it! unless I am going to the wrong place?

 

function myPlay(){
var Expo = document.getElementById("exposure");
for (var i = 0; i < Expo.played.length; i++) {
console.log("Range " + i + " starts at " + Expo.played.start(i) + " and ends at " + Expo.played.end(i));
}
}

Edited December 14, 2016 by IndianaGuy

[justsomeguy]

Just make sure that function gets called after the timerange list would have something in it. You could add a button to the page for example to run that function and have it print that stuff whenever you press the button. You could add some more console.log statements at the top of the function to just print the fact that it's running for verification.