Album Loading
An album is a collection of tracks that can be loaded from a single audio source using track positioning. Clicking on each bird will play the appropriate track within the album.
An album is a collection of tracks that can be loaded from a single audio source using track positioning. Clicking on each bird will play the appropriate track within the album.
Creating an instance of the album with the metadata path. The metadata json describes the audio files structure and where tracks are located.
constructor(options = {}) {
super(options);
...
this._album = new hamonengine.audio.album({ url: '../content/media/winterbirds_audio.json' });
}
Load the album during the onloadResources event and load each track based on its name.
/**
* An internal event that occurs when attempting to load resources.
* @returns {object} a promise that the resource has loaded successfully.
*/
async onloadResources() {
...
const albumPromise = this._album.load();
//Wait for the spritesheet & album to complete loading.
...
await albumPromise;
//Fetch specific sprite & track for each bird.
for (let i = 0; i < this._birds.length; i++) {
...
this._birds[i].song = this._album.getTrack(this._birds[i].name);
}
}
Using the HamonEngine's onMouseEvent & collision detection determine if the user has clicked on the bird and play the track.
onMouseEvent(type, v, e, caller) {
if (type === 'up') {
//Handle interaction for each bird.
for (let i = 0; i < this._birds.length; i++) {
this._birds[i].onInteract(v);
}
}
...
}
To start or stop a track use play & stop. It's best to determine if the track is playing before stopping it.
async sing() {
if (this.song) {
if (this.song.isPlaying) {
await this.song.stop();
}
this.song.play();
}
}
onInteract(v) {
//Determine if a user clicks on the bird.
if (this.isOver(v)) {
this.sing();
...
}
...
}
Bird Sprites created by Refuzzle (https://opengameart.org/content/winter-birds)