Question

我试图通过循环数组并将数组拆分到每个数组中来播放声音，然后使用switch case来检测数组中的内容。功能守门员（）{

number2 = get.num;
sNumber = number2.toString();
output = [];



for ( i = 0, len = sNumber.length; i < len; i ++) {
    output.push(+sNumber.charAt(i));
    console.log(output);

    switch (output[i]){
        case 0:
        console.log('0');
        audio0 = new Audio('logo/Q0.wav');
        audio0.play();
        break;
        case 1:
        console.log('1');
        audio1 = new Audio('logo/Q1.wav');
        audio1.play();
        break;
        case 2:
        console.log('2');
        audio2 = new Audio('logo/Q2.wav');
        audio2.play();
        break;
        case 3:
        console.log('3');
        audio3 = new Audio('logo/Q3.wav');
        audio3.play();
        break;
        case 4:
        console.log('4');
        audio4 = new Audio('logo/Q4.wav');
        audio4.play();
        break;
        case 5:
        console.log('5');
        audio5 = new Audio('logo/Q5.wav');
        audio5.play();
        break;

    }
}}

它的功能很好，但显然声音太快了。有什么解决方法可以解决这个问题吗？

Answer 1

我假设你想听到彼此之后的声音？

这不是这样的。让我们说数组中的第一个数字是：0 所以声音0被播放但是，因为你遍历数组，然后你到达下一个数字，例如。 2：声音2在播放后立即播放在开始下一个play（）之前，循环不会等待第一个声音结束。

你可以做的是修改循环以等待音频结束事件例如：

var audio0 = document.getElementById("myAudio");
audio0.onended = function() {
  alert("The audio has ended");
};

Answer 2

尝试使用计时器：

for (var i = 1; i <= 3; i++) {
    (function(index) {
        setTimeout(function() { alert(index); }, i * 1000);
    })(i);
}

使用 setTimeout 功能

Answer 3

尝试使用音频精灵。我确定有一个应用程序或以编程方式执行某些任务，但要注意步骤1和2是手动完成的。

获取一组音频文件，并使用Audacity或online service将它们合并为一个文件。
接下来，获取音频文件每个剪辑的开始时间并将它们存储在一个数组中。
以下Demo将获取文件和数组，生成HTML布局，为每个与数组参数对应的剪辑创建一个按钮。因此，当单击按钮时，它将仅播放音频精灵（音频文件）的剪辑。
本演示中的音频精灵编辑得不是很好，我只是为了演示一切是如何运作的。时间依赖于timeupdate事件，该事件检查每250ms给出或接受的播放时间。因此，如果您想要更准确的开始和结束时间，请尝试在剪辑之间留出250毫秒的间隔。

在演示中评论的详细信息

演示

＆＃13;

// Store path to audio file in a variable
var xFile = 'https://storage04.dropshots.com/photos7000/photos/1381926/20180318/175955.mp4'

// Store cues of each start time of each clip in an array
var xMap = [0, 1.266, 2.664, 3.409, 4.259,4.682,  5.311, 7.169, 7.777, 9.575, 10.88,11.883,13.64, 15.883, 16.75, 17, 17.58];

/* Register doc to act when the DOM is ready but before the images
|| are fully loaded. When that occurs, call loadAudio()
*/
document.addEventListener('DOMContentLoaded', function(e) {
  loadAudio(e, xFile, xMap);
});

/* Pass the Event Object, file, and array through
|| Make a Template Literal of the HTML layout and the hidden
|| <audio> tag. Interpolate the ${file} into the <audio> tag.
|| Insert the TL into the <body> and parse it into HTML.
== Call generateBtn() function...
*/
function loadAudio(e, file, map) {
  var template = `
<fieldset class='set'>
  <legend>Sound FX Test Panel</legend>
</fieldset>
<audio id='sndFX' hidden>
  <source src='${file}' type='audio/wav'>
</audio>`;
  document.body.insertAdjacentHTML('beforeend', template);
  generateBtn(e, map);
}

/* Pass the Event Object and the array through
|| Reference fieldset.set
|| create a documentFragment in order to speedup appending
|| map() the array...
|| create a <button>
|| Set btn class to .btn
|| Set button.btn data-idx to the corresponding index value of
|| map array.
|| Set button.btn text to its index number.
|| Add button.btn to the documentFragment...
|| return an array of .btn (not used in this demo)
== Call the eventBinder() function...
*/
function generateBtn(e, map) {
  var set = document.querySelector('.set');
  var frag = document.createDocumentFragment();
  map.map(function(mark, index, map) {
    var btn = document.createElement('button');
    btn.className = 'btn';
    btn.dataset.idx = map[index];
    btn.textContent = index;
    frag.appendChild(btn);
    return btn;
  });
  set.appendChild(frag);
  eventBinder(e, set, map);
}

/* Pass EventObject, fieldset.set, and map array through
|| Reference the <audio> tag.
|| Register fieldset.set to the click event
|| if the clicked node (e.target) class is .btn...
|| Determine the start and end time of the audio clip.
== Call playClip() function
*/
function eventBinder(e, set, map) {
  var sFX = document.getElementById('sndFX');
  set.addEventListener('click', function(e) {
    if (e.target.className === 'btn') {
      var cue = parseFloat(e.target.textContent);
      var start = parseFloat(e.target.dataset.idx);
      if (cue !== (map.length - 1)) {
        var end = parseFloat(e.target.nextElementSibling.dataset.idx);
      } else {
        var end = parseFloat(sFX.duration);
      }
      playClip.call(this, sFX, start, end);
    } else {
      return false;
    }
  });
}

/* Pass the reference to the <audio> tag, start and end of clip
|| pause audio
|| Set the currentTime to the start parameter
|| Listen for timeupdate event...
|| should currentTime meet or exceed the end parameter...
|| pause <audio> tag.
*/
function playClip(sFX, start, end) {
  sFX.pause();
  sFX.currentTime = start;
  sFX.play();
  sFX.ontimeupdate = function() {
    if (sFX.currentTime >= end) {
      sFX.pause();
    }
  }
  return false;
}

＆＃13;

在内部使用开关盒进行循环播放音频太快

3 个答案:

演示