Fatal编程技术网
  • javascript/
  • Javascript 在间隔（或超时）内设置动画在清除后继续

Javascript 在间隔（或超时）内设置动画在清除后继续

javascript audio

Javascript 在间隔（或超时）内设置动画在清除后继续,javascript,audio,jquery-animate,settimeout,setinterval,Javascript,Audio,Jquery Animate,Settimeout,Setinterval,我正在学习JS，使用一些代码，将音频（口语）与文本（口语的转录）大致同步 更具体地说，代码会一个字符一个字符地更改文本的背景颜色，这与播放音频的ms是等效的。此外，您可以单击文本的任何字符，转到音频中的等效ms 我正在使用Bart Veneman扳手自动将跨距添加到文本中的每个字符，然后使用Jquery添加到。使用for循环和这些跨距设置这些字符背景色的动画。背景色。动画每个角色需要+-240毫秒 由于audio ontimeupdate似乎不太可靠，我使用了一个时间间隔作为计时器：它在音频启动

我正在学习JS，使用一些代码，将音频（口语）与文本（口语的转录）大致同步

更具体地说，代码会一个字符一个字符地更改文本的背景颜色，这与播放音频的ms是等效的。此外，您可以单击文本的任何字符，转到音频中的等效ms

我正在使用Bart Veneman扳手自动将跨距添加到文本中的每个字符，然后使用Jquery添加到。使用for循环和这些跨距设置这些字符背景色的动画。背景色。动画每个角色需要+-240毫秒

由于audio ontimeupdate似乎不太可靠，我使用了一个时间间隔作为计时器：它在音频启动时启动，并与音频并行运行。背景色。动画在此间隔内发生

？问题出在哪里？：如果您（在Firefox下工作，而不是在Chrome下）单击文本的任何部分（音频开始播放），然后单击文本的其他部分（音频播放点更改），您会注意到一些文本字符的背景颜色仍然存在。这些字符的背景色未正确清除：

？我猜是什么？：这是因为背景色为+-240ms。动画发生与我调用clearInterval的方式/时间以及清除背景色的for循环发生的方式/时间有关

更多信息： 清除背景颜色和间隔的for循环都在audio.onplay时激发的函数中运行

单击文本字符时，音频暂停，播放点更改，并触发audio.onplay，因此调用该函数

clearInterval在间隔本身内，并且在audio.onpause或on.ended（以及到达文本的最后一个字符）时运行

我读过interval循环，没有等待其中的代码块完成，所以我也尝试了超时，结果是一样的

到底发生了什么？ 什么是解决这个问题的好方法

多谢各位

完整代码：

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head>
<meta charset="UTF-8">
<title>masculinidades/masculinities TEST 5</title>
</head>
<body>
<audio id="miAudio" preload="auto" controls><source src=audio/talk.mp3 type="audio/mpeg"></audio>

<p id="text">La lógica del empresario criminal, el pensamiento de los
boss coincide con el neoliberalismo más radical. Estar en
situación de decidir sobre la vida y la muerte de todos</p>

<script src="js/spanner.js"></script>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery-ui.min.js"></script>

<script>
 $(document).ready(function(){

      // spanner aplica span .char* en orden creciente al contenido del elemento #text
      spanner( document.getElementById("text") );

      // guardar el elemento audio y el tamaño del texto en  variables
      var elAudio = document.getElementById("miAudio");
      var durText = $("#text").text().length;

      // calcular cada cuantos ms hemos de de avanzar un caracter
      var msXchar = Math.floor((elAudio.duration*1000) / durText);
      console.log("1 Char cada " + msXchar + " ms");


      // al hacer hover en cualquier elemento con clase char(int) colorea y pon cursor
      $("[class^='char']").hover(
         function() {
            $(this).css('cursor', 'e-resize');
            if ($(this).css("backgroundColor") != "rgb(0, 250, 154)") {
               $(this).css("backgroundColor", "rgb(0, 250, 154)");
            } else {
               $(this).css("backgroundColor", "rgb(255, 255, 255)");
            };

         }, function() {
            if ($(this).css("backgroundColor") == "rgb(0, 250, 154)") {
               $(this).css("backgroundColor", "rgb(255, 255, 255)");
            } else {
               $(this).css("backgroundColor", "rgb(0, 250, 154)");
            };  
         }
      );

      /* al hacer click en cualquier elemento con clase char(int) usa (int) para ir al tiempo del audio equivalente */
      $("[class^='char']").click(
         function() {
            elAudio.pause();
            console.log("clicked paused")

            //extrae el int y escala a tiempo de audio
            var thisChar = $(this).attr('class').substring(4);
            var thisTime = ((thisChar / durText) * (elAudio.duration));

            //muévete a ese tiempo de audio
            elAudio.currentTime = thisTime + (msXchar*2/1000)
            console.log(thisChar, thisTime);
            elAudio.play();
         }
      );


      // cuando se hace play al audio ...
      elAudio.onplay = function() {

            console.log("onplay");

            // + borra todo caracter coloreado
            for (var i = 0; i < (durText+1); i++) {
               $(".char" + i).css("backgroundColor", "#ffffff")
            };

            // en qué MILIsegundo del audio estamos y a q equivale en texto?
            var actualTime = Math.floor(elAudio.currentTime*1000);
            var actualChar = Math.floor(((actualTime/1000) / elAudio.duration) * (durText));
            console.log("start " + "ms: " + actualTime , "char: " + actualChar);


             // ... inicia un Interval que avanza paralelamente al audio
            var elInterval = setInterval(function(){

               // colorea el actual char
               console.log("start colorea")
               $( ".char" + actualChar).animate({ 
                  backgroundColor: '#00fa9a'
               }, (msXchar*4) );
               console.log("end colorea")

               // cada loop subir 1 el contador de caracteres, empezando en actualChar           
               actualChar += 1; 
               console.log("char actual " + actualChar);

               // y subir en msXchar ms el contador de tiempo
               actualTime += msXchar;

               // si el num de char actual es mayor que el largo total del texto, detenemos el intervalo, lo mismo si se ha pausado o terminado el audio
               if (actualChar > (durText)) {clearInterval(elInterval);
               console.log("interval cleared actualChar > durText");};
               elAudio.onpause = function(){clearInterval(elInterval);
               console.log("interval cleared paused");};
               elAudio.onended = function(){clearInterval(elInterval);
               console.log("interval cleared ended");};

            // repite este intervalcada msXchar ms
          }, msXchar); 

      };
   }); 
