Question

我正在使用iframe中的音频标签在Android中自动播放，以避免在移动设备中禁止自动播放。有2件作品，一件效果很好，另一件不合作。我将在下面写下两个案例。

案例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是一个输入类型按钮

当我点击按钮或发送回车键时，它会在ajax成功（使用iframeWindow.postMessage（））内向播放文件发送消息，并且音频在PC上的Chrome和Android上的Chrome上都能正常运行。

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

============结束工作的情况============

但问题在这里

案例2.非工作案例

我在我的项目中使用语音识别，因此在主文件中，我使用了这样的代码，

（此代码与上面相同的$（function（）{}）

$(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'）。click（））会将消息调用到iframe，就像我在键盘上按Enter键一样。当然它在PC上运行良好，但在Android中没有播放任何声音。

（*请注意，语音识别和ajax中的跑步者在PC和Android上都能很好地工作）

数据在Android上传得很好，但声音没有播放。在这种情况下，有没有办法自动播放音频？

最后的注意事项，当我第一次进入页面时，会出现Android问题。如果我在使用SR之前使用音频标签播放任何声音，那么从那时起它就可以正常工作。

Answer 1

我检查过必须使用$ .on（）函数来调用iframe中的音频...

并且它不适用于FireFox for Android。

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

1 个答案: