在 for 循环中，在另一个音频结束后播放一个音频

问题描述 投票：0回答：3

目前我正在 Tizen 上设计一个 Web 应用程序（游戏），我想要：

  1. 显示图像
  2. 播放音频片段（约15-17秒长）
  3. 5秒内不做任何事情
  4. 播放另一个音频片段（约2-3秒）
  5. 隐藏图像

这些步骤将按顺序循环执行（N 次）。但是，当我在模拟器上运行我的应用程序时，它会同时播放第 2 步中要播放的所有声音，而图像永远不可见。

以下是我的Javascript函数：

         function performTask(image, audioName) { //sending id for image and audio,  e.g.: performTask("img1", "aud1")

            // Show the image
            img = document.getElementById(image);
            if (img && img.style) {
                img.style.height = screen.height;
                img.style.width = screen.width;
                img.style.visibility = "visible";
            } else {
                console.log("exercise(): error in setting image");
            }
            // play the audio
            try {
                myAudio = document.getElementById(audioName);
                myAudio.play();
                myAudio.onended = function() {
                    timeOut();
                };
            } catch (error) {
                console.error("exercise(): " + error.message);
            }
            // after 30 seconds, ring the bell!!
            try {
                console.log("playing bell");
                document.getElementById("bell").play();
            } catch (error) {
                console.error("bell: " + error.message);
            }
            //hide image
            img.style.visibility = "hidden";
        }

timeOut() 函数：

        var timer = 5000;
        function timeOut() {
            if (timer > 0) {
                setTimeout(timeOut(), timer--);
            }
         }

这被称为的 HTML 页面的结构：

        ...
        <body onload="someFunc()"> <!-- this calls performTask() in a for-loop-->
        <p>
            <img src='images/image1.png' alt="pose1n12" id="img1" />
        .... 10 more such images
        </p>
        <p>
            <audio id="bell">
                <source src='audio/bell.mp3' type="audio/mpeg" />
            </audio>
            <audio id="aud1">
                <source src='audio/aud1.mp3' type="audio/mpeg" />
            </audio>
        .... 10 more such clips
        </p>

编辑：添加 someFunc() 的定义

     function someFunc() { 
        var a;
        image = ''; // select image at particular count
        audioName = ''; // select respective audio
        for (a = 1; a <= 12; a++) { // the asana tracker loop
            switch (a) { // assigns image & audio
            case 1:
                image = "img1n12";
                audioName = "1N12";
                break;
            ...... continues till case 12
            }
        }
        performTask(image, audioName);
        }

请帮忙。

javascript html tizen
3个回答
0
投票

据我了解，当声音播放完毕时会触发“结束”事件。

http://forestmist.org/blog/html5-audio-loops/

您可以使用它使阶段 2 触发阶段 3，并使阶段 4 触发阶段 5。

0
投票

当播放第一个音频时，你应该每隔一步就回调onend，如果你需要再次等待一段时间，你需要将回调传递给setTimeout，下面的代码有点简化：

// on Global scope 
var audioName = "something";
var img = document.getElementById("image_id");

showImage ();
playAudio(audioName, function () {
   playBell (); 
   hideImage ();
});

现在函数定义如下：

function showImage () {
    if (img && img.style) {
        img.style.height = screen.height;
        img.style.width = screen.width;
        img.style.visibility = "visible";
    } else {
        console.log("exercise(): error in setting image");
    }
}
function playAudio (audioName, callback) {
    try {
        myAudio = document.getElementById(audioName);
        myAudio.play();
        myAudio.onended = function() {
            setTimeout(callback, 5000); // after 5 seconds
        };
    } catch (error) {
        console.error("exercise(): " + error.message);
    }
}
function playBell () {
     try {
         console.log("playing bell");
        document.getElementById("bell").play();
    } catch (error) {
        console.error("bell: " + error.message);
    }
}
function hideImage() {
    img.style.visibility = "hidden";
}
0
投票

这里我有两个 addEventListener('end') 的例子。这个事件监听器应该可以很好地满足您的要求。

第一种方法：调用另一个函数

ChangeSrc()
并使用同一个播放器。

