I would like to sequence musical events with web audio, to do a simple musical piece. I'm just gettin started with web audio & I'm looking for tips or pointers in the right direction to be able to sequence simple events one after the other. I know how to make a playable synth with web audio but what i want is to make a small composition:
Example of what I mean by sequencing events (or making a composition):
1- at time 0 : 1 oscillator is paying a part that will end after 3 minutes.
2- after 1 minute another oscillator starts another part that will stop after 30 sec.
3- after 2 minutes an audio file starts (let's say a prerecorded bass)
How do we sequence (start & stop) different parts at a different time ?
I know how to make a synth with web audio but i would like to time events in a timeline.
Where should I start ?
I guess my question is "what is the best way to trigger a function a certain amount of time after another one or when one is finished with Web Audio?"
thx!
Related
I really struggled to phrase the title, which shows how lost I am. I consider myself a good web developer, but structures like this break my head :D
–––
The game
I'm remaking a little ear-training game of mine (http://twelvenotes.co/) with Nuxt3.
The game features 8 rounds of questions. Each round plays 2 musical notes and the player must tell which one is higher.
The interactive concept for the new version has changed. The game does not start automatically, but waits for a "Start now" input from the Playeyr. Each round the two notes play automatically in sequence. The Player has two options now:
Click on one note to lock in the answer to which note he thinks is higher
Replay the two notes in the same sequence, but lose "1 life" (or "extra listen") of 3
Answering a question shows an animation indicating if Player is right or wrong. After the animation is completed the game should move to the next round automatically and also start the round automatically, after the animated transition to the new round is done.
The whole game and each round individually is timed with a visible stop watch which will influence the final score.
After 8 rounds the Player is presented with an end screen showing the performance and a score.
The problem
As of right now, Creating the array of playable rounds, locking in the answer, moving to the next round, playing notes, replaying notes are all separate functions.
Now to the question: Whats the best way to control all these functions? Especially with timeouts needed for animations and playing notes etc. it's hard to structure which function does what and who tells it when to do it.
Who controls when we move to the next round and when we will start that round? Moving to the next round should only be possible when the current round has been answered. But should all of this be the job of moveToNextRound()? And who actually starts the round as in playing the notes, starting a stopwatch for this round etc. – And who stops the timer of the played round when the round has been answered? Is that a job for moveToNextRound() or startRound(roundIndex) or is that the job of a new function finishRound() - but who then calls finishRound()? Or should it be finishCurrentRound(). When a question is answered we need time for an animation telling the player if his answer was right or not and so on and so forth...
... I guess you get the picture. Structuring this is not easy for me. While doing it I constantly go back and forth between which function does what.
The question
Can you guys point me to best practices or resources in that field? Only thing I can think of googling is: "Gamecontroller"... which obviously only gives you results for gaming console gamepads.
Thanks!
I am making an app for a book, and part of it involves audio. The book is broken up into chapters and each chapter has about 10 sections. The sound engineer who made the audiobook broke the files up into chapters, but the book itself is broken up into readable sections. Therefore I need to way to play only a specific part of the chapter.
I know you can use URLs to specify timestamps using ...mp3#t=00:03:26. But I'm not exactly sure of the behaviour the download will play after.
The starting of the file works fine, but I'm worried about what happens when it gets to the end of a section. I suppose I could put an event listener on the audio element to check to see if the time has reached the next section's timestamp. The issue I'm facing is that involves trying to conserve bandwidth because that's our main cost.
If the browser decides to download the rest of the audio file, then let's say you're at section 3 and your browser downloads section 4,5, and 6. Then when you go to section 4 it re-downloads a part of what it already downloaded.
There are a number of 'other' solutions but what I mainly want to is understand how the browser determines the timestamp at which it 'stops' downloading. I assume that when it is playing live, it only downloads x amount of seconds in advance. If this is a low number, it's not a big deal. But if the browser skips ahead it could incur a lot of costs, in which case I would need to 'cap' it somehow.
The audio engineer doesn't want to break the files up into sections because then there are quality losses for re-compression.
I'm trying to figure out how to play a video with HTML5/JS but to play one part of the video and then another part of the video without any sort of delay to "seek" to that part of the video.
I've tried using different libraries like video.js to set currentTime but there is a delay for a second or so.
I'm looking to do this without any delay at all - seamlessly as if the two parts of the video were right next to each other.
I'm assuming this should be possible - even if by streaming chunks of the video - for example if I want to stream the chunks of the first 10 seconds then the chunks for the last 10 seconds.
I have some javascript that plays audio from several .wav files using the standard audio commands e.g.:
var audio = new Audio('audio_file.wav');
audio.play();
When the user plays two sounds in quick succession, the sounds start to interfere with each other and get distorted/strange sounding. Notably, when I just play the files in a media player simultaneously, this does not happen - it's simply the two sounds playing at the same time without any distortion. Is this a known thing that happens when playing audio in js, and is there are way to solve it so that multiple sounds playing simultaneously do not cause distortions in one another? Any help would be great!
You need to reduce the volume of the sound you're playing.
Multiple sounds are mixing together, periodically "clipping"... pushing the sample values beyond what can be represented in your system's audio sample format.
Try something like this:
audio.volume = 0.6;
Now, if you have times where you're usually only playing one sound at once, but some other times where you need multiple, simply reducing the volume may not be desirable, as playback might be too quiet.
For these times, you might consider switching to the Web Audio API and using a compressor:
https://developer.mozilla.org/en-US/docs/Web/API/DynamicsCompressorNode
This "squeezes" the loud parts and the quiet parts so that they all sound a bit similar, allowing you to reduce the output levels while still sounding loud when possible.
Each year I am part of a group that hosts a "Lawn Game Olympics." 6 different lawn games (boccee, ladder golf, washer toss etc...) and every year a different amount of teams shows up. The first year was an unbalanced schedule and the drama that ensued was ridiculous, so i've set out to create a balanced schedule with a program that we can just punch in the amount of teams.
The issue is everyone wants to play eachother, or everyone wants to play the same game the same amount of times with a great effort and playing every team.
The traditional round robin formula only works for 13 teams with 1 bye, as it just happens to rotate around 6 games. Using the technique below, its simple (with 14 being a bye, and each line being a different game)
13 teams never happens, just my luck, and i cannot figure anything out for any other amount of teams. I have seemingly tried everything. The closest i've gotten is using combinatorics to generate all the matchups then try to brute force them together tracking whos played who and what etc.. but that still never works before crashing.
The ideal scenario, is every team plays each game twice (12 games per team). The other scenario would be each team playing eachother, with what games they played being luck of the draw, as long as each game is played at least 1 time, and no game is played 3 times when another has been played once.
Does anyone know if this is even possible? If it is, can i get a point in the right direction?