HTML5音频标签onplaying之前在Android的音频播放被触发 [英] HTML5 audio tag onplaying even is triggered before audio play in android
本文介绍了HTML5音频标签onplaying之前在Android的音频播放被触发的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我要根据音频写一个code为亮点的文字。在这种逻辑是，当音频开始播放我们火的一大亮点功能。这突出每个字没有给出任何时间。
和它工作正常的窗口电脑和台式机。但是，在音频开始前的android亮点功能触发，这就是为什么音频和亮点是不同步的。
下面是code。
功能亮点（启动，totalWords，援助）{
VAR wtime =数据[开始] / defaultPlayback;
$（＃W+启动）的CSS（色，黄）;
的setTimeout（函数（）{
$（＃W+启动）的CSS（色，）;
启动++;
如果（开始＆LT; = totalWords）{亮点（启动，totalWords，援助）;}
其他{返回false;}
}，wtime）;
}
＆LT;音频preLOAD =自动控制ID ='A2'onplaying =高亮（10，18，'bookread4'）; onended =完成（'A3'）＆GT;
＆lt;信源SRC =http://arbordalepublishing.com/eBooks2/Animalogy/Animalogy p7.mp3TYPE =音频/ MPEG＆GT;
您的浏览器不支持的音频元素。
＆LT; /音频＆GT;
＆LT;跨度ID =W10级=calibre2＆GT;鸡＆LT; / SPAN＆GT;
＆所述;跨度的id =W11类=calibre2＆GT;为＆lt; /跨度＆GT;
＆所述;跨度的id =W12类=calibre2＆gt;至＆所述; /跨度＆GT;
＆LT;跨度ID =W13级=calibre2＆GT;羽毛状，＆LT; / SPAN＆GT;
＆所述;跨度的id =W14类=calibre2＆gt;作为＆其中; /跨度＆GT;
＆LT;跨度ID =W15级=calibre2＆GT;熊＆LT; / SPAN＆GT;
＆所述;跨度的id =W16类=calibre2＆GT;为＆lt; /跨度＆GT;
＆所述;跨度的id =W17类=calibre2＆gt;至＆所述; /跨度＆GT;
＆LT;跨度ID =W18级=calibre2＆GT;毛茸茸＆LT; / SPAN＆GT;
解决方案
而不是驾驶与一个定时器/计数器，你将不能保证将同步文字，你应该使用 currentTime的音频元素的属性。这将迫使正确的时间依赖于启动。
属性返回分数秒当前的绝对时间。利用这段时间来检查时间范围的字加以强调。
例如（只是任意倍这里作为原始数据是不可用的）：
VAR个字= [
{
ID：W10，//或使用参考元素
开始：0，//时间（秒）
结束：0.2，
强调：假的//减少DOM更新
}，
{
ID：W11，
启动：0.22，
结束：0.4，
强调：假的
}，
... 等等。 ...
]。
然后在亮点：
功能亮点（）{
VAR时间= a2.currentTime，
I = 0，字;
对于（;字=字[我++]）{
如果（时间＆gt; = word.start和放大器;＆放大器;时间＆LT; = word.end）
如果（！word.highlighted）{
word.highlighted = TRUE; //以减少需要更新DOM
// ...在这里强调设置CSS ...
}
}
否则，如果（word.highlighted）{
// ...设置的CSS这里不突出...
word.highlighted = FALSE;
}
}
}
现场演示
尝试在播放过程中暂停它，你会看到文字依然能够同步时继续。
//注意：这些都不是100％同步的 - 他们只是如
VAR个字= [
{ID：W10，开始：0结束：0.7，强调：假}，
{ID：W11，启动：0.76，结束：1.1，强调：假}，
{ID：W12，启动：1.2，结束：1.3，强调：假}，
{ID：W13，启动：1.4，结束：2.1，强调：假}，
{ID：W14，启动：2.1，结束：2.3，强调：假}，
{ID：W15，启动：2.3，结束：2.7，强调：假}，
{ID：W16，启动：2.7，结束：3.0，强调：假}，
{ID：W17，启动：3.0，结束：3.2，强调：假}，
{ID：W18，启动：3.2，结束：3.4，强调：假}]，
音频=的document.getElementById（A2）;
audio.onplaying =亮点;
功能亮点（）{
VAR的时间= a2.currentTime，I = 0，字;
对于（;字=字[我++]）{
如果（时间＆gt; = word.start和放大器;＆放大器;时间＆LT; word.end）{
如果（！word.highlighted）{
word.highlighted = TRUE; //以减少需要更新DOM
的document.getElementById（word.id）.style.color =橙色;
}
}
否则，如果（word.highlighted）{
的document.getElementById（word.id）.style.color =黑;
word.highlighted = FALSE;
}
}
//你应该听结束事件并使用，在这里停止循环，为简单起见：
如果的setTimeout（大亮点，17）（audio.paused！）;
//否则警报（完成）;
}
身体{字体：大胆16px的无衬线}
＆LT;音频preLOAD =自动控制ID =A2 ＆GT;
＆lt;信源SRC =http://arbordalepublishing.com/eBooks2/Animalogy/Animalogy p7.mp3TYPE =音频/ MPEG＆GT;
您的浏览器不支持的音频元素。
＆LT; /音频＆GT;
＆LT; BR＆GT;
＆LT;跨度ID =W10＆GT;鸡＆LT; / SPAN＆GT;
＆所述;跨度的id =W11中的一个是与所述; /跨度＆GT;
＆所述;跨度的id =W12＆gt;至＆所述; /跨度＆GT;
＆LT;跨度ID =W13＆GT;羽毛状，＆LT; / SPAN＆GT;
＆所述;跨度的id =W14＆gt;作为＆其中; /跨度＆GT;
＆LT;跨度ID =W15＆GT;熊＆LT; / SPAN＆GT;
＆所述;跨度的id =W16中的一个是与所述; /跨度＆GT;
＆所述;跨度的id =W17＆gt;至＆所述; /跨度＆GT;
＆LT;跨度ID =W18＆GT;毛茸茸＆LT; / SPAN＆GT;
I have write a code for highlight text according to audio. In this the logic is when audio start playing we fire a highlight function. which highlight each word for given no of time.
And it is working fine for window PC and Desktop. But In android highlight function trigger before audio start that is why audio and highlight is not synchronized.
Below is the code.
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>
解决方案
Instead of driving the text with a timer/counter, which you will have no guarantee will synchronize, you should use the currentTime property of the audio element. This will force correct time independent on start.
The property returns current absolute time in fractional seconds. Use this time to check time range for the word to be highlighted.
For example (just arbitrary times here as the original data is not available):
var words = [
{
id: "W10", // or use reference to element
start: 0, // time in seconds
end: 0.2,
highlighted: false // to reduce DOM updates
},
{
id: "W11",
start: 0.22,
end: 0.4,
highlighted: false
},
... etc. ...
];
Then in highlight:
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;
}
}
}
Live demo
Try pausing it during play and you will see text is still able to sync when continued.
// NOTE: these are not 100% synchronized - they are just for example
var words = [
{id: "W10", start: 0, end: 0.7, highlighted: false},
{id: "W11", start: 0.76, end: 1.1, highlighted: false},
{id: "W12", start: 1.2, end: 1.3, highlighted: false},
{id: "W13", start: 1.4, end: 2.1, highlighted: false},
{id: "W14", start: 2.1, end: 2.3, highlighted: false},
{id: "W15", start: 2.3, end: 2.7, highlighted: false},
{id: "W16", start: 2.7, end: 3.0, highlighted: false},
{id: "W17", start: 3.0, end: 3.2, highlighted: false},
{id: "W18", start: 3.2, end: 3.4, highlighted: false}],
audio = document.getElementById("a2");
audio.onplaying = highlight;
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
document.getElementById(word.id).style.color = "orange";
}
}
else if (word.highlighted) {
document.getElementById(word.id).style.color = "black";
word.highlighted = false;
}
}
// you should listen to end event and stop the loop using that, here, for simplicity:
if (!audio.paused) setTimeout(highlight, 17);
//else alert("done");
}
body {font: bold 16px sans-serif}
<audio preload='auto' controls id='a2'>
<source src="http://arbordalepublishing.com/eBooks2/Animalogy/Animalogy p7.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<br>
<span id="W10">Chick </span>
<span id="W11">is </span>
<span id="W12">to </span>
<span id="W13">feathery,</span>
<span id="W14">as </span>
<span id="W15">bear </span>
<span id="W16">is </span>
<span id="W17">to </span>
<span id="W18">furry.</span>
这篇关于HTML5音频标签onplaying之前在Android的音频播放被触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
