const utterances = ['utt01', 'utt02', 'utt03'] const analysis = ['try+ing', 'climb+ing', 'swimm+ing'] const translation = ['trying', 'climbing', 'swimming'] let utteranceIndex = 0; loadUtterance(utterances[utteranceIndex]); function loadUtterance(utterance) { audio.src = `audio/${utterance}.mp3`; subtitle.innerText = utterance; translation.innerText = translation; }Esto pretende ser un ejercicio para estudiar un texto extranjero. Yo quiero
He agregado la matriz de "análisis" para ayudar a visualizar lo que estoy tratando de hacer. Eventualmente, me gustaría mostrar la traducción (y el análisis) solo después de un eventListener (la solicitud del estudiante con un clic).
Problema: los elementos de traducción no se cargan con este script. Soy un lingüista jubilado que busca orientación. Gracias.
Un enfoque factible podría construirse en torno a un generador que fue creado por una función de generador y produce un compuesto de elementos de expresión que se crea a partir del índice siguiente/actual de las tres matrices proporcionadas inicialmente...
function *createUtteranceItemGenerator( utteranceArray, analysisArray, translationArray, filesArray, ) { let name, idx = -1; // as long as an `utteranceArray` item exists ... while (name = utteranceArray[++idx]) { // ... create and yield an utterance item compound. yield { name, analysis: analysisArray[idx], translation: translationArray[idx], url: filesArray[idx] }; } } function renderNextUtteranceItem(item, elmNodes) { const { name, analysis, translation, url } = item; const { audio, label, caption } = elmNodes; console.log({ item }); audio && (audio.src = url); // audio && (audio.src = `audio/${ name }.mp3`); label && (label.textContent = analysis); caption && (caption.textContent = translation); } function handleNextUtteranceItem(generator, elmNodes) { const item = generator.next(); if (item.done === false) { renderNextUtteranceItem(item.value, elmNodes); } } function init(config) { const elmFigure = document.querySelector('figure'); const elmButton = elmFigure?.querySelector('button'); if (elmButton) { const { utterances, analysis, translation, files } = config; const generator = createUtteranceItemGenerator(utterances, analysis, translation, files); elmButton .addEventListener( 'click', (/* evt */) => handleNextUtteranceItem(generator, { audio: elmFigure.querySelector('audio'), label: elmFigure.querySelector('label'), caption: elmFigure.querySelector('figcaption'), }), ); } } const files = [ 'https://freesound.org/data/previews/46/46989_514283-lq.mp3', 'https://freesound.org/data/previews/46/46990_514283-lq.mp3', 'https://freesound.org/data/previews/46/46991_514283-lq.mp3' ]; const utterances = ['utt01', 'utt02', 'utt03']; const analysis = ['try+ing', 'climb+ing', 'swimm+ing']; const translation = ['trying', 'climbing', 'swimming']; init({ utterances, analysis, translation, files }); * { margin: 0; padding: 0; } figure button { display: block; margin-bottom: 5px; } figure label { display: block; } .as-console-wrapper { left: auto!important; width: 51%; min-height: 100%!important; } <figure class="utterance"> <button>Next Utterance</button> <label></label> <figcaption></figcaption> <audio src="" controls autoplay></audio> </figure>Me las he arreglado para hacer que funcione de la siguiente manera (ver arriba para el const):
function loadUtterance(utterance){ audio.src = audio/${utterance}.mp3; var x = utteranceIndex; document.getElementById("subtitle").innerText = subtitle[x]; }Gracias por los comentarios que me dieron más ideas.
Según su descripción, puede haber diferentes razones:
si tiene la intención de mostrar toda la matriz de traducción/análisis, el problema es translation.innerText en realidad está operando la matriz que declaró anteriormente en lugar del elemento html, por lo que si su elemento html en el que desea mostrar la traducción en la identificación es "traducción" , simplemente cambie su función a la siguiente para solucionar su problema:
function loadUtterance(utterance) { audio.src = `audio/${utterance}.mp3`; subtitle.innerText = utterance; document.getElementById("translation").innerText = translation; }O si desea mostrar solo la traducción/análisis con el mismo índice de expresión, entonces la función en su código parece carecer de un par de parámetros de entrada (traducción, análisis), pruebe el código a continuación:
const utterances = ['utt01', 'utt02', 'utt03'] const analysis = ['try+ing', 'climb+ing', 'swimm+ing'] const translation = ['trying', 'climbing', 'swimming'] let utteranceIndex = 0; loadUtterance(utterances[utteranceIndex], translation[utteranceIndex], analysis[utteranceIndex]); function loadUtterance(selectedUtterance, selectedTranslation, selectedAnalysis) { audio.src = `audio/${selectedUtterance}.mp3`; subtitle.innerText = selectedUtterance; document.getElementById("translation").innerText = selectedTranslation; // analysis.innerText = selectedAnalysis; }