javascript - Universal volume control for whole website? -


my website has several audio players on 1 page. these audio players depend on html5 <audio> element, sites there flash / <object> fallback. thinking include volume controls each player, thought can use 1 universal volume control of them (as there can 1 player playing @ time) tried researching topic, not find useful information. therefore decided ask community, there way to, no matter if <audio> or flash fallback, control volume of whole website? maybe jquery solution, html5 magic? or needs done in order work?

players based on plugin: http://kolber.github.io/audiojs/docs/

edit: similar sound cloud, have volume control in header, controls players.

if you're looking way simplify audio implementation suggest taking @ soundmanager2 abstracts away dealing browsers don't support html5 audio (and/or specific audio codecs). api works same whether it's using native audio or flash fallback.

then have create global audio reference hold onto whatever audio playing:

var myaudio,     myvolume = 100,     $volume = $('#volume');  $volume.slider({   value: myvolume,   min: 0,   max: 100,   step: 0.1,   slide: function(e, ui){     if (myaudio) myaudio.setvolume(ui.value);   },   stop: function(e, ui){     myvolume = ui.value;   } });  // every time wan play new sound myaudio = soundmanager.createsound({   url: '/path/to/song.mp3'   volume: $volume.slider('value') }); 

and every time user clicks play piece of audio, assign new sound object myaudio.


Comments

Popular posts from this blog

SPSS keyboard combination alters encoding -

Add new record to the table by click on the button in Microsoft Access -

CSS3 Transition to highlight new elements created in JQuery -