Question

我正在尝试更改按钮单击时的音频文件并收到错误

未捕获的TypeError：audio.load不是函数

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

如果没有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

.load()标记上没有<source>个事件，它位于<audio>标记上 - 更新您的代码，以便在父load()上调用<audio>标签，它应该工作。

Answer 2

好吧，我认为您尝试按<audio>属性访问id元素，但您还没有将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();

按钮点击更改音频文件

2 个答案: