JavaScript events

The Auto Audio widget emits custom DOM events that allow you to react to various states of the audio player lifecycle. These events are useful for showing/hiding related UI elements, tracking analytics, or integrating with your page's behavior.

Available Events

Event Details

everlit:ready

Fired when the audio player is successfully embedded on the page. This is the primary event for most integrations.

Event Detail Properties

Metadata Object

Example Response

Copy// Example e.detail value:
{
  embed: true,
  element: HTMLDivElement,
  articleId: "artl_7kX9mPqR2Nw",
  playerUrl: "https://everlit.audio/embeds/artl_7kX9mPqR2Nw",
  status: "ready",
  metadata: {
    title: "City Council Approves New Transportation Plan",
    summary: "The city council voted 7-2 to approve a comprehensive transportation plan that includes new bike lanes, expanded bus routes, and infrastructure improvements.",
    duration: 187.3
  }
}

Usage Example

Copydocument.addEventListener('everlit:ready', function(e) {
  console.log('Audio player ready!', e.detail);

  // Show a related element
  document.querySelector('.audio-controls').style.display = 'block';

  // Display formatted duration
  if (e.detail.metadata?.duration) {
    const minutes = Math.round(e.detail.metadata.duration / 60);
    document.querySelector('.listen-time').textContent = minutes + ' min listen';
  }

  // Display title
  if (e.detail.metadata?.title) {
    document.querySelector('.audio-title').textContent = e.detail.metadata.title;
  }
});

everlit:clickToCreate

Fired when a click-to-create widget is displayed (for publications with on-demand audio generation).

Copydocument.addEventListener('everlit:clickToCreate', function(e) {
  // e.detail contains:
  // {
  //   clickToCreate: true,
  //   processing: false,          // true if already being created
  //   element: HTMLElement,       // The click widget element
  //   status: "click_to_create"   // added in widget v2; "processing" while it is being created
  // }

  if (!e.detail.processing) {
    // Show a hint to encourage users to click
    document.querySelector('.create-audio-hint').style.display = 'block';
  }
});

everlit:processing

Fired when audio conversion begins (after user clicks to create or auto-conversion starts).

Copydocument.addEventListener('everlit:processing', function(e) {
  // e.detail contains:
  // {
  //   processing: true,
  //   url: "https://example.com/article"
  // }

  // Show a loading state
  document.querySelector('.audio-loading').style.display = 'block';
});

everlit:error

Fired when an error occurs during the audio check or conversion process.

Copydocument.addEventListener('everlit:error', function(e) {
  // e.detail contains:
  // {
  //   error: true,
  //   reason: "Error description"
  // }

  console.error('Everlit error:', e.detail.reason);

  // Optionally hide the player area on error
  document.querySelector('.audio-player-container').style.display = 'none';
});

Complete Integration Example

Here's a full example showing how to use events to control page elements based on audio availability:

Copy<!-- Your page HTML -->
<div id="everlit-auto-audio-widget" data-publication-id="pblc_xxx"></div>

<div class="audio-info" style="display: none;">
  <span class="listen-time"></span>
  <button class="share-audio-btn">Share Audio</button>
</div>

<script defer src="https://cdn.everlit.audio/libs/everlitAutoAudio.js"></script>
<script>
  // Show audio info when player is ready
  document.addEventListener('everlit:ready', function(e) {
    const audioInfo = document.querySelector('.audio-info');
    audioInfo.style.display = 'flex';

    // Display duration
    if (e.detail.metadata?.duration) {
      const minutes = Math.round(e.detail.metadata.duration / 60);
      document.querySelector('.listen-time').textContent = minutes + ' min listen';
    }

    // Log for analytics
    console.log('Audio loaded for article:', e.detail.articleId);
  });

  // Hide audio info on error
  document.addEventListener('everlit:error', function(e) {
    document.querySelector('.audio-info').style.display = 'none';
  });
</script>