Question

所以我按下了这些按钮，当按下播放声音时，我想制作一个按钮，按下时会让这些声音循环。我不知道如何正确解释这一点，所以生病只是显示代码

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;在按下按钮的每个功能下，无需实际写入（名称）.loop;每个人？

Answer 1

试试这个

JS：

function play(){
    var audio = document.getElementById("audio");
    audio.play();
}

HTML5：

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

Answer 2

您应该查看bind方法：https://www.smashingmagazine.com/2014/01/understanding-javascript-function-prototype-bind/

function playAudio(type) {
   aud.src = (type === '1') ?
     "aud1.mp3" :
     (type === "2") ? 
     "aud2.mp3" :
     "aud3.mp3";

   aud.play();
}

document.getElementById('aud1button').addEventListener('click', playAudio.bind("1"));
document.getElementById('aud2button').addEventListener('click', playAudio.bind("2"));
document.getElementById('aud3button').addEventListener('click', playAudio.bind("3"));

Answer 3

你可以这样做：

// 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>

这样，您就不必为每个音频创建新功能。只需在“names”数组中添加一个新的音频文件，然后添加一个带有特殊类的按钮（audio-button-toggle-play以切换音频的播放状态）和一个包含该位置的data-audio-src属性。音频文件。

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

3 个答案: