p5 Using the createAudio callbacks - p5.js

Question

TL;DR: How can I access the audio instances created in the callback of createAdio?
I have the following code in my p5 sketch
// in preload
sound_a = createAudio('sound_a.mp3');
// in setup
sound_a.loop();
sound_a.volume(0.2);
sound_a.play();
This does what I want it to do. However, in my current circumstances, I have multiple audio files for which I wanted to call the same functions. I would want to use a callback to apply the loop, volume and play. My intended behavior is something like this:
// in preload - this would just be a loop
sound_a = createAudio('sound_a.mp3', audio_callback);
sound_b = createAudio('sound_b.mp3', audio_callback);
.....
sound_z = createAudio('sound_z.mp3', audio_callback);
function audio_callback(audio) {
audio.loop();
audio.volume(0.2);
audio.play();
}
However, the callback is not passed any arguments (i.e., console.log(audio) returns undefined and audio.loop() throws the expected errors.). How can I access the audio created in the callback?

Answer 1

Whenever you're doing sound_a, sound_b, ... sound_z, you probably want an array. You can then use loops to avoid repetition and solve the problem you're having by binding an index i to each sound:
const urls = [
"https://upload.wikimedia.org/wikipedia/commons/f/f7/BILIIE_EILISH.ogg",
"https://upload.wikimedia.org/wikipedia/commons/7/7f/Bluetooth.ogg",
"https://upload.wikimedia.org/wikipedia/commons/8/8d/Bismarck71_English_Voice_Sample_%28North_Wind_%26_Sun%29.ogg",
];
let sounds;
function preload() {
sounds = urls.map((url, i) =>
createAudio(url, () => {
sounds[i].volume(0.2);
// prohibited due to autoplay policy
// sounds[i].loop();
// sounds[i].play();
})
);
}
function setup() {}
function mousePressed() {
sounds.forEach(e => {
e.loop();
e.play();
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js"></script>
<h1>Click anywhere to play</h1>
<h4>File attribution:</h4>
<p>
Laidaiturrate, CC BY-SA 4.0, via Wikimedia Commons
</p>
<p>
Sorondo27, CC BY-SA 4.0, via Wikimedia Commons
</p>
<p>
Bismarck71, CC BY-SA 4.0, via Wikimedia Commons
</p>
You could also put the audio object in a data structure alongside each sound rather than in a separate array:
const sounds = [
{url: "https://upload.wikimedia.org/wikipedia/commons/f/f7/BILIIE_EILISH.ogg"},
{url: "https://upload.wikimedia.org/wikipedia/commons/7/7f/Bluetooth.ogg"},
{url: "https://upload.wikimedia.org/wikipedia/commons/8/8d/Bismarck71_English_Voice_Sample_%28North_Wind_%26_Sun%29.ogg"},
];
function preload() {
sounds.forEach(e => {
e.audio = createAudio(e.url, () => {
e.audio.volume(0.2);
// prohibited due to autoplay policy
// e.audio.loop();
// e.audio.play();
})
});
}
function setup() {}
function mousePressed() {
sounds.forEach(e => {
e.audio.loop();
e.audio.play();
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js"></script>
<h1>Click anywhere to play</h1>
<h4>File attribution:</h4>
<p>
Laidaiturrate, CC BY-SA 4.0, via Wikimedia Commons
</p>
<p>
Sorondo27, CC BY-SA 4.0, via Wikimedia Commons
</p>
<p>
Bismarck71, CC BY-SA 4.0, via Wikimedia Commons
</p>
You might wish to open an issue or a PR for implementing the audio as a parameter to the callback.