Demo Firefox-Fortschrittsleisten-Problem
@Selfhtml Forum (http://forum.de.selfhtml.org/?t=218927&m=1509606)
Länge des Tracks = 4:18
Lasst man den Track durchlaufen ohne die Fortschrittsleiste zu benutzen verläuft alles normal.
Startet man den Track und klickt auf irgendeinen Bereich der Fortschrittsleiste und lässt den Track dann durchlaufen wird am Ende des Tracks eine Zeit von deutlich über der der Tracklänge (4:18) angezeigt.
HTML
<body>
<audio controls id="audio" src="https://storage-new.newjamendo.com/download/track/965189/Ronny_Matthes__Gemafreie_Musik_-_Weihnachtsmusik__-_Pavane__Gabriel_Faure_-_1845_-_1924_.mp3"></audio><br>
<div id="info">Bei 39 Sekunden wirst du dein blaues Wunder erleben.</div>
<div>Duration: <div id="duration"></div></div>
<div>CurrentTime: <div id="currentTime">0.00</div></div>
<div>Fail-Time: <div id="failTime">0.00</div></div>
</body>
CSS
#currentTime, #duration, #failTime {
width: 100px;
height: 20px;
text-align: center;
}
#currentTime {
background-color: rgba(0, 255, 0, 0.6);
}
#duration {
background-color: rgba(0, 0, 255, 0.6);
}
#info {
width: 200px;
background-color: rgba(255, 255, 0, 0.6);
float: right;
margin-top: 50px;
margin-right: 30px;
}
#failTime {
background-color: rgba(255, 0, 0, 0.6);
}
JavaScript
document.getElementById('audio').addEventListener('timeupdate', function() {
document.getElementById('currentTime').innerHTML = this.currentTime;
if (this.currentTime >= duration)
{
alert('ended\ncurrentTime = '+this.currentTime+'\nduration = '+duration);
this.ended = true;
this.pause();
}
else document.getElementById('failTime').innerHTML = this.currentTime;
});
setTimeout(function() {
duration = document.getElementById('audio').duration;
document.getElementById('duration').innerHTML = duration;
}, 1);