如何显示多个数组项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;
}

这是一个学习外国文本的练习。我想要

1. 加载并播放数组中的第一个话语；
2. 显示话语的转录（字幕）；
3. 显示英文翻译。然后播放下一段话。

我添加了“分析”数组以帮助可视化我正在尝试做的事情。最终，我想仅在事件监听器（学生的点击请求）之后显示翻译（和分析）。

问题：翻译项目不与此脚本一起加载。 我是一名长期退休的语言学家，正在寻求一些指导。谢谢。

Answer 1

一种可行的方法可以围绕由generator function 创建的generator 构建，并产生一个从最初提供的所有三个的下一个/当前索引创建的话语项复合数组...

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>

Answer 2

我已经设法使它工作如下（见上面的常量）：

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

感谢 cmets 给了我更多的想法。

Answer 3

根据您的描述，可能有不同的原因：

如果你打算显示翻译/分析的整个数组，问题是translation.innerText实际上是在操作你上面声明的数组而不是html元素，所以如果你想要显示翻译的html元素的id是“翻译”，只需将您的功能更改为以下即可解决您的问题：

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

或者如果您只想显示具有相同 utteranceIndex 的翻译/分析，那么您代码中的函数似乎缺少一对输入参数（翻译、分析），请尝试以下代码：

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