Estoy tratando de hacer que un archivo de audio se reproduzca en mi página html (puedo hacer que se reproduzca con un clic). Pero estoy tratando de reproducir un clip de audio cuando se muestra un texto específico. Por ejemplo, estoy tratando de reproducir un clip de audio que debe ser específico para el texto que se muestra (o cualquier objeto).
Entonces, tengo algunas cadenas (Preguntas y respuestas) pero no puedo averiguar qué asignar a las cadenas para activar la reproducción del archivo de audio. Además, tal vez haya otra manera simplemente haciendo una función para cada pregunta.
Creo que quieres algo como esto:
const data = [{ question: "What's the name of Culham?", choices: ["Alan", "Alastair"], answer: "Alastair", audio: "https://upload.wikimedia.org/wikipedia/commons/7/7f/Alastair_Culham_voice.ogg" }, { question: "What's the name of Thompson?", choices: ["Bill", "John"], answer: "Bill", audio: "https://upload.wikimedia.org/wikipedia/commons/b/b1/Bill_Thompson_speaking.ogg" }] const generate = () => { root.innerHTML = "" audio.src="" const idx = Math.round(Math.random() * (data.length - 1)) root.innerHTML += `<div>${data[idx].question}</div>` data[idx].choices.forEach(c => { const btn = document.createElement("button") btn.innerText = c btn.onclick = function() { if (data[idx].answer === c) { audio.src = data[idx].audio audio.play() audio.onended = generate } else alert("Wrong Answer, try again") } root.appendChild(btn) }) } generate() reset.onclick = generate <div id="root"></div> <audio id="audio"></audio> <button id="reset">Reset</button>No coloque sus preguntas en un lugar y las señales de audio en otro. Manténgalos juntos en objetos de datos que tengan propiedades por pregunta. Por ejemplo:
questions = [ { question: 'What is your quest?', answer: 'To seek the holy grail.', badAnswers: [ '16.9 Gigawatts', 'African or European?', 'Red. No, blue!' ], audioQuestion: 'hmm.mp3', audioCorrect: 'youtu.be/0D7hFHfLEyk', audioIncorrect: 'sproing.mp3' }, { question: 'My milkshake brings more boys to the _____.', answer: 'yard', badAnswers: [ 'stand', 'steps', 'park', '21st century' ], audioQuestion: 'hmm.mp3', audioCorrect: 'youtu.be/i4YutyVP7ig', audioIncorrect: 'sproing.mp3' } ]Y luego puede tener una función que sepa qué hacer cuando se le da un elemento de esta matriz.