方法一将通过id获取播放器，告诉播放器播放并添加事件监听器。这将侦听结束的事件，然后调用 ChangeSrc()。当调用 ChangeSrc 时，事件侦听器将被删除，播放器 src 将更改为下一个曲目，然后被告知播放。

HTML：

<b>Method One</b><button onclick="MethodOne()">Start</button><br>
<img id="DemoImg" src="sample1.png"/><br/>
<audio id="DemoAud" controls>
  <source src='sample1.mp3' type="audio/mpeg" />
Your browser does not support the audio element.
</audio>

Javascript

 function MethodOne(){
    var a=document.getElementById("DemoImg");
    var b=document.getElementById("DemoAud");
    b.play();
    b.addEventListener('ended',ChangeSrc,false);
}
function ChangeSrc(){
    var a=document.getElementById("DemoImg");
    var b=document.getElementById("DemoAud");
    b.removeEventListener("ended",ChangeSrc);
        a.src="sample2.png";
        b.src="sample2.mp3";
        b.play();
}

第二种方法：使用一个函数和两个播放器（就像你的源代码一样）

此方法与第一个方法非常相似，但在事件侦听器中具有该函数，这将告诉其他玩家播放，因为此函数仅在第一个音频剪辑结束时运行。这还将显示图像/播放器的容器。

HTML

<b>Method Two</b><button onclick="MethodTwo()">Start</button><br>
<div id="Demo2"  class="DemoBlock">
<img id="DemoImg2" src="sample1.png"/><br/>
<audio id="DemoAud2" controls>
  <source src='sample1.mp3' type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
</div><div id="Demo3" class="DemoBlock">
<img id="DemoImg3" src="sample2.png"/><br/>
<audio id="DemoAud3" controls>
  <source src='sample2.mp3' type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
</div>

Javascript：

function MethodTwo(){
    var a=document.getElementById("DemoAud2");
    var b=document.getElementById("DemoAud3");
    a.play();
    a.addEventListener('ended',function(){
    document.getElementById("Demo3").style.display="inline-block";
    b.play();
    },false);   
}

这个Exmaple只是向您展示使用事件监听器的两种不同方法，剩下的就取决于您将其集成到您现有的源代码中。

演示源代码

function MethodOne(){
    var a=document.getElementById("DemoImg");
    var b=document.getElementById("DemoAud");
    b.play();
    b.addEventListener('ended',ChangeSrc,false);
}
function ChangeSrc(){
    var a=document.getElementById("DemoImg");
    var b=document.getElementById("DemoAud");
    b.removeEventListener("ended",ChangeSrc);
        a.src="https://coded4u.co.uk/SO/28831485/sample2.png";
        b.src="https://coded4u.co.uk/SO/28831485/sample2.mp3";
        b.play();
}
function MethodTwo(){
    var a=document.getElementById("DemoAud2");
    var b=document.getElementById("DemoAud3");
    a.play();
    a.addEventListener('ended',function(){
    document.getElementById("Demo3").style.display="inline-block";
    b.play();
    },false);   
}
.DemoBlock{display:inline-block;}
#Demo3{display:none;}
<b>Method One</b><button onclick="MethodOne()">Start</button><br>
<img id="DemoImg" src="https://coded4u.co.uk/SO/28831485/sample1.png"/><br/>
<audio id="DemoAud" controls>
  <source src='https://coded4u.co.uk/SO/28831485/sample1.mp3' type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
<hr/>
<b>Method Two</b><button onclick="MethodTwo()">Start</button><br>
<div id="Demo2"  class="DemoBlock">
<img id="DemoImg2" src="https://coded4u.co.uk/SO/28831485/sample1.png"/><br/>
<audio id="DemoAud2" controls>
  <source src='https://coded4u.co.uk/SO/28831485/sample1.mp3' type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
</div><div id="Demo3" class="DemoBlock">
<img id="DemoImg3" src="https://coded4u.co.uk/SO/28831485/sample2.png"/><br/>
<audio id="DemoAud3" controls>
  <source src='https://coded4u.co.uk/SO/28831485/sample2.mp3' type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
</div>

我希望这有帮助。快乐编码！

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.