如何根据文本名称播放本地音频？避免冗余case/if语句方案

问题分析 #

你当前通过switch语句匹配单词播放音频，需要编写大量case分支，且直接调用字符串变量的play()方法无效——因为字符串不是HTML音频元素对象，只有HTMLAudioElement实例才具备play()方法。

优化方案 #

方案1：复用现有音频标签，通过ID获取元素 #

利用你已定义的<audio>标签（ID与单词完全一致），直接通过单词文本获取对应音频元素并播放：

修改后的播放函数

function playRussianAudio() {
  // 注意：rus1是显示文本的元素，用textContent获取内容而非value
  const word = document.getElementById("rus1").textContent.trim();
  const audioElement = document.getElementById(word);
  
  if (audioElement) {
    audioElement.play();
  } else {
    // 播放错误提示音频
    document.getElementById("error").play();
  }
}

结合词典逻辑的调用示例

在你的find()函数更新完文本后，可给同义词元素绑定点击播放事件：

function find() {
  const word = document.getElementById("input").value.trim();
  let eng1 = "", rus1 = "";

  switch(word) {
    case "cat": case "кошка": 
      eng1 = "cat"; 
      rus1 = "кошка"; 
      break;
    case "dog": case "собака": 
      eng1 = "dog"; 
      rus1 = "собака"; 
      break;
    default: 
      eng1 = ""; 
      rus1 = ""; 
  }

  document.getElementById("eng1").innerHTML = eng1;
  document.getElementById("rus1").innerHTML = rus1;

  // 给同义词元素绑定播放事件
  document.getElementById("synonym1").onclick = function() {
    const targetWord = this.textContent.trim();
    const audio = document.getElementById(targetWord);
    audio?.play() || document.getElementById("error").play();
  };
}

方案2：用对象映射音频路径，动态创建音频元素 #

如果不想提前定义所有<audio>标签，可维护一个单词与音频路径的映射表，动态创建音频元素播放：

实现代码

// 全局维护音频映射表，可根据需求扩展
const audioPathMap = {
  "dog": "../audio/english/dog.mp3",
  "cat": "../audio/english/cat.mp3",
  "собака": "../audio/russian/dog.mp3",
  "кошка": "../audio/russian/cat.mp3",
  "error": "../audio/error.mp3"
};

function playAudio(word) {
  const audioSrc = audioPathMap[word.trim()];
  if (audioSrc) {
    const audio = new Audio(audioSrc);
    audio.play();
  } else {
    // 播放错误音频
    new Audio(audioPathMap.error).play();
  }
}

// 调用示例：点击同义词时播放
document.getElementById("synonym2").addEventListener("click", function() {
  playAudio(this.textContent);
});

关键说明 #

• 字符串本身没有play()方法，必须获取或创建HTMLAudioElement实例才能调用播放方法；
• 若使用方案1，需确保<audio>标签的ID与单词文本完全匹配（包括大小写、特殊字符）；
• 方案2更适合单词量较大的场景，无需提前编写大量HTML音频标签，仅需维护映射表即可。

内容的提问来源于stack exchange，提问作者george roberts