CODEWITHSUNDEEP
jqueryhtmlipadhtml5-audio
Phoebus Ryan
Phoebus Ryan

Reputation: 21

HTML5/jQuery: Adjust audio volume on iPad

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.

Upvotes: 2

Views: 3220

Answers (3)

Jonathan
Jonathan

Reputation: 1419

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>

Upvotes: 1

user3038276
user3038276

Reputation:

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;  
    }

Upvotes: -1

5260452
5260452

Reputation: 11600

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.

Upvotes: 2

Related Questions