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

回答

相關問題