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);"/>

按下按钮播放音频（无循环）

1 个答案:

JS：

HTML：