X-Git-Url: http://id.pley.net/sound.git/blobdiff_plain/c707e22cb6a232014f55f2f33bb4d201319ecf9b..cdba2888fe934336681d265c296e61bff2ca5342:/sound.html diff --git a/sound.html b/sound.html index b1ae6dd..3982cee 100644 --- a/sound.html +++ b/sound.html @@ -29,10 +29,13 @@ audio.autoplay = false; audio.src = 'Coin.wav'; audio.preload = 'auto'; + audio.addEventListener('canplaythrough', eventLogger); audio.addEventListener('emptied', eventLogger); audio.addEventListener('ended', eventLogger); + audio.addEventListener('ended', updateTime); audio.addEventListener('loadstart', eventLogger); audio.addEventListener('pause', eventLogger); + audio.addEventListener('pause', updateTime); audio.addEventListener('play', eventLogger); audio.addEventListener('playing', eventLogger); audio.addEventListener('progress', eventLogger); @@ -40,18 +43,52 @@ audio.addEventListener('timeupdate', eventLogger); audio.addEventListener('volumechange', eventLogger); audio.addEventListener('waiting', eventLogger); + audio.addEventListener('timeupdate', updateTime); + audio.addEventListener('durationchange', eventLogger); + audio.addEventListener('durationchange', updateDuration); + } + + function formatTime(time) { + var seconds = (time % 60).toFixed(0); + var minutes = (time / 60).toFixed(0); + return ("0" + minutes).substr(-2, 2) + ':' + ("0" + seconds).substr(-2, 2); + } + + function updateTime() { + var time = document.getElementById('time'); + time.innerText = formatTime(audio.currentTime); + + var timeline = document.getElementById('timeline'); + timeline.value = audio.currentTime; + } + + function updateDuration() { + var duration = document.getElementById('duration'); + duration.innerText = formatTime(audio.duration); + + var timeline = document.getElementById('timeline'); + timeline.max = audio.duration; }
-