如何在javascript中使用音频按钮的多个来源

<audio id="audioButton" controls>
  <source src="audio1.mp3" type="audio/mpeg">
  <source src="audio2.ogg" type="audio/ogg">
  Your browser does not support the audio element.
</audio>

const audioButton = document.getElementById('audioButton');

audioButton.addEventListener('play', function() {
  console.log('音频播放中...');
});

audioButton.addEventListener('pause', function() {
  console.log('音频暂停...');
});

// 添加其他事件监听器，如ended、volumechange等

const audioSources = [
  { src: 'audio1.mp3', type: 'audio/mpeg' },
  { src: 'audio2.ogg', type: 'audio/ogg' },
  // 添加其他音频来源
];

function changeAudioSource() {
  const sourceElements = audioButton.getElementsByTagName('source');

  // 移除原有的音频来源
  while (sourceElements.length > 0) {
    sourceElements[0].parentNode.removeChild(sourceElements[0]);
  }

  // 添加新的音频来源
  audioSources.forEach(function(source) {
    const sourceElement = document.createElement('source');
    sourceElement.src = source.src;
    sourceElement.type = source.type;
    audioButton.appendChild(sourceElement);
  });
}

// 调用changeAudioSource函数来改变音频按钮的来源
changeAudioSource();