Audio Player Widget

Table of Contents

• What is the audio player widget?
• How to generate the player
• Custom settings
  • Artwork (cover image)
  • Name (of the preset)
  • Domain whitelist
  • Player elements
• How to delete an audio player widget?
• Embedding the player on your website
  • Add the player script to all pages
  • Embed the code for the specific title
  • Final structure example

What is the audio player widget?

The Audio Player Widget is a simple code snippet you can embed into your website or CMS. It lets your audience play your podcast or audio content directly from your page, with customizable branding and controls.

How to generate the player

Step-by-step instructions with screenshots

• Go to your Audiorista Dashboard

• Navigate to Distribution → Player Widget

  

• Click on Create Preset.

  

• Name the preset and click Submit.

  

Custom settings

Once you've accessed the Presets settings, you can fine-tune the player’s appearance and metadata. Here’s how:

1. Artwork (Optional)

Normally, the widget displays the artwork from the title itself (episode or show).

But if you want to override the title’s artwork and use the same custom image across all titles that use this preset, you can upload an image here.

• Recommended size: 800×800 px

• Supported formats: JPG or PNG

💡 Use this if you want consistent branding across episodes or need a temporary placeholder.

🎯 Tip: If you're happy with the default artwork of each title, you can leave this blank. The widget will automatically use the artwork set in the title metadata.

2. Name (of the preset)

This field is for your internal reference only. It helps you organize and recognize different preset configurations.
📝 It does not affect what’s shown in the player itself.

You can create multiple presets to suit different needs (e.g. one minimal player for blog posts, one full-featured player for landing pages).

We recommend keeping it clear and easy to understand. This helps you instantly recognize your presets, as you can create multiple.

3. Domain whitelist

The domain whitelist allows you to control where your player widget can be embedded. By adding domains to this list, you ensure that only the specified websites can display the player using this preset.

How it works:

• Enter one domain per line (e.g., example.com).
• Only the websites listed here will be allowed to embed the player.
• If the list is left blank, the player can be embedded anywhere, without restrictions.

Example:

mywebsite.com  
partnerwebsite.org  

In this example, only mywebsite.com and partnerwebsite.org can use the player embed code. Any attempt to embed the player on other websites will be blocked.

🎯 Tip: This feature is useful if you want to prevent unauthorized websites from embedding your player or if you only want the player available on your own platforms.

4. Player elements

On the right-hand side of the screen, you’ll see a list of player elements you can enable or disable for this preset. These control what features are visible in your player and allow you to customize the listener experience.

Available elements include:

• Volume control—Show or hide the volume slider.
• Scrubber—Displays the playback bar so listeners can jump to different parts of the audio.
• Current time—Shows the current playback time.
• Total time – Shows the total duration of the audio.
• etc

Tip: Simply toggle each element on or off depending on how minimal or feature-rich you want your player to be.

How to delete an audio player widget?

To remove an audio player widget, open your Audiorista dashboard. Under Distribution, select Player Widget. Find the widget you want to delete, click Edit, and follow the deletion steps.

Embedding the player on your website

You can embed the player on most websites, including
✅ WordPress
✅ Squarespace
✅ Wix
✅ Custom HTML websites

To successfully embed the Audio Player Widget for a specific title, there are two steps you need to follow:

1. Add the player script to all pages

Before embedding any specific title, you need to insert the AudioRista Player SDK code snippet into every page where you want the player to work. This should be placed at the bottom of the <body> tag on your website.

Example:

<script id="audiorista-sdk" src="https://storage.googleapis.com/strillo-staging/media/project/sdk/8b00b4c6591131914692bf65c08c654312bd74c7.js"></script>

📍 Tip: You can add this once to your global layout or template so it loads across all relevant pages automatically.

2. Embed the code for the specific title

Once the base script is installed, it’s time to embed the actual audio player for a specific title.

To do this:

1. Go to your Audiorista Dashboard

2. Navigate to the title you want to embed

3. Choose the preferred preset.

4. Copy the Embed Code provided for that title

5. Paste this code below the first script on the same page

This second snippet is what creates the actual audio player tied to that specific title or episode.

Final structure example

Here’s how both codes would look together on your webpage:

<!-- 1. SDK Script (at the bottom of <body>) -->
<script id="audiorista-sdk" src="https://storage.googleapis.com/strillo-staging/media/project/sdk/8b00b4c6591131914692bf65c08c654312bd74c7.js"></script>

<!-- 2. Specific Title Embed Code -->
<div class="audiorista_player" data-preset="3704" data-type="track" data-content="112505" data-mode="mini"></div>

✅ That’s it!
Once both snippets are in place, your custom audio player will show up and work as expected, with all your chosen settings from the preset.