播放音頻一段時間，另一個聲音結束後，同時在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循環

回答

相關問題