Question

我试图创建一个按时间顺序排列的所有文本的数组。这必须进行很多次（单击-声音播放-声音停止，下一个文本出现-单击-声音播放-下一个文本，等等。）我似乎无法获得新的文本来使旧的文本消失，声音播放和停止然后输入新文本。

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>

Answer 1

如何做到这一点，像这样将一些音频标签添加到您的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.

我正在尝试显示文本，单击音频播放时，声音结束时会出现新文本，单击音频播放时会显示新文本

1 个答案: