Wednesday, March 31st, 2010

From Whisper to Shout; A new form of volume control

Category: Fun, Showcase, Sound

<p>David Friedman calls is “silly”, but he has created something simple and fun in his new form of volume control that moves from whisper to shout as you change the volume.

whispershout

The code (which works on Firefox and Opera right now) uses different tracks for each level:

  1. <audio id="apA" autobuffer="true" onTimeUpdate="update();">
  2.     <source src="ogg/Volume1.ogg" type="audio/ogg; codecs=vorbis">
  3. </source></audio>
  4. <audio id="apB" autobuffer="true">
  5.     <source src="ogg/Volume2.ogg" type="audio/ogg; codecs=vorbis">
  6. </source></audio>
  7. <audio id="apC" autobuffer="true">
  8.     <source src="ogg/Volume3.ogg" type="audio/ogg; codecs=vorbis">
  9. </source></audio>
  10. <audio id="apD" autobuffer="true">
  11.     <source src="ogg/Volume4.ogg" type="audio/ogg; codecs=vorbis">
  12. </source></audio>
  13. <audio id="apE" autobuffer="true">
  14.     <source src="ogg/Volume5.ogg" type="audio/ogg; codecs=vorbis">
  15. </source></audio>

And it keeps track of the timing so it can seamlessly play with code such as:

javascript
< view plain text >
  1. this.apA.addEventListener("timeupdate", timeUpdate, true);
  2.  
  3. function timeUpdate() {
  4.     //get the duration of the player
  5.     dur = audio_player.duration;
  6.     time = audio_player.currentTime;
  7.     fraction = time/dur;
  8.     percent = (fraction*100);
  9.     wrapper = document.getElementById("duration_background");
  10.     new_width = wrapper.offsetWidth*fraction;
  11.     document.getElementById("duration_bar").style.width=new_width+"px";
  12. }

Posted by Dion Almaer at 9:03 pm
3 Comments

++++-
4 rating from 8 votes

3 Comments »

Comments feed TrackBack URI

That was SO funny …!! :D

Comment by ThomasHansen — March 31, 2010

hahah that was pretty funny =D

Comment by bfred — April 1, 2010

LMAO that was hilarious. I love it! :-D

Comment by iliad — April 1, 2010

Leave a comment

You must be logged in to post a comment.