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>
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()
})
})
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.
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.
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
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.
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.
IE11 and Chrome still add 2 Seconds to the timestamp.
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:
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.
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).