javascript - 单击按钮时播放音频(无循环)

Question

我有 64 个按钮，所有按钮都有一个单独的音频文件。其中一半我想在单击时循环播放音频，其他人只播放一次文件。目前，我的代码强制所有代码循环，因此我需要帮助找到解决方案，以便某些循环，而另一些则不循环。

(我已编辑示例以仅显示 3 个按钮，我希望按钮 3 (FX) 每次点击仅播放一次)。

JS:

var audio = [];
var isPlaying = [];

function sound(id){
  if(isPlaying[id]){
    audio[id].pause();
    isPlaying[id] = false;
    audio[id].currentTime = 0;
  }
  else{
    audio[id].play();
    isPlaying[id] = true;
    audio[id].currentTime = 0;
  }
}

function createAudio(src,i){
  audio[i] = new Audio();
  audio[i].src = src;
  audio[i].loop = true;
  isPlaying[i] = false;
}

var mySources = ['audio/drums/1.wav','audio/bass/2.wav','audio/fx/3.wav'];

HTML:

<img class="button" src="images/button.png" onclick="sound(1);"/>
<img class="button" src="images/button.png" onclick="sound(2);"/>
<img class="button" src="images/button.png" onclick="sound(3);"/>

我知道目前所有 3 个按钮都链接到设置为循环的声音函数，但是我不知道如何在没有循环的情况下创建另一个函数，因为循环在 createAudio 中声明并使用这是来自其他地方的代码，我不确定它是如何工作的。

Answer 1

您可以在播放声音时(而不是在创建声音时)在同一函数中设置声音是否为循环。这还允许您有时循环某种声音，有时只播放一次，而不是总是使用同一种声音。

JS:

function sound(id, loop){
  audio[id].loop = loop;
  /* ... */
}

function createAudio(src,i){
  audio[i] = new Audio();
  audio[i].src = src;
  isPlaying[i] = false;
}

HTML:

<img class="button" src="images/button.png" onclick="sound(1, true);"/>
<img class="button" src="images/button.png" onclick="sound(2, false);"/>
<img class="button" src="images/button.png" onclick="sound(3, true);"/>