Есть ли эффективный способ показать и удалить определенные кнопки после нажатия на них и воспроизведения звука? - PullRequest
0 голосов
/ 31 мая 2019

Я создаю веб-сайт с Javascript, на котором вы можете нажать кнопку для воспроизведения аудиофайла. Когда звук заканчивается, он показывает две новые кнопки и удаляет первую. Я пытаюсь сделать интерактивный аудио-рассказ, который позволит пользователям выбирать разные моменты истории. как эта блок-схема

Я уже пытался сделать кнопку с идентификатором и onclick()= play(). В JavaScript я использую getElementById, чтобы сделать style.display и style.visibility.

Этот вид работает, но он неэффективен, так как мне нужно сделать более 50 кнопок.

HTML

<a class="btn btn-light" id="introbutton" onclick="playstart()" role="button">start</a>

<audio id="introaudio" src="audio/bel.WAV" ></audio>

JAVASCRIPT

function playstart(){
   var introaudio = document.getElementById("introaudio");
   introaudio.play();
}
introaudio.onended = function() {
   document.getElementById("introbutton").style.display = "none";

   document.getElementById("button2A").style.visibility = "visible";
   document.getElementById("button2B").style.visibility = "visible";
};

Я надеялся, что будет какое-то решение, в котором я смогу просто дать своим именам файлов номер и имя A / B. пример: audio2A.mp3. И когда вы выбираете кнопку 2А, он автоматически выбирает этот файл и показывает две кнопки, связанные с этим выбором.

...