Wednesday, March 31st, 2010
From Whisper to Shout; A new form of volume control
Category: Fun, Showcase
, Sound
The code (which works on Firefox and Opera right now) uses different tracks for each level:
HTML:
-
-
<audio id="apA" autobuffer="true" onTimeUpdate="update();">
-
<source src="ogg/Volume1.ogg" type="audio/ogg; codecs=vorbis">
-
</source></audio>
-
<audio id="apB" autobuffer="true">
-
<source src="ogg/Volume2.ogg" type="audio/ogg; codecs=vorbis">
-
</source></audio>
-
<audio id="apC" autobuffer="true">
-
<source src="ogg/Volume3.ogg" type="audio/ogg; codecs=vorbis">
-
</source></audio>
-
<audio id="apD" autobuffer="true">
-
<source src="ogg/Volume4.ogg" type="audio/ogg; codecs=vorbis">
-
</source></audio>
-
<audio id="apE" autobuffer="true">
-
<source src="ogg/Volume5.ogg" type="audio/ogg; codecs=vorbis">
-
</source></audio>
-
And it keeps track of the timing so it can seamlessly play with code such as:
JAVASCRIPT:
-
-
this.apA.addEventListener("timeupdate", timeUpdate, true);
-
-
function timeUpdate() {
-
//get the duration of the player
-
dur = audio_player.duration;
-
time = audio_player.currentTime;
-
fraction = time/dur;
-
percent = (fraction*100);
-
wrapper = document.getElementById("duration_background");
-
new_width = wrapper.offsetWidth*fraction;
-
document.getElementById("duration_bar").style.width=new_width+"px";
-
}
-
Related Content:
4.3 rating from 6 votes
That was SO funny …!! :D
hahah that was pretty funny =D
LMAO that was hilarious. I love it! :-D