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

时间:2015-05-08 18:14:34

标签: javascript html audio

我正在尝试通过音频文件在当前时间发生事件。以下代码目前可以正常播放音频文件:

node->nodesetval->nodeNr

然而,虽然这适用于播放音频文件,但当我添加此代码以在某些代码达到某个点时运行某些代码时,它会崩溃。

<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>

我在播放音频功能后直接将此代码放在playound功能中,因此应播放音频文件。为什么文件崩溃。

这是一个查看文件结果的链接: http://www.presentation.bugs3.com/presentation.html

1 个答案:

答案 0 :(得分:0)

您在代码中实际上有一个while(true){}循环。 while同步执行,这意味着执行循环中没有任何其他事情发生中断,比如要前进的音频。如果循环本身修改条件while正在检查,您只想使用while。根据您的具体要求,我会使用setTimeoutsetInterval。如果你想在16秒后停止它,我会做

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

替代地

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