X-Git-Url: http://id.pley.net/sound.git/blobdiff_plain/c707e22cb6a232014f55f2f33bb4d201319ecf9b..refs/remotes/origin/master:/sound.html diff --git a/sound.html b/sound.html index b1ae6dd..af92487 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,61 @@ audio.addEventListener('timeupdate', eventLogger); audio.addEventListener('volumechange', eventLogger); audio.addEventListener('waiting', eventLogger); + audio.addEventListener('timeupdate', updateTime); + audio.addEventListener('durationchange', eventLogger); + audio.addEventListener('durationchange', updateDuration); + audio.addEventListener('ratechange', eventLogger); + audio.addEventListener('ratechange', updateRate); + } + + 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'); + var currentTime = audio.currentTime; + time.innerText = formatTime(currentTime); + + var timeline = document.getElementById('timeline'); + timeline.value = currentTime; + } + + function updateDuration() { + var duration = document.getElementById('duration'); + duration.innerText = formatTime(audio.duration); + + var timeline = document.getElementById('timeline'); + timeline.max = audio.duration; + } + + function updateRate() { + var rate = document.getElementById('rate'); + rate.value = audio.playbackRate; } -
+ +
+
+ - + --:-- + + --:-- + +