Web API, it's a kind of magic.
I'll show you how to create a simple game using Web APIs and a bit of JavaScript.
[Music playing]
Hi!
Let's talk today about interaction between WebAudio API and JavaScript.
We'll use them in order to add some sound to our game.
I'm Anatol and you are watching the Good Parts of the FrontEnd development.
[Music playing]
In the previous episode, we've already created a frame for a simple game.
Interaction with users is a right moment to add the sound.
And I always believed a little music wouldn't do any harm.
Moreover, the musical accompaniment puts the gamers in the appropriate sentiments.
We're starting with a tutorial prepared by Boris Smus published on HTML5Rocks.
This brief manual describes what is needed to force your browser to play sound.
The Web Audio API involves handling audio operations inside an audio context for managing
and playing all the sounds.
Several sources - with different types of channel layout - are supported even within
a single context.
Basic audio operations are performed with audio nodes, which are linked together to
form an audio routing graph.
Audio nodes are linked into chains and simple webs by their inputs and outputs.
Interfaces that define audio sources for use in the Web Audio API:
OscillatorNode, AudioBuffer, AudioBufferSourceNode, MediaElementAudioSourceNode, MediaStreamAudioSourceNode
For our game I pick an AudioBuffer.
The interfaces below identify sound effects: BiquadFilterNode, ConvolverNode, DelayNode,
DynamicsCompressorNode, GainNode, StereoPannerNode, WaveShaperNode, PeriodicWave
Here my choice is GainNode.
Using nothing more than these three features we can create our own music and other sounds.
Let's dive in the code.
[Music playing]
Take a buffer-loader js file at html5rocks.
It already contains BufferLoader function with loadBuffer method.
Using an input url this method requests appropriate audio file and decodes its sound.
Then loadBuffer pushes the decoded data to a bufferList.
Create a separate module for sound mix.
It contains: audio fragments, the nodes and all other sounds.
During "init" function initialization an audio buffer is created.
Music as well as other sounds are loaded using BufferLoader module.
After loading completed the finishedLoading function saves the fragments.
Then it creates an audio context and enables the music.
Now it's time for createAudio function.
This function sets up an audio context as well as gainNode for Main Menu music.
Set a loop property to "true" for continuous music playback.
Use a gain node to create the effect of sound fade out.
Connect an audio fragment to an context and after that the context to a destination.
As the result the music in the background gradually fades in.
Now repeat the actions to add in-game music.
I use a cross-fade effect when one melody flows into another.
A capitalize function is just a service function to modify a fragment name.
on load calls an "init" function
Return an object to the method.
swapMusic is responsible for a cross-fade effect (as one melody fades and the second
one becomes louder).
Using a gain node we're starting to decrease the volume of the first fragment and after
3 seconds it gradually deadens.
Now let's repeat the process of an audio context creation, because the old audio has
been destroyed after a full stoppage.
At the same time do not forget to add a new fade effect for the sound of the second fragment.
Sole purpose of playSound method is to reproduce a sound from the already created buffer list.
Use these methods in your game js file.
For each menu link play a sound when user clicks on it, using an appropriate event listener.
In closeBoard function swap music fragments and repeat this action with openBoard function
Also play a sound when a user selects or deselects a chip on the board
Sorry, I need to fix typos
Ok, let's play!
[Music playing]
So, that's all.
Like I said, with a combination of different APIs and a bit of JavaScript you can create
your own fancy small game.
Easy, isn't' it?
Next time let's create a permanent Best Scores Table using localStorage.
[Music playing]
My code is available on GitHub Documentation is available in the Internet
Follow the links if you're eager to get more.
[Music playing]
If you like this video give it "thumbs up", share it with your friends, subscribe to the
channel and watch other episodes.
[Music playing]
This is all for this week.
Thanks for watching and dive deeper.
No comments:
Post a Comment