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
Post a Comment