时间戳

首页 > 解决方案 > 为什么一次播放所有声音而不是一次播放一个？

javascript - 为什么一次播放所有声音而不是一次播放一个？

问题描述

所以我正在尝试制作一个生成音乐的应用程序，但我似乎无法弄清楚如何一次只播放一种声音。当我单击生成按钮时，它会一次播放所有声音，而不是一次播放一个。这是我的代码：

var melody_notes = [A3, A4, A5, A6, B3, B4, B5, B6, C3, C4, C5, C6, D3, D4, D5, D6, E3, E4, E5, E6, F3, F4, F5, F6, G3, G4, G5, G6];

function generate() {

    for (var a = 0; a < 100; a++) {
        for (var i = 0; i < 1; i++) {
            var pick = Math.floor(Math.random() * melody_notes.length);
            var note = new Audio(melody_notes[pick]);
            note.play();
        }
    }
}

所以上面的列表是声音文件，然后它会随机选择一个并播放它。第一个 for 循环是歌曲中的音符数量，内部 for 循环是一起播放的音符数量。但是当我按下激活该功能的按钮时，会立即播放所有音符。有没有办法解决这个问题？

标签： javascriptarraysaudio

解决方案

你可以创建一个 Promise 并在前一个声音解决时开始下一个声音。

const audios = [
  'https://dl.dropboxusercontent.com/s/1cdwpm3gca9mlo0/kick.mp3', 
  'https://dl.dropboxusercontent.com/s/h2j6vm17r07jf03/snare.mp3',
  'https://dl.dropboxusercontent.com/s/1cdwpm3gca9mlo0/kick.mp3', 
  'https://dl.dropboxusercontent.com/s/h2j6vm17r07jf03/snare.mp3'
];

async function playSounds(arr) {
  for (let i = 0; i < arr.length; i++) {
    await new Promise((resolve) => {
      sound = new Audio(arr[i]);
      sound.onended = resolve;
      sound.play();
    });
  }
}
<button onclick="playSounds(audios);">play</button>

推荐阅读