Android5上的HTML5音频自动播放 - iframe技巧

我使用iframe中的音频标签在Android中自动播放，以避免禁止在移动设备中进行自动播放。有2件作品，一件工作得很好，另一件不工作。我会在下面写两个例子。Android5上的HTML5音频自动播放 - iframe技巧

CASE 1好工作案例

我有这样的主HTML文件形式，

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

而且，具有播放音频

一个iframe

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

在播放文件，我使用JavaScript这样，

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

来调用播放文件的javascript，我用在主HTML文件的代码

$(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 to wait until ajax finishes 
      success: function(data) { 
       //** get data from runner as var result **// 
       iframeWindow.postMessage(result, '*'); 
      } 
     }); 
    }); 
});

注意#subSen是输入类型按钮

当我点击按钮或发送回车键，它会发送消息到播放文件阿贾克斯成功内（含iframeWindow.postMessage（））和音频效果很好两个浏览器在PC和Android版Chrome。

setTimeout(function() { 
    $("input").keypress(function(event) { 
     if(event.which == 13) { 
      event.preventDefault(); 
      $("#subSen").click(); 
     } 
    }); 
}, 0);

井工作情况============ ============结束

但问题是在这里

CASE 2不工作案例

我使用语音识别在我的项目，所以在主文件，我用这样的代码，

（此代码是在同一$（函数（）{}）从上面）

$(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) { 
      for (var i = event.resultIndex; i < 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(); 
});

我预计按钮单击事件（$（ '＃subSen'）。点击（））将调用消息到iframe中，就像当我在键盘上按Enter键时一样。当然，它在PC上运行良好，但不能在Android中播放任何声音。

（*请注意，语音识别和内部阿贾克斯亚军很好的工作在PC上和Android）

数据传递以及在Android，但声音是不是在玩。在这种情况下是否有任何方法可以自动播放音频？

最后一点，Android上的问题，当我第一次进入页面出现。如果我在使用SR之前播放带有音频标签的声音，那么从此开始效果会很好。

来源

2015-07-21 Roxy Eris

我检查了$。对（）函数必须被用来从IFRAME调用音频...

，并没有在Android版Firefox的工作。

来源

2015-08-03 05:49:30

Android5上的HTML5音频自动播放 - iframe技巧

回答

相关问题