Adding Audio

When building your interactive project, you might want to add and play different sounds, whether it is feedback for user interaction or background music that plays throughout. The Audio plugin provides a simple interface for registering audio files as object which you can then play. The plugin’s api is documented here in detail. Here are a few pointers on how to use it.

Upload your audio files

The plugin uses the howlerjs library which supports a variety of audio formats (“mp3″, “opus”, “ogg”, “wav”, “aac”, “m4a”, “mp4″, “webm”, …). You first need to upload the audio files you wish to use to a publically accessible online storage service. Also, for performance reasons, it is always best to deliver it from a CDN. If you don’t upload your audio files to the Studio please read Using External Resources and make sure your audio files are added to extResources.json.

Registering audio elements

The audio elements you plan to use can be registered during the plugin’s initialization in the Player’s Options or in run time by using the api.

Initializing the audio plugin

"plugins": {
    "audio":{
        "sounds": [
            {
                "id": "soundtrack",
                "src": "https://cdn.com/content/sounds/soundtrack_10min.m4a",
                "volume": 1.0,
                "fadeOutDuration": 3
            },
            {
                "id": "ding",
                "src": "https://cdn.com/content/sounds/ding.wav",
                "volume": 1.0
            },
        ]
    }
}

Notice that the “soundtrack” ID is reserved for audio which plays in the background, following the playback of the video and providing the option to add fading in and out.

Using the API

player.audio.add({
    id: 'yeah',
    src: [
        'https://cdn.com/content/sounds/yeah.webm',
        'https://cdn.com/content/sounds/yeah.mp3'
    ],
    volume: 1
});

It’s a good idea to register multiple formats of audio to improve browser support, but having both webm and mp3 gives you a pretty good coverage.

Once registered, you can use all the normal functionality you would expect from an audio object, such as play, pause, stop, and setting the volume is available.

Other important stuff

Volume

The audio plugin allows you to set volume not only of the audio elements you are playing but also of the video being played using the videoVolume property, for exampe:

player.audio.videoVolume = 0.5;

This is useful for when you want to play an audio overlay and adjust the relative volume of the video.

Muting

You can easily mute all sounds using

player.audio.muted = true;

Mixing

As we said before the plugin uses the howlerjs library which provides some advanced audio functionality. For example, a nice thing you can do is have multiple audio elements all playing simultaneously and mixing between them by fading the volume level of each channel.

You can access the underlying Howl instance of the audio element you registered by using the get method:

let myAudio = player.audio.get(“my_audio”);

Then using the fade method, you can change the volume gradually.

myAudio.fade([FROM_VOLUME], [TO_VOLUME], [FADE_DURATION_IN_MSEC]);

For example:

//Fade from full volume to zero over 2 seconds
myAudio.fade(1.0, 0, 2000);
Rate this page: X
Tell us more!