Audio file

IndianaGuy · 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.

justsomeguy · 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.

IndianaGuy · December 10, 2016

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

Ingolme · 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.

IndianaGuy · 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.

Ingolme · 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.

IndianaGuy · December 11, 2016

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

IndianaGuy · December 12, 2016

I think I am figuring it out.

onseeking only returns TRUE or FALSE results. Is that correct?

Ingolme · 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)

Sign In

Audio file

Recommended Posts

IndianaGuy

Link to comment

Share on other sites

justsomeguy

Link to comment

Share on other sites

IndianaGuy

Link to comment

Share on other sites

Ingolme

Link to comment

Share on other sites

IndianaGuy

Link to comment

Share on other sites

Ingolme

Link to comment

Share on other sites

IndianaGuy

Link to comment

Share on other sites

IndianaGuy

Link to comment

Share on other sites

Ingolme

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity