Multiple clickable audio-timestamps

Hello Sitepoint-Community!

I need a code-template for a user-friendly audio-controls-solution: I want to use clickable timestamps (buttons) to increase the accessibility of long mp3-files (interviews for qualitative social-research purposes).

Which changes are necessary to make the example below work?

best regards
Manuel.

<!DOCTYPE html>
<html>
<body>

<audio id="myAudio" controls>
  <source src="https://ia801309.us.archive.org/5/items/eubanks_elizabeth_01/eubanks_elizabeth_01.mp3" type="audio/mpeg">
</audio>

<p></p>
<button onclick="getCurTime()" type="button">Get current time position</button><br>
<button onclick="setCurTime()" type="button">Set time position to 5 seconds</button><br> 
<button onclick="setCurTime()" type="button">Set time position to 03:30 minutes</button><br>
<button onclick="setCurTime()" type="button">Set time position to 11:05 minutes</button><br>

<script>
var aud = document.getElementById("myAudio");

function getCurTime() { 
    alert(aud.currentTime);
} 

function setCurTime() { 
    aud.currentTime=5;
} 

var y = document.getElementById("myAudio");

function getCurTime() { 
    alert(y.currentTime);
} 

function setCurTime() { 
    y.currentTime=210;
} 

var x = document.getElementById("myAudio");

function getCurTime() { 
    alert(x.currentTime);
} 

function setCurTime() { 
    x.currentTime=665;
} 
</script>

</body>
</html>

Hi there manuel9,

and a warm welcome to these forums. :winky:

Perhaps this may help…

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

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

<title>untitled document</title>

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

<style media="screen">
body {
    background-color: #f0f0f0;
    font: 1em/150% verdana, arial, helvetica, sans-serif;
    text-align: center;
 }
#container {
    display: inline-block;
    width: 98%;
    max-width: 20em;
    padding: 1em;
    border: 0.062em solid #999;
    border-radius: 0.5em;
    box-sizing: border-box;
    background-color: #fff;
    box-shadow: 0.4em  0.4em  0.4em #999;
 }
#myAudio, #buttons button {
    width: 96%;
    margin: 0.25em;
 }
</style>

</head>
<body>

 <div id="container">

  <audio id="myAudio" controls>
   <source src="https://ia801309.us.archive.org/5/items/eubanks_elizabeth_01/eubanks_elizabeth_01.mp3" type="audio/mpeg">
  </audio>

  <div id="buttons">
   <button>Set time position to 0 seconds</button>
   <button>Set time position to 5 seconds</button>
   <button>Set time position to 03:30 minutes</button>
   <button>Set time position to 11:05 minutes</button>
  </div>

 </div>

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

   var set = [ 0, 5, 210, 665 ];
   var aud = d.getElementById('myAudio');
   var but = d.getElementById('buttons').getElementsByTagName('button');

   for ( var c = 0; c < but.length; c ++ ) {
      but[c].addEventListener('click',setCurTime(c), false);
      } 
     
 function setCurTime(c) {  
   but[c].onclick = function() { 
      aud.currentTime = set[c];
      aud.play();      
         }
      }
 }(document));
</script>

</body>
</html>

coothead

2 Likes

WOOOW!! I’m blown away.

- your solution works perfectly and it comes with such an elegant design.

All problems solved!

I have no programming experience - but I will try to use your code and create by reverse engineering a similar video solution. Thank you very much!!

Hi there manuel9,

note that you can add as many buttons as you like. :winky:

Just add the required “currentTime” value to the "set" array,
in the appropriate position of course!!!

coothead

1 Like

I would actually suggest not to hard-code those timestamps in the JS at all – whenever you add another button (or change the target position), you’ll have to adjust the JS as well, which is hard to maintain. Instead, you can directly associate the timestamps with the buttons as data-* attributes; this way, you don’t even have to worry about the order of some array elements:

<div id="buttons">
   <button data-timestamp="0">Set time position to 0 seconds</button>
   <button data-timestamp="5">Set time position to 5 seconds</button>
   <button data-timestamp="210">Set time position to 03:30 minutes</button>
   <button data-timestamp="665">Set time position to 11:05 minutes</button>
</div>
var audio = document.getElementById('myAudio')
var buttons = document.querySelectorAll('#buttons button')

Array.from(buttons).forEach(function (button) {
  button.addEventListener('click', function () {
    audio.currentTime = button.dataset.timestamp
    audio.play()
  })
})
2 Likes

It works perfectly!! Thank you VERY much!

Top solutions - top community here.
:wink:

p.s.: it works perfectly with chrome and firefox – but there is a problem with IE - it does not work in IE 11!
:hushed:

Dear Coothead!

Your code is now online here: http://0999.at/a/test1.html

The communication between audio-player and buttons works perfectly, but there is a problem with the browsers. The audio-file starts in dependence of the browser from different points of the audio-file. If I press e.g. the button 03:30 in firefox the player shows 3:30 - the same in IE11 - the start point should be the same, but de facto it isn’t: When you listen to the file you hear, that the content isn’t identical in different browsers.

best regards manuel9.

Dear m3g4p0p!

Your code is now online here: http://0999.at/a/test2.html

The communication between audio-player and buttons works perfectly, but there is a problem with the browsers. The audio-file starts in dependence of the browser from different points of the audio-file. If I press the button 03:30 in firefox the player shows 3:30 - the same in IE11 - the start point should be the same, but de facto it isn’t. When you listen to the file you hear, that the content isn’t identical in different browsers.

best regards, manuel9

I also found another similar solution. Same Problem. Every Browser starts from a different point within the audio-file, even if it shows every time the correct time-stamp.

Any Idea how I make time-stamps working correctly in all actual browsers?
you find this example here: test4.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>test4</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
    <h2>Sound Information</h2>
    <div id="length">Duration:</div>
    <div id="source">Source:</div>
    <div id="status" style="color:red;">Status: Loading</div>
    <hr>
    <h2>Control Buttons</h2>
    <button id="play">Play</button>
    <button id="pause">Pause</button>
    <button id="restart">Restart</button>
	<button id= "1200" onclick="setCurTime(1200)" type="button">Set time position to 20:00 minutes</button><br>
    <hr>
    <h2>Playing Information</h2>
    <div id="currentTime">0</div>
	
<script>
$(document).ready(function() {
    var audioElement = document.createElement('audio');
    audioElement.setAttribute('src', './interview27_3.mp3');
    
    audioElement.addEventListener('ended', function() {
        this.play();
    }, false);
    
    audioElement.addEventListener("canplay",function(){
        $("#length").text("Duration:" + audioElement.duration + " seconds");
        $("#source").text("Source:" + audioElement.src);
        $("#status").text("Status: Ready to play").css("color","green");
    });
    
    audioElement.addEventListener("timeupdate",function(){
        $("#currentTime").text("Current second:" + audioElement.currentTime);
    });
    
    $('#play').click(function() {
        audioElement.play();
        $("#status").text("Status: Playing");
    });
    
    $('#pause').click(function() {
        audioElement.pause();
        $("#status").text("Status: Paused");
    });
    
    $('#restart').click(function() {
        audioElement.currentTime = 0;
    });
	
	$('#1200').click(function() {
        audioElement.currentTime = 1200;
    });
});
</script>
	
</body>
</html>

Hi there manuel9,

yes, I do notice the different time aspects. :wonky:

Firefox appears to be on time, Google lags by
10s and IE11 by about 30s.

I added the “preload” attribute to the code but
it did not seem to make any difference.

So I changed your “src” file for one of mine and,
guess what, it worked OK in all the browsers. :winky:

You can see my test here…

http://coothead.co.uk/player-test.html

! would suggest that you also experiment with
other files, as it may be that yours is corrupt in
some way or another. :wonky:

coothead

2 Likes

I see!

I already tried to delete the metadata of the mp3 with Windows Explorer, because I thought this might cause a different length calculation within different browsers, but this had no effect.

So thank you - once again - VERY MUCH coothead.
You saved my weekend! best regards manuel9.

Hi there manuel9,

So have you tried using a different mp3 file?

coothead

No, I didn’t
But I was curious and converted “my” audio-file to .WAV and then back to .MP3 with a lower bitrate. Two times I deactivated all possible metadata. Now is this file online instead of the original .MP3 which had a size of 40MB.

The time discrepancies became smaller, but did not disapear.

IE11 and Chrome still add some seconds. I just want to understand the phenomenon, and which aspects of the file trigger it.

I’m interested in longer Audio-Files (interviews), and your example was 08:06min. Of course I’ll test with several other files and let you know when it’s done. THANK YOU.

best regards
manuel9

p.s. I converted the file now 2 times and eliminated metadata. little time-deviation still existing.

So … but now I did. I took a audio-file from a completely different source with 38:47min. And checked the timestamp at 24:02min.

Problem is still existent!
http://0999.at/a/tex.html

IE11 and Chrome still add 2 Seconds to the timestamp. :confounded:
This will make social-scientists work not really easier. I have to understand the factors that cause this, to give a reference how to sample the data to delete this side-effect of whatever.

this is a nice tool to check how browsers “calculate” the length of a audio-file; just open http://0999.at/a/test4.html in different browsers:

It would be interesting to include the filesize of the file too. I found something at fiddler: http://jsfiddle.net/derickbailey/s4P2v/ but it uses a “input”-field. But I would need a “url” or “source” variante.

It would be great to combine the “length”-calculation and the “filesize”-feature on one site. would be a simple analyzing tool for audio-files.

So where is a nutkracker for this challenge? of course I tried it, but I got my first javascript-book yesterday. And I still coudn’t solve it.

here comes finally the code for the length-calculation of audio-files:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>test4</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
    <h2>Sound Information</h2>
    <div id="length">Duration:</div>
    <div id="source">Source:</div>
    <div id="status" style="color:red;">Status: Loading</div>
    <hr>
    <h2>Control Buttons</h2>
    <button id="play">Play</button>
    <button id="pause">Pause</button>
    <button id="restart">Restart</button>
	<button id= "1200" onclick="setCurTime(1200)" type="button">Set time position to 20:00 minutes</button><br>
    <hr>
    <h2>Playing Information</h2>
    <div id="currentTime">0</div>
	
<script>
$(document).ready(function() {
    var audioElement = document.createElement('audio');
    audioElement.setAttribute('src', './tex.mp3');
    
    audioElement.addEventListener('ended', function() {
        this.play();
    }, false);
    
    audioElement.addEventListener("canplay",function(){
        $("#length").text("Duration:" + audioElement.duration + " seconds");
        $("#source").text("Source:" + audioElement.src);
        $("#status").text("Status: Ready to play").css("color","green");
    });
    
    audioElement.addEventListener("timeupdate",function(){
        $("#currentTime").text("Current second:" + audioElement.currentTime);
    });
    
    $('#play').click(function() {
        audioElement.play();
        $("#status").text("Status: Playing");
    });
    
    $('#pause').click(function() {
        audioElement.pause();
        $("#status").text("Status: Paused");
    });
    
    $('#restart').click(function() {
        audioElement.currentTime = 0;
    });
	
	$('#1200').click(function() {
        audioElement.currentTime = 1200;
    });
});
</script>
	
</body>
</html>

The script shows, that the file (tex.mp3) is calculated in IE11 and Chrome 4 Seconds longer than in firefox. And this makes it impossible the work with time-stamps really hard. I would like to see if the browsers calculate the file-size different too. This would be part of the solution.

best regards
Manuel.

Hi coothead!

I now recorded a .mp3-file (ca. 50min) and took care to delete the metadata of the .mp3. Then I made a check of the file-length in 3 browsers:

mp3 original-Length: 3035.48sek

in IE11: 3035.51275sek
in chrome: 3035.51275sek
in firefox: 3049.7435sek

then I added the “preload” to the code as you suggested
and the performance-problem disappeared!! (even if the calculated length is still different).

it works perfectly now: http://0999.at/a/tex.html

This was a very helpful learning expierience for me. I’ll use the code to semi-structure interviews later. best regards
Manuel9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.