Menu
I apologize if my use of terminology is inaccurate. I'm a novice.
I have a long list of variables that are being shared/used by the function loop(). I am currently only calling loop() twice and only passing unique arguments for the sound file link. I am going to scale this code up so that I will have many calls to loop() but each with a unique set of arguments replacing my long shared list of variables. I think it will be a bit messy and confusing to have a long list of unique arguments for each call to loop(). Is there a way that I can keep things readable and organized by making different variable lists that can only be accessed by the parameters for a specific call to loop()? Something like this pseudocode:
argumentListA {
var sound = 'audio/sample.mp3'
var aStartMin = 2
var aStartMax = 200
var seekMin = .5
var seekMax = 2
}
argumentListB {
var sound = 'audio/sampleB.mp3'
var aStartMin = 0
var aStartMax = 100
var seekMin = 0
var seekMax = 1
}
loop(argumentListA);
loop(argumentListB);
I'd love to be able to define all of these variables/parameters in one place and then have them referenced in a simple way by the function call.
Updated working code below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="js/howler.core.js"></script>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<script>
var options = {
soundFileName: 'audio/sample.mp3',
aStartMin: 0,
aStartMax: 100,
probablilityAMin: 0,
probablilityAMax: 10,
probabilityThreshold: 3,
seekMin: 0,
seekMax: 1,
aFadeIn: 9000,
aFadeOut: 3000,
aPlayDurationMin: 5000,
aPlayDurationMax: 11000,
maxVolume: 1,
numberOfSounds: 0, // starting variable at 0
maxNumberOfSounds: 2
};
function logNumberOfSounds() { // passing options into this before is what broke code
options.numberOfSounds++;
console.log('Number of sounds is now: ' + options.numberOfSounds);
}
// calls the soundSorter function repeatedly so sounds will play
(function masterClock(options) {
setTimeout(function () {
soundSorter();
masterClock();
}, 2000);
}());
function soundSorter() { // passing options into this before is what broke code
var probabilityResult = Math.floor((Math.random() * options.probablilityAMax) + options.probablilityAMin);
if (probabilityResult > options.probabilityThreshold) {
loop(options);
}
else {
loop(options);
}
}
function loop(options) {
setTimeout(function () {
var playDuration = Math.floor((Math.random() * options.aPlayDurationMax) + options.aPlayDurationMin);
setTimeout(function () {
if (options.numberOfSounds < options.maxNumberOfSounds) { //Don't create more than the max number of sounds.
var sound = getSound(options.soundFileName);
var id2 = sound.play();
logNumberOfSounds();
console.log('probabilityThreshold is now: ' + options.probabilityThreshold);
//sound.volume(0); // don't think I need this since it's defined next as well as in getSound()
sound.fade(0, options.maxVolume, options.aFadeIn, id2); // FADE IN
setTimeout(function () {
sound.fade(options.maxVolume, 0, options.aFadeOut, id2); // FADE OUT
options.numberOfSounds--; //when it fades out subtract one
// Attempt to clean up the sound object
setTimeout(function () {
sound.stop();
sound.unload();
}, options.aFadeOut + 1000);
}, playDuration);
}
}, 0);
}, 0);
}
// PLAYER FOR MAIN SOUND FUNCTION /////////////////////////////
function getSound() {
return new Howl({
src: [options.soundFileName],
autoplay: true,
loop: true,
volume: 0,
fade: 0 // removes the blip
});
}
</script>
<script src="js/howler.core.js"></script>
<script src="js/siriwave.js"></script>
<script src="js/player.js"></script>
</body>
</html>
774
asked Oct 27 '25 06:10
Yes, it's quite common for things like this to be passed in as an options object.
function loop(options) {
// use options.sound, options.aStartMin, etc
}
You can then store the options object separately if you wanted:
var options1 = {
sound: 'audio/sample.mp3',
aStartMin: 2,
aStartMax: 200,
seekMin: .5,
seekMax: 2
}
In fact, this is so common that (depending on the browsers you aim on supporting, or your level of babel transpilation) there is support now for something called 'object destructuring' that makes this even easier:
function loop({ sound, aStartMin, aStartMax, etc }) {
// Can now use sound, aStartMin, aStartMax, etc as if they were plain arguments.
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
