X-Git-Url: http://105106.c2e0p.group/sound.git/blobdiff_plain/c707e22cb6a232014f55f2f33bb4d201319ecf9b..2acf7355303ecf1cb8c61823ee72bc60c8c01284:/sound.html?ds=sidebyside diff --git a/sound.html b/sound.html index b1ae6dd..d5185e4 100644 --- a/sound.html +++ b/sound.html @@ -29,6 +29,7 @@ audio.autoplay = false; audio.src = 'Coin.wav'; audio.preload = 'auto'; + audio.addEventListener('canplaythrough', eventLogger); audio.addEventListener('emptied', eventLogger); audio.addEventListener('ended', eventLogger); audio.addEventListener('loadstart', eventLogger); @@ -40,17 +41,43 @@ 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); + } + + function updateDuration() { + var duration = document.getElementById('duration'); + duration.innerText = formatTime(audio.duration); } </script> </head> <body onload="onload()"> - + <div> + <select onchange="audio.src = event.target.value"> + <option value="Coin.wav">Coin.wav</option> + <option value="Overworld.mp3">Overworld.mp3</option> + </select> + </div> <div> <button onclick="audio.play()">play</button> <button onclick="audio.pause()">pause</button> <button onclick="audio.muted = !audio.muted">mute</button> - <input type="range" min="0" max="1" step="0.01" onchange="audio.volume = event.target.value" /> + <span id="time">--:--</span> + <input type="range" min="0" max="1" step="0.01" value="1" onchange="audio.volume = event.target.value" /> + <span id="duration">--:--</span> <button onclick="audio.loop = !audio.loop">loop</button> </div>