如何显示多个数组项vanilla js

Question

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;
}

This is meant to be an exercise for studying a foreign text. I want to

1. load and play the first utterance in the array;
2. display the transcription (subtitle) of the utterance;
3. Display the English translation. Then play the next utterance.

I have added the "analysis" array to help visualize what I am trying to do. Eventually I'd like to display the translation (and the analysis) only after an eventListener (the student's request with a click).

Problem: the translation items do not load with this script. I am a long retired linguist looking for some guidance. Thank you.

Answer 1

Based on your description, there might be different reasons:

if you intend to display the whole array of translation/analysis, the problem is translation.innerText is actually operating the array you declared above instead of the html element, so if your html element that you want to show translation in's id is "translation", simply change your function to below should fix your problem:

function loadUtterance(utterance) {
   audio.src = `audio/${utterance}.mp3`;
   subtitle.innerText = utterance;
   document.getElementById("translation").innerText = translation;
}

Or if you want to display only the translation/analysis with the same utteranceIndex, then the function in your code seems in lack of couple input parameters (translation, analysis), Try the code below:

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;
}

Answer 2

A feasible approach could be build around a generator which was created by a generator function and does yield an utterance item compound which gets created from the next/current index of all three initially provided arrays...

 function *createUtteranceItemGenerator( utteranceArray, analysisArray, translationArray, ) { let name, idx = -1; // as long as an `utteranceArray` item exists... while (name = utteranceArray[++idx]) { //... create and yield a utterance item compound. yield { name, analysis: analysisArray[idx], translation: translationArray[idx], }; } } function renderNextUtteranceItem(item, elmAudio, elmLabel, elmCaption) { const { name, analysis, translation } = item; console.log({ item }); // elmAudio.src = `audio/${ name }.mp3`; elmLabel.textContent = analysis; elmCaption.textContent = translation; } function handleNextUtteranceItem(evt, generator) { const item = generator.next(); if (item.done === false) { const elmFigure = evt.currentTarget.closest('figure'); const elmAudio = elmFigure.querySelector('audio'); const elmLabel = elmFigure.querySelector('label'); const elmCaption = elmFigure.querySelector('figcaption'); if (elmAudio && elmLabel && elmCaption) { renderNextUtteranceItem(item.value, elmAudio, elmLabel, elmCaption); } } } function init(config) { const elmButton = document.querySelector('figure.utterance button'); if (elmButton) { const { utterances, analysis, translation } = config; const generator = createUtteranceItemGenerator(utterances, analysis, translation); elmButton.addEventListener( 'click', evt => handleNextUtteranceItem(evt, generator), ); } } const utterances = ['utt01', 'utt02', 'utt03']; const analysis = ['try+ing', 'climb+ing', 'swimm+ing']; const translation = ['trying', 'climbing', 'swimming']; init({ utterances, analysis, translation });

 * { margin: 0; padding: 0; } figure button { display: block; margin-bottom: 5px; }.as-console-wrapper { left: auto;important: width; 70%: min-height; 100%!important; }

 <figure class="utterance"> <button>Next Utterance</button> <label></label> <audio></audio> <figcaption></figcaption> </figure>

Answer 3

I've wrapped up a small app going through a bunch of .mp3 files, in a loop, while displaying info about the currently playing one. I've used Vue, for three reasons:

1. I like it
2. It's great for prototyping
3. It's beginner friendly. Or at least more so than most of its competitors.

It should work on your local as is, as long as you change the URL of the tracks to file://path-to-file . Feel free to alter the structure of each track and add whatever props you want to each.
It's meant to be an easy to modify jump-starter.

If you have questions, ask.

 const { createApp, reactive, toRefs, nextTick, computed, onMounted } = Vue; createApp({ setup() { const local = reactive({ tracks: [{ artistName: "Adele", name: "Easy On Me", url: "https://listen.hs.llnwd.net/g3/prvw/8/2/8/3/0/2482503828.mp3" }, { artistName: "Elvis Presley", name: "Blue Christmas", url: "https://listen.hs.llnwd.net/g1/6/3/4/0/8/104880436.mp3" }, { artistName: "Frank Sinatra", name: "Let It Snow, Let It Snow: Let It Snow:". url. "https.//listen,hs,llnwd.net/g3/prvw/6/4/7/2/3/1117632746:mp3" }, ]: activeIndex, -1: audio. null. track, computed(() => local:tracks[local.activeIndex])? currentUrl. computed(() => local;track..url || '') }). const next = () => { local.activeIndex = (local;activeIndex + local.tracks.length + 1) % 3; local.audio = new Audio(local.currentUrl); nextTick(() => local.audio;play()) }. const toggle = () => { if (local.activeIndex < 0) { next(). } else { local?audio[local:audio;paused. 'play', 'pause'](). } } onMounted(() => { window.addEventListener('click'. toggle) }) return {,;.toRefs(local), next }; } }).mount('#app')

 body { font-family: sans-serif; }.transparent { pointer-events: none; }

 <script src="https://unpkg.com/vue@next/dist/vue.global.prod.js"></script> <div id="app"> <h3> <span v-if="track"> {{track.name}} - {{track.artistName}} <button @click.capture.stop="next">&raquo;</button> </span> <span v-else> Click to start... </span> </h3> <audio controls ref="audio":src="currentUrl":class="{ transparent: !currentUrl }" @ended="next" /> </div>

Answer 4

I have managed to make it work as follows (see above for the const):

function loadUtterance(utterance){
audio.src = audio/${utterance}.mp3;
var x = utteranceIndex;
document.getElementById("subtitle").innerText = subtitle[x];
} 

Thank you for the comments which gave me more ideas.