Link to home
Start Free TrialLog in
Avatar of coder
coderFlag for Australia

asked on

Start autoplay for audio when the page loads on ipad pro

Hi Experts,

      I have standalone web application which is running only an Ipad.  It is supposed to only run on this ipad.  I want to enable autoplay audio for this ipad pro.  Please help me in resolving this issue.  In ipad I had tried chrome://flags/#autoplay-policy it is not found.  I had tried to enable autoplay through javascript but it didn't help.  I dont want auto play on all browser just on only one ipad.  I came to know from the previous questions it is not possible to make it on all browsers.  But I just want autoplay to be on one ipad

 $(function() {		  
		  $("a.active").find("h1").hide();
		  var adio;
		  adio = document.createElement('audio');
		  adio.src = "audio/Stolen - Audio - Marjorie Foster.mp3";
		  /*adio.pause;
		  adio.currentTime = 0;*/
		  adio.play();
		  adio.autoplay;
		  $("a.active div div").addClass("blinker");
		  
		  $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {			    
			$("a.active").find("h1").hide();
			$("a:not(.active)").find("h1").show();
			switchAudio();
			$("a.active div div").addClass("blinker");
		  })
    
		  function switchAudio()
		  {
			var num = $("a.active").find("h1").text();
			stopAudio();      
			switch(num) {
			  case "1":				
				adio.src = "audio/Stolen - Audio - Marjorie Foster.mp3";				
				break;
			  case "2":				
				adio.src = "audio/Stolen - Audio - Barbara Raymond.mp3";				
				break;
			  case "3":				
				adio.src = "audio/Stolen - Audio - Charlie King.mp3";				
				break;
			  case "4":				
				adio.src = "audio/Stolen - Audio - Kathy Mills.mp3";				
				break;
			}
			adio.play();
		  }  
		  

		  function stopAudio(){
			console.log("stop audio");
			adio.pause;
			adio.currentTime = 0;			
			$("a.active").find("h1").hide();
			$("a:not(.active)").find("h1").show();
			$("a div div").removeClass("blinker");
		  }
  
		  adio.onended = function() {
			$("a.active div div").removeClass("blinker");        
		  }
		  
		  $("a.active").find("h1").hide();	
		  $("#1").trigger("click");		  
	});	

Open in new window


<div id="tabs">	
<ul class="nav nav-pills" role="tablist">
    <li class="nav-item">	    
        <a class="nav-link active tab-head" data-toggle="tab" href="#1" id="1" role="tab">
		<div class="detail-content" style="color:rgb(255,255,255);width:130px;text-align:center">
		    <div class="number">
			      <h1 style="text-align:center;margin-bottom:25px">1</h1>
			</div>
			07:48</br>
			Marjorie Foster
		</div>
		</a>
		
    </li>
    <li class="nav-item">
        <a class="nav-link tab-head" data-toggle="tab" href="#2" role="tab">
		<div class="detail-content" style="color:rgb(255,255,255);width:130px;text-align:center">
		    <div class="number">
			      <h1 style="text-align:center;margin-bottom:25px">2</h1>
			</div>
			04:53</br>
			Barbara Raymond
		</div>		
		</a>
    </li>
    <li class="nav-item">
        <a class="nav-link tab-head" data-toggle="tab" href="#3" role="tab">
		<div class="detail-content" style="color:rgb(255,255,255);width:130px;text-align:center">
		    <div  class="number">
			      <h1 style="text-align:center;margin-bottom:25px">3</h1>
			</div>
			05:38</br>
			Charlie King
		</div>		
		</a>
    </li>
    <li class="nav-item">
        <a class="nav-link tab-head" data-toggle="tab" href="#4" role="tab">
		<div class="detail-content" style="color:rgb(255,255,255);width:130px;text-align:center">
		    <div  class="number">
			      <h1 style="text-align:center;margin-bottom:25px">4</h1>
			</div>
			05:22</br>
			Kathy Mills
		</div>		
		</a>
    </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
    <div class="tab-pane active tab-data" id="1" role="tabpanel"><p>Marjorie Foster was a child on her mother's hip when she was taken away from the Daly River and placed in the Kahlin Compound. At Kahlin her name was changed, she was assigned a number and she received limited education before being sent out to work as a domestic servant.</br></br>

Centenary of Kahlin Compound, by Miranda Tetlow</br>
Reproduced by permission of the Australian Broadcasting Corporation © 2013 ABC Radio</br>
</p></div>
	
    <div class="tab-pane tab-data" id="2" role="tabpanel"><p>Barbara Raymond grew up in the Kahlin Compound. She tells of the enormous contribution that workers from Kahlin made to the development of Darwin.</br></br>

Centenary of Kahlin Compound, by Miranda Tetlow</br>
Reproduced by permission of the Australian Broadcasting Corporation © 2013 ABC Radio</br>
 </p></div>
	
    <div class="tab-pane tab-data" id="3" role="tabpanel"><p>Charlie King is a well-known radio broadcaster, football commentator and an anti-domestic violence campaigner. Charlie tells his mother’s story about her removal from Limbunya Station to the Kahlin Compound.</br></br>

Centenary of Kahlin Compound, by Miranda Tetlow</br>
Reproduced by permission of the Australian Broadcasting Corporation © 2013 ABC Radio</br>
 </p></div>
	
    <div class="tab-pane tab-data" id="4" role="tabpanel"><p>Kathy Mills is a Kungarakan/Gurindji Elder, community activist and recipient of many awards including the Centenary Medal. Her mother was removed from Wave Hill Station and brought into the Kahlin Compound. Kathy has been a tireless advocate for having the history of Kahlin Compound properly recognised.</br></br>

Centenary of Kahlin Compound, by Miranda Tetlow</br>
Reproduced by permission of the Australian Broadcasting Corporation © 2013 ABC Radio</br>
</p></div>	
</div>

Open in new window


Please help me in resolving this issue.

with many thanks,

Bharath AK
ASKER CERTIFIED SOLUTION
Avatar of coder
coder
Flag of Australia image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of coder

ASKER

I have to test this thoroughly to confirm this.

With Many thanks,
Bharath AK