Dynamic Head Node Based On Audio Locked State

An Eko project is configured to start autoplaying by default. In spite of that, on some platforms/devices, audio would initially be “locked”. That means the video would start muted until a user performs a gesture or a mouse click. That will “unlock” (unmute) the audio playback.
In some cases, playing audio right from the beginning may be critical for the video’s unique experience. For instance, if there’s important onboarding information being communicated.

In these cases, we can provide a creative solution by combining the dynamic head node feature with the player.isAudioLocked property to dynamically select a different head node depending on the audio “locked” state.

The code below goes into intro.js. If you are not familiar with the concept of intro please read the loading flow and the JavaScript entrypoints guides.

// All the potential head node IDs should be listed in an "introNodes" array
const introNodes = [
    'node_audio_is_locked',
    'node_audio_is_unlocked'
];

// A function that returns the chosen head node's ID
function head(player) {
    // If audio is locked, return a head node where audio playback is not critical for the experience
    if (player.isAudioLocked) {
        return 'node_audio_is_locked';
    }

    // Otherwise, audio can be autoplayed - return relevant head node
    return 'node_audio_is_unlocked';
}

Code Breakdown

To get a better grasp of how this code works, let’s go through it - step by step:

1. Before the project starts playing, the nodes in the introNodes array are prefetched.
   It’s important you list all of your possible head nodes in this array.

   // All the potential head node IDs should be listed in an "introNodes" array
   const introNodes = [
    'node_audio_is_locked',
    'node_audio_is_unlocked'
   ];
   

2. A check is performed to determine if according the current platform/device, the audio will be “locked” (muted).

   // If audio is locked, return a head node where the audio playback is not critical for the video experience
   if (player.isAudioLocked) {
    return 'node_audio_is_locked';
   }
   

   If so, the head node will be node_audio_is_locked.
3. If audio is expected to be “unlocked”, the head node will be node_audio_is_unlocked.

   // Otherwise, audio can be autoplayed - return relevant head node
   return 'node_audio_is_unlocked';
   

Finally, add head and introNodes to the end of your code’s exports list:

export default {
    /* some other exports... */,
    head,
    introNodes
};

If you’re aiming for a more complex Head Node logic, the Dynamic Head Node page will be of great help. You can also discover how to create a more complete experience by checking out our Docs.