音频当前时间的Javascript比较导致无限的while循环

Question

I am trying to have a event happen at a current time through an audio file. 我正在尝试通过音频文件在当前时间发生事件。 The following code currently works and successfully plays the audio file: 以下代码当前有效，并且可以成功播放音频文件：

<html>
    <head>
        <style>
            .titletext {
                color: white;
                display: block;
                position: absolute;
                font-size: 50px;
                width: 1000px;
                margin-left: 150px;
                margin-right: 200px;
            }
            .nametext {
                color: white;
                display: block;
                position: absolute;
                font-size: 30px;
                width: 600px;
                margin-left: 500px;
                margin-right: 200px;
                margin-top: 600px;
            }
            .earthphoto {
                display: block;
                position: absolute;
                margin-left: 400px;
                margin-top: 150px;
            }
        </style>
    </head>
    <body onload="update()">
        <script type="text/javascript">
            document.body.style.background="black";
            var changescene=function(){
                var allvariables=Object.keys( window );

                if(page===1){
                    console.log(allvariables);
                }

                page++;
                update();
            };
            var page=1;
            var playsound=function(){
                if(page===1){
                    document.getElementById("sound1").play();
                    document.getElementById("sound1").addEventListener("ended",function(){changescene();});
                }
            };
            var update=function(){
                if(page===1){
                    document.body.innerHTML="";
                    var text=document.createElement("p");
                    var textclass = document.createAttribute("class");
                    textclass.value="titletext";
                    text.setAttributeNode(textclass);
                    text.appendChild(document.createTextNode("Welcome to Mikey's Google Earth Presentation!"));
                    document.body.appendChild(text);
                    var text2=document.createElement("p");
                    text2class=document.createAttribute("class");
                    text2class.value="nametext";
                    text2.setAttributeNode(text2class);
                    text2.appendChild(document.createTextNode("By Mikey Richards"));
                    document.body.appendChild(text2);
                    googleearthimage=document.createElement("img");
                    googleearthimage.setAttribute("src","EARTH.png");
                    googleearthimage.setAttribute("class","earthphoto");
                    document.body.appendChild(googleearthimage);
                    var music=document.createElement("audio");
                    var musiclink=document.createElement("source");
                    musiclink.src="Slide1.mp3";
                    music.appendChild(musiclink);
                    var musicclass=document.createAttribute("id");
                    musicclass.value="sound1";
                    music.setAttributeNode(musicclass);
                    document.body.appendChild(music);
                    playsound();
                }else if(page===2){
                    document.body.innerHTML="";
                }
            };
        </script>
    </body>
</html>

However, although this works for playing the audio file, when I add this code to run some code when it reaches a certain point, it crashes. 但是，尽管这对于播放音频文件有效，但是当我添加此代码以在达到特定点时运行某些代码时，它会崩溃。

while(document.getElementById("sound1").currentTime<16){
}
//insert code here

I place this code in the playsound function directly after the play function for the audio, so the audio file should be playing. 我将此代码直接放在音频的播放功能之后的playoundound函数中，因此应该在播放音频文件。 Why does the file crash. 为什么文件崩溃。

Here is a link to see the result of the file: http://www.presentation.bugs3.com/presentation.html 以下是查看文件结果的链接： http : //www.presentation.bugs3.com/presentation.html

Answer 1

You effectively have a while(true){} loop in your code. 您的代码中实际上有一个while(true){}循环。 while executes synchronously, which means that there is no break in the execution loop for anything else to happen, like the audio to advance. while同步执行的，这意味着执行循环不会中断任何其他事情的发生，例如音频的前进。 You only want to use while if the loop itself modifies the condition while is checking. 如果循环while检查时修改了条件while则只想使用while 。 Depending on exactly what you want to do, i'd use setTimeout or setInterval . 根据您要执行的操作，我将使用setTimeout或setInterval 。 If you want to stop it after 16 seconds, I'd do 如果您想在16秒后停止，我会做

setTimeout(
    function(){document.getElementById("sound1").pause()},
    16000)

alternatively 或者

var curInterval = setInterval(
        function(){
             if(document.getElementById("sound1").currentTime<16)
             {
                  doSomething();
             }
             else
             {
                 clearInterval(curInterval);
                 doSomethingElse();
             }
        },
        200) //whatever interval makes sense to you.

音频当前时间的Javascript比较导致无限的while循环

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-05-08 18:36:06

音频当前时间的Javascript比较导致无限的while循环

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-05-08 18:36:06

解决方案1
0 已采纳 2015-05-08 18:36:06