Quick Start

Initialization

Copy this snippet into the page where you want to display the player

<script type='module'>
  import { initETXPlayer } from 'https://player.voxa.majelan.com/voxa-player.js';

  let config = {
    audioUrl: 'https://my-audio-file.mp3',
    resourceId: 'p-Ud0Ukn_f', // Replace with the id returned by the API
    duration: 142.3,
    ad: {
      enabled: true,
      channelId: 'myChannelId', // Replace by the value we provided you
      keywords: 'sport, football'
    },
    contentTier: 'free', // Replace with metered or premium for paywalled content
  };

  initETXPlayer(config)
</script>
html

Displaying the player in your page

The player will render to the first HTML element with id voxa-player

<div id='voxa-player'></div>
html
TIP

By default, the player will take 100% of its parent element's width

Adding styles

To style the player, we're using CSS variables. Below are foundational styles; for more, see the Styles section.

<style>
  :root {
    --etx-primary-color: #2ecc71;
    --etx-section-button-play-padding: 0 0.5rem 0 0;
    --etx-button-play-padding: 0.5rem;
    --etx-button-play-border-radius: 0.25rem;
    --etx-section-duration-padding: 0 0 0 1rem;
    --etx-font-family: Arial, Helvetica, sans-serif;
  }
</style>
html
Last update at: 2024/07/31 12:03:16