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

【问题标题】：I'm trying to display a text and when clicked the audio plays, when sound ends new text appears and when clicked that new audio plays我正在尝试显示文本，单击时播放音频，当声音结束时出现新文本，单击时播放新音频
【发布时间】：2018-07-28 14:43:50
【问题描述】：

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

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>

【问题讨论】：

您的 playSound 函数 "
@GeorgeDaniel 感谢您的回复，您能看看我还有哪些其他格式问题可能会破坏我的代码吗？
您好 Tonya，我是在测试您的代码时遇到错误的人。你的格式没问题。我很抱歉。
@GeorgeDaniel 哦，好吧，你知道我可以在我的 html 代码中做什么来使 javascript 工作吗？
不幸的是我没有:(

标签： javascript jquery html css audio

【解决方案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.

【讨论】：

你确定是onend(...)？
@Jonas W. 我认为它应该是 onended() 我在我的代码中更改了它，但它仍然没有工作
哦，我的错，这是 sound2.onended = function() { // 代码在这里 }
@SeifKhalid 再次感谢您的回复，您能告诉我在添加到 html 文件时是否正确执行了代码？
@iAmTonyaMISM 你添加了音频标签和javascript吗？