Javascript 在安卓系统中，HTML5音频标签甚至在音频播放之前被触发

我已经根据音频为突出显示文本编写了代码。在这种情况下，逻辑是当音频开始播放时，我们启动高亮显示功能。在给定的时间内突出显示每个单词

它在Windows PC和台式机上运行良好。但在android中，突出显示功能在音频启动前触发，这就是为什么音频和突出显示不同步的原因

下面是代码

function highlight(start,totalWords,aid) {  

            var wtime =   data[start]/defaultPlayback;
            $("#W"+start).css("color",'yellow'); 
            setTimeout(function (){    
            $("#W"+start).css("color",'');     
            start++;
            if (start <= totalWords) {highlight(start,totalWords,aid);}
            else{return false;}       
            }, wtime);    


        }

<audio  preload='auto' controls id='a2' onplaying="highlight(10,18,'bookread4');"  onended="completed('a3')" >

  <source src="http://arbordalepublishing.com/eBooks2/Animalogy/Animalogy p7.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>



<span id="W10" class="calibre2">Chick </span>
<span id="W11" class="calibre2">is </span>
<span id="W12" class="calibre2">to </span>
<span id="W13" class="calibre2">feathery,</span>
<span id="W14" class="calibre2">as </span>
<span id="W15" class="calibre2">bear </span>
<span id="W16" class="calibre2">is </span>
<span id="W17" class="calibre2">to </span>
<span id="W18" class="calibre2">furry.</span>

函数突出显示（开始、totalWords、aid）{
var wtime=data[start]/defaultPlayback；
$（“#W”+start）.css（“颜色”，“黄色”）；
setTimeout（函数（）{
$（“#W”+start）.css（“颜色”，“开始”）；
启动++；
如果（启动而不是使用计时器/计数器驱动文本，您无法保证计时器/计数器会同步，则应使用音频元素的
currentTime
属性。这将强制在启动时使用正确的时间

该属性以小数秒为单位返回当前绝对时间。使用此时间检查要突出显示的单词的时间范围

例如（由于原始数据不可用，因此此处仅为任意时间）：

然后突出显示：

function highlight() {

    var time = a2.currentTime,
        i = 0, word;

    for(; word = words[i++];) {
        if (time >= word.start && time <= word.end)
          if (!word.highlighted) {
            word.highlighted = true; // to reduce the need to update DOM
            // ... set CSS for highlighted here...
          }
        }
        else if (word.highlighted) {
            // ... set CSS for not highlighted here...
            word.highlighted = false;
        }
    }
}


您的浏览器不支持音频元素。


小鸡
是
到
羽毛的，
作为
熊
是
到
毛茸茸的。
您没有定义函数突出显示的第一行中显示的数据…同时函数已完成…请编辑您的代码谢谢亲爱的Ken Fyrstenberg，这工作非常好。我将在android上检查它。我认为它现在可以工作了。亲爱的Ken Fyrstenberg，我已经在Windows-7桌面上播放了您的演示代码。它工作得非常好。但当我在android选项卡中播放时，我看到了非常奇怪的结果：-1.在chrome=>中播放，但只突出显示第一个单词，我认为这是因为没有在其中获取音频的当前时间。2.在Mozila=>中，您的演示音频没有通过单击它来播放。3.在opera=>中，您的演示不可见。@Krishnandan实际结果取决于支持情况不幸的是，在浏览器中。例如，Opera Mini不支持音频元素。还要检查事件回调链整体是否正确（我的演示仅关注将单词与时间同步）。可以有前缀事件名称等。还可以查看以下内容：（有关详细信息，请单击浏览器名称旁边的红色星号）。查看是否可以在控制台中记录不同的步骤和可能的错误（或在浏览器窗口中输出）。这应该有助于定位错误。亲爱的Ken Fyrstenberg，你是对的。我必须检查浏览器是否支持。但是我可以知道一件事吗，先生，你使用了无限循环来检查当前时间，在检查时间之间我可以执行另一个jquery操作吗？因为我知道java脚本是单线程的。那么它如何在sam上运行2-3个任务呢e time.@krishnandan设置超时使其异步（在演示中，大约一帧，您可以使用33ms来降低速率，或者使用requestAnimationFrame作为更好的选择）。由于每个setTimeout都会创建一个计时器事件，因此浏览器可以在事件过期之前的平均时间内执行其他任务-然后再次调用此函数，并最终添加回事件队列。简单地说，执行其他任务时不应出现任何问题。它将只运行一次，等待等。所有操作仍然是单线程的，但仍存在问题有时间做其他事情。希望这有帮助。
function highlight() {

    var time = a2.currentTime,
        i = 0, word;

    for(; word = words[i++];) {
        if (time >= word.start && time <= word.end)
          if (!word.highlighted) {
            word.highlighted = true; // to reduce the need to update DOM
            // ... set CSS for highlighted here...
          }
        }
        else if (word.highlighted) {
            // ... set CSS for not highlighted here...
            word.highlighted = false;
        }
    }
}