IndianaGuy Posted December 9, 2016 Share Posted December 9, 2016 I have been reading a ton of stuff online today trying to wrap my mind around a solution. Any advice would be awesome. Thank you I have a simple page with either an audio or a video file. I am trying to create a page that will generate a .txt file. The name of the .txt file is the name of meida file played example- myMedia.wav will have a myMedia.txt file. The file will have the time range the user played. example of what the file will have $ThisUser played 00:00:00->00:00:17| 00:01:30->00:04:27| etc meaning the user played the media file from Zero seconds to 17 seconds, then jumped to 1 minute 30 seconds and played till 4 minutes 27 seconds. I would appreciate any guidance. Thank you <script> window.onload = function(){ var myAudio = document.getElementById(' "<? echo $Exposure; ?>" '); myAudio.addEventListener('played', function() { for (i = 0; i < myAudio.played.length; i++) { var startX = myAudio.played.start(i) * inc; var endX = myAudio.played.end(i) * inc; var width = endX - startX; } } } </script> <body> <audio id="<? echo $Exposure; ?>" controls> //still need code to fix this from "myfile.wav" to just "myfile" <source src="<? echo $Exposure; ?>" type="audio/mpeg"> </audio> </body> I know this is really wrong. It's only a gathering of some of the research I have done. Link to comment Share on other sites More sharing options...
justsomeguy Posted December 9, 2016 Share Posted December 9, 2016 First, that getElementById isn't going to find the element. When you pull that page up view the HTML source and look at what got printed for that line. Also, you can make things easier on yourself by formatting your code correctly. Use consistent indenting and things like that, many code editors will even format your code for you. Link to comment Share on other sites More sharing options...
IndianaGuy Posted December 10, 2016 Author Share Posted December 10, 2016 (edited) This is what I call progress. I appreciate the help so far. Any advice on where to learn about what happens when a user clicks play/pause etc? <audio id="exposure" controls> <source src="<? echo $Exposure; ?>" type="audio/mpeg" align="middle"> Your browser does not support the audio element. </audio><br> <h3>TESTING:</h3> Action will record to-<p id="logfile"></p> <script> var FileName = "<?echo $Exposure ;?>"; var LogTo = FileName.replace(/.m4a|.mp3|.wav/,".txt") document.getElementById("exposure").innerHTML = FileName; document.getElementById("logfile").innerHTML = LogTo; </script> Edited December 10, 2016 by IndianaGuy Link to comment Share on other sites More sharing options...
Ingolme Posted December 10, 2016 Share Posted December 10, 2016 Here's a list of events that happen on the audio and video elements: https://developer.mozilla.org/en/docs/Web/Guide/Events/Media_events There's a playing event that should fire once the user has clicked the play button. There's also a pause event. Link to comment Share on other sites More sharing options...
IndianaGuy Posted December 10, 2016 Author Share Posted December 10, 2016 Awesome link. Thank you so much. The browser compatibility is really bad :-). Is that possible or does the link have outdated information? Thank you. Link to comment Share on other sites More sharing options...
Ingolme Posted December 11, 2016 Share Posted December 11, 2016 While there are question makes on "Basic suppport" I'm certain that the events are supported on all browsers that support the <audio> element. Link to comment Share on other sites More sharing options...
IndianaGuy Posted December 11, 2016 Author Share Posted December 11, 2016 (edited) WOW! I am really having fun with this lol. Why are both my outputs giving me the same result in eventB and EventC? <audio id="exposure" controls onseeking="myseeking()" onseeked="myseeked()" onplay ="myplay()"> <source src="<? echo $Exposure; ?>" type="audio/mpeg" align="middle"> Your browser does not support the audio element. </audio> <br> <h3>TESTING:</h3> Action will record to-<p id="logfile"></p> <p id = "eventA"></p> <p id = "eventB"></p> <p id = "eventC"</p> <script> var FileName = "<?echo $Exposure ;?>"; var LogTo = FileName.replace(/.m4a|.mp3|.wav/,".txt") var Expo = document.getElementById("exposure"); document.getElementById("exposure").innerHTML = FileName; document.getElementById("logfile").innerHTML = LogTo; // Showing the user did hit play. function myplay(){ document.getElementById("eventA").innerHTML = "The user hit Play"; }; //It worked function myseeking(){ var Expo = document.getElementById("exposure"); document.getElementById("eventB").innerHTML = "The user STARTED seeking at " + Expo.currentTime; }; function myseeked(){ var Expo = document.getElementById("exposure"); document.getElementById("eventC").innerHTML = "The user STOPED seeking at " + Expo.currentTime; }; Edited December 11, 2016 by IndianaGuy Link to comment Share on other sites More sharing options...
IndianaGuy Posted December 12, 2016 Author Share Posted December 12, 2016 I think I am figuring it out. onseeking only returns TRUE or FALSE results. Is that correct? Link to comment Share on other sites More sharing options...
Ingolme Posted December 12, 2016 Share Posted December 12, 2016 You should check to see what properties are available in the event object. You should be assigning event handlers in Javascript and not in the HTML. (If you don't know how to do that then look up addEventListener) Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now