Javascript 通过单击按钮将代码添加到JS中

所以我有这些按钮，当按下时会播放声音，我想做一个按钮，当按下时会让声音循环。我不知道如何正确地解释这个，所以我只展示代码

function aud1play() {
  aud1.src = "aud1.mp3";
  aud1.play();
}
document.getElementById('aud1button').addEventListener('click', aud1play);

function aud2play() {
  aud2.src = "aud2.mp3";
  aud2.play();
}
document.getElementById('aud2button').addEventListener('click', aud2play);

function aud3play() {
  aud3.src = "aud3.mp3";
  aud3.play();
}
document.getElementById('aud3button').addEventListener('click', aud3play);

是否有方法获取名称（aud1、aud2、aud3）和put（name.loop）；在每个函数下按一个按钮，而不必实际写入（name）.loop；每个人都可以吗？

试试这个

JS:

HTML5：

<audio controls loop id="audio">
  <source src="horse.mp3" type="audio/mpeg">
</audio>

---

您应该查看

bind

方法：

---

你可以这样做：

// create an object containing all audio objects
var audios = (function () {
  var names = ['aud1.mp3', 'aud2.mp3', 'aud3.mp3'];
  var audios = {};

  for (var index in names) {
    var audio = audios[names[index]] = new Audio();
    audio.src = names[index];
  }

  return audios;
})();

function toggleAudioPlay () {
  // "this" refers to the button that was clicked
  var name = this.getAttribute('data-audio-src'); // read the button's "data-audio-src" attribute
  if (!audios.hasOwnProperty(name)) {
    // audio doesn't exist
    return;
  }
  var audio = audios[name];
  audio.src = name;
  // toggle the play state
  if (audio.paused) {
    audio.play();
  } else {
    audio.pause();
  }
}

function toggleAudioLoop () {
  var name = this.getAttribute('data-audio-src');
  if (!audios.hasOwnProperty(name)) {
    // audio doesn't exist
    return;
  }
  var audio = audios[name];
  audio.loop = !audio.loop;
}

document.querySelector('.audio-button-toggle-play').forEach(function (button) {
  button.addEventListener('click', toggleAudioPlay);
});

document.querySelector('.audio-button-toggle-loop').forEach(function (button) {
  button.addEventListener('click', toggleAudioLoop);
});

现在，您可以拥有以下HTML：

<button class="audio-button-toggle-play" data-audio-src="aud1.mp3">Play/Pause the first audio</button>
<button class="audio-button-toggle-play" data-audio-src="aud2.mp3">Play/Pause the second audio</button>
<button class="audio-button-toggle-play" data-audio-src="aud3.mp3">Play/Pause the third audio</button>
<button class="audio-button-toggle-loop" data-audio-src="aud1.mp3">Enable/Disable looping of the first audio</button>
<button class="audio-button-toggle-loop" data-audio-src="aud2.mp3">Enable/Disable looping of the second audio</button>
<button class="audio-button-toggle-loop" data-audio-src="aud3.mp3">Enable/Disable looping of the third audio</button>

播放/暂停第一个音频
播放/暂停第二个音频
播放/暂停第三个音频
启用/禁用第一个音频的循环
启用/禁用第二个音频的循环
启用/禁用第三个音频的循环

---

这样，您就不必为每个音频创建新功能。只需在“名称”数组中添加一个新的音频文件，并添加一个带有特殊类的按钮（

audiobutton toggle play

以切换音频的播放状态）和一个包含音频文件位置的

data audio src

属性。

是否希望在单击一个按钮时播放所有三个音频？因此，基本上您要问的是如何检测声音何时播放完毕并启动另一个声音，您需要连续播放与按钮相关联的音乐，直到单击下一个按钮为止？这样，您可以通过使用

bind

函数为每个事件处理程序传入文件类型或文件名，重新使用音频播放器和

playaudo

函数。

// create an object containing all audio objects
var audios = (function () {
  var names = ['aud1.mp3', 'aud2.mp3', 'aud3.mp3'];
  var audios = {};

  for (var index in names) {
    var audio = audios[names[index]] = new Audio();
    audio.src = names[index];
  }

  return audios;
})();

function toggleAudioPlay () {
  // "this" refers to the button that was clicked
  var name = this.getAttribute('data-audio-src'); // read the button's "data-audio-src" attribute
  if (!audios.hasOwnProperty(name)) {
    // audio doesn't exist
    return;
  }
  var audio = audios[name];
  audio.src = name;
  // toggle the play state
  if (audio.paused) {
    audio.play();
  } else {
    audio.pause();
  }
}

function toggleAudioLoop () {
  var name = this.getAttribute('data-audio-src');
  if (!audios.hasOwnProperty(name)) {
    // audio doesn't exist
    return;
  }
  var audio = audios[name];
  audio.loop = !audio.loop;
}

document.querySelector('.audio-button-toggle-play').forEach(function (button) {
  button.addEventListener('click', toggleAudioPlay);
});

document.querySelector('.audio-button-toggle-loop').forEach(function (button) {
  button.addEventListener('click', toggleAudioLoop);
});

<button class="audio-button-toggle-play" data-audio-src="aud1.mp3">Play/Pause the first audio</button>
<button class="audio-button-toggle-play" data-audio-src="aud2.mp3">Play/Pause the second audio</button>
<button class="audio-button-toggle-play" data-audio-src="aud3.mp3">Play/Pause the third audio</button>
<button class="audio-button-toggle-loop" data-audio-src="aud1.mp3">Enable/Disable looping of the first audio</button>
<button class="audio-button-toggle-loop" data-audio-src="aud2.mp3">Enable/Disable looping of the second audio</button>
<button class="audio-button-toggle-loop" data-audio-src="aud3.mp3">Enable/Disable looping of the third audio</button>