单击按钮更改音频文件

Question

我试图通过单击按钮更改音频文件，但出现错误

Uncaught TypeError: audio.load is not a function

我的代码在下面，想法是按下按钮，然后音频文件就会改变。

没有 audio.load() 行，代码将运行和 src 更新，但音频不会改变。我错过了什么？

HTML:

<!DOCTYPE HTML>
<html>
<body>
  <br>
  <audio controls>
    <source src = "audio_file_1.mp3"
      id="audio" type="audio/mpeg">
    Your browser does not support the audio element!
  </audio>
  <br>
  <button onClick="changeAudio();">Change</button>
</body>
<script src="temp.js"></script>
</html>

Javascript:

// temp js
var a = 1;
function changeAudio() {
  var audio = document.getElementById('audio');
  if (a==1) {
    audio.src = 'audio_file_1.mp3';
    a = 2;
  }
  else {
    audio.src = 'audio_file_2.mp3';
    a = 1;
  }
  audio.load();
}

changeAudio();

（另外，如果有人知道我可以用来代替 audio_file_1.mp3 和 audio_file_2.mp3 的示例声音文件，我很乐意更新代码以便任何人都可以运行更容易）

编辑 WRT Rob M 的回答：

遇到同样问题的人，解决方法是改两行：

首先，在HTML代码中，<audio control>应该变成<audio control id="audio_id">

其次，在 javascript 代码中 audio.load() 应该变成 document.getElementById('audio_id').load();

Answer 1

<source> 标签上没有 .load() 事件，它在 <audio> 标签上 - 更新您的代码以在父 [=12] 上调用 load() =] 标签，它应该可以工作。

Answer 2

好吧，我认为您正试图通过其 id 属性访问 <audio> 元素，但您尚未将 id 属性设置为音频标签。一定是这样的

<audio id="audio" controls>
    <source src = "audio_file_1.mp3"
      id="track" type="audio/mpeg">
      Your browser does not support the audio element!
</audio>

并更改音频文件：

var a = 1;
function changeAudio() {
  var audio = document.getElementById('audio');
  if (a==1) {
    document.getElementById('track') = 'audio_file_1.mp3';
    a = 2;
  }
  else {
    document.getElementById('track') = 'audio_file_2.mp3';
    a = 1;
  }
  audio.load();
}

changeAudio();

单击按钮更改音频文件

Change audio file on button click

javascript

html5-audio