Home > @unseenco/backstage-core > ISequence > attachAudio

ISequence.attachAudio() method

Attaches an audio source to the sequence. Playing the sequence automatically plays the audio source and their times are kept in sync.

Signature:

attachAudio(args: IAttachAudioArgs): Promise<{
        decodedBuffer: AudioBuffer;
        audioContext: AudioContext;
        destinationNode: AudioNode;
        gainNode: GainNode;
    }>;

Parameters

Parameter	Type	Description
args	IAttachAudioArgs

Returns:

Promise<{ decodedBuffer: AudioBuffer; audioContext: AudioContext; destinationNode: AudioNode; gainNode: GainNode; }>

A promise that resolves once the audio source is loaded and decoded

Learn more [here](https://backstage.unseen.co/docs/guide/manual/audio).

Example 1

Usage:

// Loads and decodes audio from the URL and then attaches it to the sequence
await sheet.sequence.attachAudio({source: "http://localhost:3000/audio.mp3"})
sheet.sequence.play()

// Providing your own AudioAPI Context, destination, etc
const audioContext: AudioContext = {...} // create an AudioContext using the Audio API
const audioBuffer: AudioBuffer = {...} // create an AudioBuffer
const destinationNode = audioContext.destination

await sheet.sequence.attachAudio({source: audioBuffer, audioContext, destinationNode})

Note: It's better to provide the audioContext rather than allow Backstage.js to create it. That's because some browsers [suspend the audioContext](https://developer.chrome.com/blog/autoplay/\#webaudio) unless it's initiated by a user gesture, like a click. If that happens, Backstage.js will wait for a user gesture to resume the audioContext. But that's probably not an optimal user experience. It is better to provide a button or some other UI element to communicate to the user that they have to initiate the animation.

Example 2

Example:

// html: <button id="#start">start</button>
const button = document.getElementById('start')

button.addEventListener('click', async () => {
  const audioContext = ...
  await sheet.sequence.attachAudio({audioContext, source: '...'})
  sheet.sequence.play()
})