javascript - HTML5 Audio autoplay on Android - iframe trick -

i'm using audio tag iframe play automatically in android avoid disallowing autoplay in mobile devices. there 2 works, 1 working , other not working. i'll write 2 cases below.

case 1. working case

i have form in main html file,

<form id='form' name='form' method='post'> <input type='text' id='data' name='data'></input> <input type='button' id='subsen' value='submit'></input><br/> </form> 

and, have iframe plays audio

<iframe src="./play.jsp" width='30' height='10'></iframe> 

in play file, i'm using javascript this,

  var audio;// = document.getelementbyid('tts');   $(document).ready(function() {     window.addeventlistener('message', function(event) {         audio = $('#tts')         .attr('src', 'src');         audio[0].load();         audio[0].play();         console.log('play');     }, false);   }); 

to invoke javascript in play file, i'm using code in main html file

$(function() {     iframewindow = $('iframe')[0].contentwindow;     $('#subsen').on('click', function() {         var params = $('#form').serialize();         $.ajax({             url: './runner.jsp',             data: params,             name: name,             async: false,   // disable asynchronous wait until ajax finishes             success: function(data) {                 //** data runner var result **//                 iframewindow.postmessage(result, '*');             }         });     }); }); 

note #subsen input typed button

when click button or send enter key, sends message play file inside ajax success (with iframewindow.postmessage()) , audio works on both chrome on pc , chrome on android.

settimeout(function() {     $("input").keypress(function(event) {         if(event.which == 13) {             event.preventdefault();             $("#subsen").click();         }     }); }, 0); 

============ end of working case ============

but problem here

case 2. not working case

i'm using speech recognition in project, in main file, used code this,

(this code in same $(function() {}) above)

$(function() {     iframewindow = $('iframe')[0].contentwindow;     issr = window.speechrecognition || window.webkitspeechrecognition || null;     if(issr == null) {         alert("speech recognition not supported");     }     else {         sr = new issr();          sr.lang = 'en';         sr.onresult = function(event) {             (var = event.resultindex; < event.results.length; i++) {                 //console.log(i+' '+event.results[i][0].transcript);                 var data = event.results[i][0].transcript;                 $('#data').val(data);                 $('#area').append('you('+name+'): '+$('#data').val(data)+'\n');                 $("#subsen").click();             }         }          sr.onend = function(event) {             console.log('onend');             sr.start();         }     }     sr.start(); }); 

i expected button click event ($('#subsen').click()) invoke message iframe when pushes enter key on keyboard. of course works in pc, not playing sound in android.

(*please note speech recognition , runner inside ajax working on both pc , android)

data passed on android, sound not playing. there way play audio automatically in case?

• final note, problem on android occurs when first page. if play sound audio tag before using sr, works then.

i checked $.on() function must used invoke audio iframe...

and not work on firefox android.