目前我正在Tizen设计一个我想要的Web应用程序（游戏）：
这些步骤将按顺序循环执行（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);
}
请帮忙。
答案 0 :(得分：0)
根据我的理解，当声音播放完毕时会触发“已结束”事件。
http://forestmist.org/blog/html5-audio-loops/
您可以使用它来制作第2阶段触发阶段3并使第4阶段触发第5阶段。
答案 1 :(得分：0)
// 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";
}
答案 2 :(得分：0)
这里我有两个 addEventListener（＆＃39;已结束＆＃39;）的示例。这个事件监听器应该可以正常工作。
第一种方法：调用另一个函数
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();
}
第二种方法：使用一个功能和两个玩家（就像您的源代码一样）
此方法与第一种方法非常相似，但在eventlistener中具有该功能，这将告诉其他玩家播放，因为此功能仅在第一个音频剪辑结束时运行。这也将显示图像/播放器的容器。
<强> 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只是为了向您展示使用eventlistener的两种不同方法，剩下的就是将它集成到您现有的源代码中。
演示源代码
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="http://coded4u.com/28831485/sample2.png";
b.src="http://coded4u.com/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="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>
我希望这会有所帮助。快乐的编码！