我试图创建一个按时间顺序排列的所有文本的数组。这必须进行很多次(点击 - 声音播放 - 声音停止，下一个文本出现点击 - 声音播放 - 下一个文本等)我似乎无法让新文本出现，旧文本消失，声音播放和停止然后新文本。
JavaScript 文件:
var nextText = (function() {
var myArray = ["text1","text2","text3"];
var i = 0;
return function() {
$('#results').html(myArray[i%myArray.length]);
i++;
}
})();
function playSound(soundfile) {
document.getElementById("myText").innerHTML=
"<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
}
索引文件:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1" />
<script src="main.js" language="javascript" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="default.css">
<title>...</title>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<style>
</style>
</head>
<body>
<span id="myText"></span>
<myTextSize onmousedown="playSound('sound1.wav');">Text1</myTextSize>
<div id="nextText" style="display:none;">
<myTextSize onmousedown="playSound('sound2.wav');">Text2</myTextSize>
</div>
<div id="nextText3" style="display:none;">
<myTextSize onmousedown="playSound('sound3.wav');">Text3</myTextSize>
</div>
</body>
</html>
如您所见，显示的是所有文本而不是 Text1(点击 - 听到音频 - 音频结束 - 出现下一个文本。我需要对多个文本一遍又一遍地使用相同的模式。
我将这段代码添加到我的 html 文件中，试图让点击播放停止下一个字母功能正常工作，但无济于事。
@Seif Khalid 感谢您的快速回复。我尝试了几个小时来实现此代码，但无济于事。我相信我做得不对。我尝试在评论部分回复，但添加代码的格式很奇怪？？
<OneTextSize id="#myText" onclick="sound2.play()" "sound2.onended()">myText1</OneTextSize>
<div id="#nextText" hidden>
<OneTextSize id="#nextText.show()" onclick="sound1.play()">myText2</OneTextSize>
<div id="#myText" style="display:none;">
<OneTextSize onclick="sound1.play()">myText3</OneTextSize>
</div>
最佳答案
怎么样，像这样在您的 html 中添加一些音频标签:
<audio id="sound1">
<source src="sound1.ogg" type="audio/ogg">
<source src="sound1.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<audio id="sound2">
<source src="sound2.ogg" type="audio/ogg">
<source src="sound2.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
然后在你的 javascript 中:
const sound1 = document.querySelector("#sound1");
const sound2 = document.querySelector("#sound2");
$("#myText").click(function() {
sound2.play();
sound2.onended = function() {
$("#nextText").show(); // Ofcourse hide this in your css beforehand
}
});
$("#nextText").click....//Repeat the same thing.
关于javascript - 我正在尝试显示文本，单击时播放音频，当声音结束时出现新文本，单击时播放新音频，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51572417/