</script>
</body>
</html>


男子气概测试/男子气概测试5

La lógica del empresario罪犯，el pensamiento de los
新自由主义者的老板是激进派。埃斯塔恩
生活和生活的决定权

$（文档）.ready（函数（）{
//扳手适用于span.char*en orden creciente al contenido del elemento#text
扳手（document.getElementById（“text”）；
//guardar el elemento audio y el-tamaño del texto en变量
var elAudio=document.getElementById（“miAudio”）；
var durText=$（“#text”）.text（）.length；
//结石性cada cuantos ms-hemos de avanzar un-caracter
var msXchar=Math.floor（（elAudio.duration*1000）/durText）；
console.log（“1字符cada”+msXchar+“ms”）；
//将鼠标悬停在光标上的颜色和颜色元素之间
$（“[class^='char']”。悬停(
函数（）{
$（this.css（'cursor'，'e-resize'）；
如果（$（this.css（“backgroundColor”）！=“rgb（0250154）”）{
css（“背景色”，“rgb（0250154）”；
}否则{
css（“backgroundColor”，“rgb（255，255，255）”）；
};
}，函数（）{
if（$（this.css（“backgroundColor”）==“rgb（0250154）”）{
css（“backgroundColor”，“rgb（255，255，255）”）；
}否则{
css（“背景色”，“rgb（0250154）”；
};  
}
);
/*在美国（int）的音频等效电路中，单击所有元件*/
$（“[class^='char']”）。单击(
函数（）{
elAudio.pause（）；
日志（“单击暂停”）
//额外的内部音频
var thisChar=$（this.attr（'class'）.substring（4）；
var thisttime=（（thisChar/durText）*（elAudio.duration））；
//穆维特是一位音乐大师
elAudio.currentTime=此时间+（msXchar*2/1000）
log（thisChar，thisTime）；
elAudio.play（）；
}
);
//cuando se hace播放所有音频。。。
elAudio.onplay=函数（）{
控制台日志（“onplay”）；
//+borra todo caracter coloreado
对于（变量i=0；i<（durText+1）；i++）{
$（“.char”+i.css（“backgroundColor”，“#ffffff”）
};
//你的声音和文字是一样的吗？
var actualTime=数学地板（elAudio.currentTime*1000）；
var actualChar=数学楼层（（（实际时间/1000）/elAudio.duration）*（durText））；
log（“start”+“ms:+actualTime”，char:+actualChar）；
//…这是一段很短的时间
var elInterval=setInterval（函数（）{
//实际字符颜色
console.log（“启动colorea”）
$（“.char”+actualChar）.animate（{
背景颜色：“#00fa9a”
}，（msXchar*4））；
console.log（“end colorea”）
//卡达·洛普·苏比尔1号酒店
实际哈尔+=1；
console.log（“char实际值”+actualChar）；
//蒂埃姆波的康塔多酒店
实际时间+=msXchar；
//这是一个真实的数字，它包含了所有的文本、间隔和音频
if（actualChar>（durText））{clearInterval（elInterval）；
log（“间隔清除的实际值>durText”）；}；
elAudio.onpause=function（）{clearInterval（elInterval）；