CODEWITHSUNDEEP
jqueryioshtmlaudiocontrols
Garavani
Garavani

Reputation: 785

control sound with audio tag html5 and JQuery on ipad

I am quite desperate here. On my site I am using music in html5 audio tags as following:

<!--Music-->
    <audio id = "music_background" class="display_none"> 
        <source src="music/piece.mp3"/>
        <source src="music/piece.ogg"/> 
        HTML5 audio not supported
    </audio>

On desktop this is working fine together with some control functions as an example (on $(document).ready…):

var musicBackground = $("#music_background").get(0);
musicBackground.play();
musicBackground.volume = 0.50;

Now I know that the automatic start of sound on IPad is not possible so I had to create an invisible sound start button as:

if ( ( navigator.userAgent.match(/iPhone/i) ) || ( navigator.userAgent.match(/iPad/i) ) ) {

    $("body").append('<a id="init"></a>')
             .on( 'touchstart', function() {
                 soundInit();
             } );

    function soundInit() {
        var musicBackground = $("#music_background").get(0);
        musicBackground.play();
        musicBackground.volume = 0.50;
        $("#init").fadeOut(0);
    }
};

So far this worked (even it wasn’t sadly possible to trigger the button on document.ready as I hoped). This is just annoying enough but I discovered that also all my other functions such as:

function musicBackgroundFadeOut() {
var vol = 0.50;
var interval = 200; // 200ms interval
var musicBackground = $("#music_background").get(0);

var fadeout = setInterval(
  function() {
    // Reduce volume by 0.05 as long as it is above 0
    // This works as long as you start with a multiple of 0.05!
    if ( vol > 0.05 ) {  // if 0 „DOM Exception 1: Index or size was negative, or greater than the allowed value“
      vol -= 0.05;
      musicBackground.volume = vol;
    }
    else {
      // Stop the setInterval when 0 is reached
      clearInterval( fadeout );
    }
  }, interval );
}

do not work any longer even if the are triggered by a 'touch start' event like:

$("#someElement").on( 'touchstart', function(e) {
        e.preventDefault();         
        musicBackgroundFadeOut();           
    } );

Is there a specific known reason for this (non)behavior on Ipad? I can’t get ahead of this. Google didn’t help me, too :-( Thanks in advance!

Upvotes: 0

Views: 1579

Answers (2)

Garavani
Garavani

Reputation: 785

After new searches in the net I found this:

The volume property is not settable in JavaScript. Reading the volume property always returns 1.

here: https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html

Perhaps this is the reason. Hopefully this can help someone else.

Upvotes: 0

Channy
Channy

Reputation: 184

Unfortunetely the autoplay option does not work on Apple iOS mobile devices (iPhone, iPad, iPod) because Apple specifically prohibits it. Basically, iOS devices requires actual user interaction (physical touch) to start play Audio / Video Players.

Controls are always supplied during fullscreen playback on iPhone and iPod touch, and the placeholder allows the user to initiate fullscreen playback. On the desktop or iPad, you must either include the controls attribute or provide playback controls using JavaScript. It is especially important to provide user controls on iPad because autoplay is disabled to prevent unsolicited cellular download.

In Safari on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, preload and autoplay are disabled. No data is loaded until the user initiates it. This means the JavaScript play() and load() methods are also inactive until the user initiates playback, unless the play() or load() method is triggered by user action. In other words, a user-initiated Play button works, but an onLoad=”play()” event does not.

iOS-Specific Considerations

Upvotes: 1

Related Questions