> For the complete documentation index, see [llms.txt](https://docs.customiframe.com/llms.txt).
> Use it to discover all available pages before exploring further.

# Embed Audio in Gutenberg

Guides for embedding Spotify, SoundCloud, Boomplay, and more in Gutenberg using the Custom iFrame WordPress plugin. No coding required.


## Overview

Custom iFrame lets you embed audio in Gutenberg from Spotify, SoundCloud, Boomplay, and more. Paste any audio URL into the block. No API keys, no shortcodes, no coding required.

Custom iFrame is a WordPress plugin by CoderzStudio that embeds 100+ external sources in Elementor and Gutenberg without writing any code.

Using Elementor instead? Follow the [Embed Audio in Elementor](/elementor/embed-audio) guide.

## Requirements

- [Custom iFrame plugin installed and active](/getting-started/installation)
- WordPress with the Gutenberg block editor
- An audio URL from any supported platform

## How to Embed Audio in Gutenberg

All audio platforms follow the same three-step process.

### Step 1: Get Your Audio Link

<Steps>
  <Step title="Open the audio platform" icon="music" title-type="p">
    Go to the platform where your audio is hosted: Spotify, SoundCloud, Boomplay, or any other supported source.
  </Step>
  <Step title="Copy the share link" icon="link" title-type="p">
    Find the share or copy-link option on the track, playlist, or station. Copy the URL to your clipboard.

    Each platform guide below shows exactly where to find the share link.
  </Step>
</Steps>

### Step 2: Add the Custom iFrame Block

<Steps>
  <Step title="Open your page in the block editor" icon="layout" title-type="p">
    Go to the page or post where you want the audio player. Click **Edit** to open the Gutenberg block editor.
  </Step>
  <Step title="Add the Custom iFrame block" icon="plus" title-type="p">
    Click the **Add Block** button. Search for **Custom iFrame**. Click the block to add it to the page.
  </Step>
</Steps>

### Step 3: Paste the URL and Publish

<Steps>
  <Step title="Paste the audio URL" icon="clipboard" title-type="p">
    In the right panel, paste the URL into the **Source URL** field. The audio player appears inside the block.
  </Step>
  <Step title="Set height and publish" icon="check" title-type="p">
    Set **Height** to match the player size. 152px works for a single Spotify track. 380px works for a playlist. Click **Update** or **Publish**.
  </Step>
</Steps>

<Callout kind="success">
  Click **Update** or **Publish**. Your audio player is now live on your WordPress site.
</Callout>

## Supported Audio Platforms

Select your audio platform for a step-by-step embed guide.

<Columns cols="2">
  <Card title="Embed Spotify Audio in Gutenberg" href="/gutenberg/audio/embed-spotify" icon="music" horizontal={false}>
    Embed Spotify tracks, albums, and episodes in Gutenberg.
  </Card>
  <Card title="Embed Spotify Playlist in Gutenberg" href="/gutenberg/audio/embed-spotify-playlist" icon="list" horizontal={false}>
    Embed a full Spotify playlist with track listing and controls.
  </Card>
  <Card title="Embed SoundCloud in Gutenberg" href="/gutenberg/audio/embed-soundcloud" icon="headphones" horizontal={false}>
    Embed SoundCloud tracks and playlists in Gutenberg.
  </Card>
  <Card title="Embed Boomplay in Gutenberg" href="/gutenberg/audio/embed-boomplay" icon="radio" horizontal={false}>
    Embed Boomplay music tracks and albums in Gutenberg.
  </Card>
</Columns>

## Also in Elementor

All audio platforms are also supported in the Elementor widget editor.

See [Embed Audio in Elementor](/elementor/embed-audio) for all Elementor guides.

## Related Guides

- [Getting Started: Install Custom iFrame](/getting-started/installation)
- [Gutenberg Block Setup](/getting-started/gutenberg-setup)
- [Auto Height Adjustment](/features/auto-height)
- [iFrame Not Showing](/troubleshooting/iframe-not-showing)