Winwheel.js tutorial: #19 Playing Sounds and Music
This tutorial demonstrates ways of playing sounds when a wheel is spinning. We will look at the callbackSound property of animations which can trigger a "tick" type of sound when a segment or pin passes under the pointer. Also we will look at how to play music while the wheel is spinning.
"Tick" sounds with callbackSound
From Winwheel.js 2.7 there is a callbackSound property of animations which allows to you specify a function to be called when a segment or pin passes under the prize pointer.
There is another animation property called soundTrigger which allows you to specify what triggers the sound. The default is "segment" which causes the sound to trigger when the edges of a segment pass under the pointer (i.e. the segment changes from one to the next). The other option is "pin" which triggers a sound when a pin passes under the pointer.
In the callbackSound function its up to you to play the sound. There are no built in sounds. You can play a sound very easily as I will show in the following examples, the first uses the default "segment" triggerType, the second example uses pins to trigger the sounds.
Segment Trigger Example
<canvas id='canvas' width='440' height='300'>
Canvas not supported, use another browser.
</canvas>
<script>
let theWheel = new Winwheel({
'numSegments' : 4,
'segments' :
[
{'fillStyle' : '#eae56f', 'text' : 'Segment 1'},
{'fillStyle' : '#89f26e', 'text' : 'Segment 2'},
{'fillStyle' : '#7de6ef', 'text' : 'Segment 3'},
{'fillStyle' : '#e7706f', 'text' : 'Segment 4'}
],
'animation' :
{
'type' : 'spinToStop',
'duration' : 10,
'spins' : 5,
'callbackSound' : playSound, // Specify function to call when sound is to be triggered
}
});
let audio = new Audio('tick.mp3'); // Create audio object and load desired file.
function playSound()
{
// Stop and rewind the sound (stops it if already playing).
audio.pause();
audio.currentTime = 0;
// Play the sound.
audio.play();
}
</script>
Pin Trigger Example
To trigger the sound with pins the only difference is to set the soundTrigger to pin and also specify the pins as detailed in tutorial #18 Displaying Pins.
<canvas id='canvas' width='440' height='300'>
Canvas not supported, use another browser.
</canvas>
<script>
let theWheel = new Winwheel({
'numSegments' : 4,
'segments' :
[
{'fillStyle' : '#eae56f', 'text' : 'Segment 1'},
{'fillStyle' : '#89f26e', 'text' : 'Segment 2'},
{'fillStyle' : '#7de6ef', 'text' : 'Segment 3'},
{'fillStyle' : '#e7706f', 'text' : 'Segment 4'}
],
'animation' :
{
'type' : 'spinToStop',
'duration' : 10,
'spins' : 5,
'callbackSound' : playSound, // Specify function to call when sound is to be triggered.
'soundTrigger' : 'pin' // Pins trigger the sound for this animation.
},
'pins' : // Display pins, and if desired specify the number.
{
'number' : 16
}
});
let audio = new Audio('tick.mp3'); // Create audio object and load desired file.
function playSound()
{
// Stop and rewind the sound (stops it if already playing).
audio.pause();
audio.currentTime = 0;
// Play the sound.
audio.play();
}
</script>
"Tick" sound created by DeepFrozenApps and downloaded from http://soundbible.com/.
Tip: Its best to use audio files where the sound begins straight away, not after a moment of silence, because when the wheel is spinning very fast only the first few milliseconds of the audio file will be played, and if its filled with silence then you won't hear anything until the wheel slows down.
Playing music while the wheel is spinning
In this example I will show you how to play music while the wheel is spinning and then stop it when the wheel stops. Again this is not too difficult, just a little bit of code to start the music when the wheel starts spinning, and then a couple of lines of code to stop the music when the animation has finished.
<canvas id='canvas' width='440' height='300'>
Canvas not supported, use another browser.
</canvas>
<script>
let theWheel = new Winwheel({
'numSegments' : 4,
'segments' :
[
{'fillStyle' : '#eae56f', 'text' : 'Segment 1'},
{'fillStyle' : '#89f26e', 'text' : 'Segment 2'},
{'fillStyle' : '#7de6ef', 'text' : 'Segment 3'},
{'fillStyle' : '#e7706f', 'text' : 'Segment 4'}
],
'animation' :
{
'type' : 'spinToStop',
'duration' : 6.4,
'spins' : 6,
'callbackFinished' : stopSound
}
});
let audio = new Audio('kids-music.mp3'); // Create audio object and load desired file.
// Function called by the Spin button onClick.
function startSpin()
{
// Play the sound and begin the animation of the wheel.
audio.play();
theWheel.startAnimation();
}
// Called when the animation has finished.
function stopSound()
{
// Stop and rewind the sound (stops it if still playing).
audio.pause();
audio.currentTime = 0;
}
</script>
Thanks to https://www.partnersinrhyme.com for the free Kids Music sample used in this example.
Additional Notes
For an example of how to play a sound when the spinning stops, see the bottom of tutorial #13 Getting the segment (prize) pointed to "Changing the colour of the winning segment".
If you are an experienced developer, you could try creating some sounds with the Web Audio API, and have this triggered by the callbackSound functionality rather than using an mp3 file.
If you want to play music while the wheel is spinning, and you make your mp3 file the same length as the duration of the animation, then you don't have to stop the audio and rewind it as shown in the example.
|
Previous: < #18 Displaying Pins |
Next: #20 Making it responsive > |