播放音频一段时间，另一个声音结束后，同时在for循环

目前我设计的Tizen Web应用程序（游戏），我想：播放音频一段时间，另一个声音结束后，同时在for循环

显示图像
播放音频剪辑（大约15-17秒长）
什么都不做，持续5秒
另一个播放音频剪辑（约2-3秒）
隐藏图像

这些步骤将按顺序循环执行（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"; 
     }

超时（）函数：

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

编辑：

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

哪里这就是所谓的HTML页面的结构：添加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); 
     }

请帮忙。

来源

2015-03-03 user2281204

设置的事件侦听器在音频完成'的document.getElementById（“钟”）的addEventListener（“结束”，函数（）{//此处一些代码的改变src}）;'你可以有此运行一个函数或调用另一个函数。 – NewToJS 2015-03-03 12:22:33

@NewToJS较早试了一下，没有运气 – user2281204 2015-03-05 04:40:37

这样看来，你有你的问题，甚至复杂的事情扩大。一旦当前音频结束后，你不想知道如何播放另一个音频文件吗？我相信这是原来的问题... – NewToJS 2015-03-05 10:30:32

根据我的理解，当声音播放完毕时会出现“结束”事件。

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

您可以使用它来制作第2阶段的触发阶段和3阶段有4个触发阶段5.

来源

2015-03-03 12:22:09

打第一音频时，你应该做的电话每隔退一步onended，如果你需要再次等待其他一些时候，你需要通过呼叫切换到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"; 
}

来源

2015-03-03 12:29:28 Khalid

这里我有两个例子addEventListener（'ended'）。这个事件监听器应该适合你所要求的。

第一种方法：调用另一个函数ChangeSrc()并使用相同的球员。

方法一将通过id获取玩家，告诉玩家玩并添加事件侦听器。这将监听结束的事件，然后调用ChangeSrc（）。当调用ChangeSrc时，eventlistener被移除，玩家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); 
}

这〔实施例只是向你展示使用EventListener的两种不同的方法，剩下的就是到你将其集成到您现有的源代码中。

演示源代码

function MethodOne(){ 
 
\t var a=document.getElementById("DemoImg"); 
 
\t var b=document.getElementById("DemoAud"); 
 
\t b.play(); 
 
\t b.addEventListener('ended',ChangeSrc,false); 
 
} 
 
function ChangeSrc(){ 
 
\t var a=document.getElementById("DemoImg"); 
 
\t var b=document.getElementById("DemoAud"); 
 
\t b.removeEventListener("ended",ChangeSrc); 
 
\t \t a.src="http://coded4u.com/28831485/sample2.png"; 
 
\t \t b.src="http://coded4u.com/28831485/sample2.mp3"; 
 
\t \t b.play(); 
 
} 
 
function MethodTwo(){ 
 
\t var a=document.getElementById("DemoAud2"); 
 
\t var b=document.getElementById("DemoAud3"); 
 
\t a.play(); 
 
\t a.addEventListener('ended',function(){ 
 
\t document.getElementById("Demo3").style.display="inline-block"; 
 
\t b.play(); 
 
\t },false); \t 
 
}

.DemoBlock{display:inline-block;} 
 
#Demo3{display:none;}

<b>Method One</b><button onclick="MethodOne()">Start</button><br> 
 
<img id="DemoImg" src="http://coded4u.com/28831485/sample1.png"/><br/> 
 
<audio id="DemoAud" controls> 
 
    <source src='http://coded4u.com/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="http://coded4u.com/28831485/sample1.png"/><br/> 
 
<audio id="DemoAud2" controls> 
 
    <source src='http://coded4u.com/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="http://coded4u.com/28831485/sample2.png"/><br/> 
 
<audio id="DemoAud3" controls> 
 
    <source src='http://coded4u.com/28831485/sample2.mp3' type="audio/mpeg" /> 
 
Your browser does not support the audio element. 
 
</audio> 
 
</div>

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

来源

2015-03-05 11:46:51 NewToJS

播放音频一段时间，另一个声音结束后，同时在for循环

回答

相关问题