Ausha Player

A DatoCMS plugin to embed Ausha podcast players. Paste an Ausha embed code and get a live preview with configurable display options (color, playlist, layout).

Features

• Embed paste & parse: Paste any Ausha embed code, the plugin extracts and stores a clean, structured JSON value
• Live preview: See the Ausha player rendered directly inside your DatoCMS editor
• Per-record customisation: Override accent color, playlist visibility, and layout (horizontal/vertical) directly from the field editor toolbar
• Bilingual: Full English and French interface, auto-detected from DatoCMS locale
• Clean output: Stores a structured JSON object ready to consume in your frontend

Installation

Install the plugin from the DatoCMS Plugin Marketplace.

Usage

Setting up the field

1. Add the plugin to your DatoCMS project
2. In your model, add a new field (JSON type)
3. Under "Presentation", select "Ausha Player" as the field editor
4. Save your changes

Embedding a player

1. Copy the embed code from your Ausha dashboard (<iframe ...></iframe>)
2. Paste it into the plugin field
3. Click "Embed" — the player preview appears immediately
4. Use the toolbar above the preview to customise color, playlist visibility, and layout
5. Click "Clear" to remove the embedded player

Configuration

Customisation options are available per record, directly in the field editor toolbar that appears above the player preview:

• Color: Override the player accent color (hex, e.g. #751CBF). Leave empty to use the embed default.
• Playlist: Force show or hide the episode list. Leave empty to use the embed default.
• Layout: Force horizontal or vertical layout. Leave empty to use the embed default.

Using the value in your code

The field stores a JSON object with everything you need to render the player:

{
  "src": "https://player.ausha.co/...",
  "title": "My Podcast",
  "height": 220,
  "rawEmbed": "<iframe ...></iframe>",
  "color": "#751CBF",
  "playlist": "true",
  "layout": "horizontal"
}

color, playlist, and layout are optional — absent or empty means the embed default is used.

// In React/Next.js
<iframe
  src={record.aushaPlayer.src}
  title={record.aushaPlayer.title}
  height={record.aushaPlayer.height}
  style={{ width: "100%", border: "none" }}
  allow="autoplay"
/>

Development

This plugin uses pnpm v10 as the package manager.

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Build for production
pnpm build

Credits

Made by Breaking Web

License

MIT