HamonEngine Demo

PlayList Loading

In this demo, a number of tracks can be bundled together and played with a playlist. The playlist is set to autoplay by default so that all tracks can play once the playlist has started. The playback can be advanced by the next and previous buttons. Stop will completely stop the playlist, starting it from the beginning while pause will simply stop at the current track.

NOTE: Only one track is dynamically loaded while the rest are pre-loaded when the DOM completes.

Audio Preview

The following audio tracks were created by Eric Matyas and can be found at the website www.soundimage.org

City-Beneath-the-Waves.mp3

Digital-Downtow.mp3

Mind-Bender.mp3 (Dynamically Loaded Track will not be sync'ed with others)

Puzzle-Game.mp3

Creating an instance of the playlist preloaded with tracks. Note that one of the tracks is being loaded on demand and the others are using the HTML audio element.

constructor(options = {}) {
    super(options);
    ...
    //Create a playlist and add 3 tracks from the DOM that have been preloaded, while one will be dynamically loaded during the load event.
    this._playlist = new hamonengine.audio.playlist({
        tracks: [
            new hamonengine.audio.track({ audio: document.getElementById('city'), name: 'City Beneath the Waves' }),
            new hamonengine.audio.track({ audio: document.getElementById('downtown'), name: 'Digital Downtown' }),
            //Dynamic loading
            new hamonengine.audio.track({ src: '../content/media/Mind-Bender.mp3', name: 'Mind Bender' }),
            new hamonengine.audio.track({ audio: document.getElementById('puzzle'), name: 'Puzzle Game' })
        ],
        autoplay: true
    });

    //Register for playlist events.
    this._playlist.register(this);
}

Load the playlist during the onloadResources event. The playlist will automatically load tracks as necessary.

/**
* An internal event that occurs when attempting to load resources.
* @returns {object} a promise that the resource has loaded successfully.
*/
async onloadResources() {
    //Wait for the playlist to load.
    await this._playlist.load();
}

Using the HamonEngine's onMouseEvent to trigger the play, pause, stop, prev, next methods or setting the loop property on the playlist. This demo uses external HTML elements to determine what method to use.

onMouseEvent(type, v, e, caller) {
    switch (dataPlaybackAttribute.value) {
        case 'play':
            if (!this._playlist.isPlaying) {
                this._playlist.play();
                ...
            }
            break;

        case 'pause':
            this._playlist.pause();
            ...
            break;

        case 'stop':
            this._playlist.stop();
            break;

        case 'prev':
            this._playlist.prev();
            break;

        case 'next':
            this._playlist.next();
            break;

        case 'repeat':
            this._playlist.loop = !this._playlist.loop;
            ...
            break;
    }
}

Since the demo class registered for events on the playlist the following events are available: onPlaylistPlay, onPlaylistPrevious, onPlaylistNext, onPlaylistStop, onPlaylistPause.

onPlaylistPlay({ track }) {
    this._message = `Playing ${this._playlist.currentTrack.name}`;
}
onPlaylistPrevious({ track }) {
    if (this._playlist.isPlaying) {
        this._message = `Playing ${this._playlist.currentTrack.name}`;
    }
    else {
        this._message = `Skipping to ${this._playlist.currentTrack.name}`;
    }
}
onPlaylistNext({ track }) {
    if (this._playlist.isPlaying) {
        this._message = `Playing ${this._playlist.currentTrack.name}`;
    }
    else {
        this._message = `Skipping to ${this._playlist.currentTrack.name}`;
    }
}
onPlaylistStop({ track, reason }) {
    if (reason === 'invoked') {
        this._message = `Stopping playback.`;
    }
    else {
        this._message = `Playlist complete! Have a great day!`;
    }

    //The playlist has stopped so show the play button & hide the pause button.
    this.togglePlayButton(true);
}
onPlaylistPause({ track }) {
    this._message = `Pausing at ${this._playlist.currentTrack.name}`;
}

Playlist Basics