HTML5/jQuery: Adjust audio volume on iPad

Question

I've got a problem with adjusting the audio volume on an iPad.

I coded a simple example that works in all browsers (that supports HTML5 audio) but not on the iPad (I've got an iPad 4 with the newest iOS (7.0.4)).

You can find the example here: http://amplifon.netinvasion.ch

On this site you will find three squares that make a short sound if you click/touch on it. At the right side is a slider to adjust the volume.

Answer 1

It seems presently, and unfortunately, that Apple simply doesn't allow developers to change the volume setting of HTML5 <audio> elements in iOS:

https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html#//apple_ref/doc/uid/TP40009523-CH5-SW10

Volume Control in JavaScript

On the desktop, you can set and read the volume property of an <audio> or <video> element. This allows you to set the element's audio volume relative to the computer's current volume setting. A value of 1 plays sound at the normal level. A value of 0 silences the audio. Values between 0 and 1 attenuate the audio.

On iOS devices, the audio level is always under the user's physical control. The volume property is not settable in JavaScript. Reading the volume property always returns 1 .

Answer 2

You can use the Web Audio API like this:

elMusic = $('#music')
audioContext = new AudioContextClass()  
gainNode = audioContext.createGain()
gainNode.gain.value = 1 
audioContext.createMediaElementSource(elMusic).connect(gainNode).connect(audioContext.destination)
elMusic.play()

And change the volume at any time by setting:

gainNode.gain.value = <your value from 0..1>

Answer 3

Here's a simple jQuery, HTML, CSS code for a volume adjustment, you can also add to the CSS to style it more if you'd like to.

jQuery UI

<script src="js/jquery-1.7.2.min.js"></script>  
<script src="js/jquery-ui-1.8.21.custom.min.js"></script>  


HTML
    <section>   
     <span class="tooltip"></span>   
     <div id="slider"></div>  
     <span class="volume"></span>  
     </section>   

Volume adjustment

    $(function() {  

    var slider = $('#slider'),  
        tooltip = $('.tooltip');  

    tooltip.hide();  

    slider.slider({  
        range: "min",  
        min: 1,  
        value: 35,  

        start: function(event,ui) {  
          tooltip.fadeIn('fast');  
        },  

        slide: function(event, ui) {  

            var value = slider.slider('value'),  
                volume = $('.volume');  

            tooltip.css('left', value).text(ui.value);  

            if(value <= 5) {   
                volume.css('background-position', '0 0');  
            }   
            else if (value <= 25) {  
                volume.css('background-position', '0 -25px');  
            }   
            else if (value <= 75) {  
                volume.css('background-position', '0 -50px');  
            }   
            else {  
                volume.css('background-position', '0 -75px');  
            };  

        },  

        stop: function(event,ui) {  
          tooltip.fadeOut('fast');  
        },  
        });  

    });   


 CSS
   .ui-slider-handle {  
    position: absolute;  
    z-index: 2;  
    width: 25px;  
    height: 25px;  
    cursor: pointer;  
    background: url('../images/handle.png') no-repeat 50% 50%;  
    font-weight: bold;  
    color: #1C94C4;  
    outline: none;  
    top: -7px;  
    margin-left: -12px;  
    }