如何使用AudioContext播放多个音频片段

Question

我要做的是使用AudioContext按顺序播放多个音频片段，以便音频流畅，但我做错了什么。我看到的大多数文档只展示了如何使用合成器或播放1音频。我该如何用纯javascript创建它？

想法是：

1. 创建音频上下文
2. 加载所需的音频作为缓冲区
3. 按顺序排列音频
4. 让用户播放/暂停/停止音频
5. 让用户控制音量和速度

例如：

• Audio1从0秒开始，运行5秒
• Audio2从5秒开始，运行5秒
• Audio3从20秒开始，运行10秒

<button id="AudioLoad">Load</button>
<button id="AudioPlay">Play</button>
<button id="AudioPause">Pause</button>
<button id="AudioStop">Stop</button>
<input id="AudioVolume" type="range" step="0.1" min="0.1" max="1.0" value="0.4">
<script>
const myPlayerLoad = (async () => {
const audioContext = new window.AudioContext();
const gainNode = audioContext.createGain();
// load audio buffer from server
const audioBuffer1 = await fetch('https://assets.mixkit.co/sfx/preview/mixkit-game-show-suspense-waiting-667.mp3').then(r => r.arrayBuffer());
const audioBuffer2 = await fetch('https://assets.mixkit.co/sfx/preview/mixkit-retro-game-emergency-alarm-1000.mp3').then(r => r.arrayBuffer());
const audioBuffer3 = await fetch('https://assets.mixkit.co/sfx/preview/mixkit-trumpet-fanfare-2293.mp3').then(r => r.arrayBuffer());
// create audio context
const audioContext1 = await audioContext.decodeAudioData(audioBuffer1);
const audioContext2 = await audioContext.decodeAudioData(audioBuffer2);
const audioContext3 = await audioContext.decodeAudioData(audioBuffer3);
// create audio source
const audioClip1 = audioContext.createBufferSource();
audioClip1.buffer = audioContext1;
audioClip1.connect(gainNode);
const audioClip2 = audioContext.createBufferSource();
audioClip2.buffer = audioContext2;
audioClip2.connect(gainNode);
const audioClip3 = audioContext.createBufferSource();
audioClip3.buffer = audioContext3;
audioClip3.connect(gainNode);
// connect volume control
gainNode.connect(audioContext.destination);
// play audio at time
audioClip1.noteOn(0);
audioClip2.noteOn(5);
audioClip3.noteOn(20);
// controls
document.getElementById('AudioPlay').addEventListener('click',(clickEvent)=>{ /* code */ });
document.getElementById('AudioPause').addEventListener('click',(clickEvent)=>{ /* code */ });
document.getElementById('AudioStop').addEventListener('click',(clickEvent)=>{ /* code */ });
document.getElementById('AudioVolume').addEventListener('change',(changeEvent)=>{ /* code */ });
});
document.getElementById('AudioLoad').addEventListener('click',(clickEvent)=>myPlayerLoad());
</script>

Answer 1

播放多个音乐文件不是问题，但如果您创建一个预加载程序，下载文件并在程序的其余部分运行之前准备使用，则会有更好的体验。

这是我创建的一个链接(在一位伟人的帮助下！(，用于加载我的游戏资产，包括声音文件(比其他文件需要更多的准备(文件加载器

我使用它来加载和准备许多文件类型。load()方法是您用来加载文件的方法。它创建了一个承诺，在该承诺实现后，您可以运行程序的其余部分。它在整个过程中都有全面的文档记录，您将在文件顶部看到声音文件依赖于导入的函数makeSound()，您可以在lib文件夹和assets file中找到该函数。makeSound()函数的功能远远超出了您的需要，但您可能会在其中找到一些有趣的技术。这本书的作者和作者都被认为是贯穿始终的。

希望这能有所帮助。如果你有任何问题，请毫不犹豫地问。