Audio Embed Components

This document explains how to use the SoundCloud and Spotify embed components in your Jekyll posts.

SoundCloud Embed

Basic Usage




















<div class="soundcloud-embed-wrapper">
  <div class="soundcloud-embed-container">
    <iframe 
      width="100%" 
      height="166" 
      src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/TRACK_ID&color=ff5500&auto_play=false&show_artwork=true&show_comments=true&show_playcount=true&show_user=true"
      title="SoundCloud track"
      frameborder="0" 
      allow="autoplay">
    </iframe>
  </div>
</div>

With URL




















<div class="soundcloud-embed-wrapper">
  <div class="soundcloud-embed-container">
    <iframe 
      width="100%" 
      height="166" 
      src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/1434547055436&color=ff5500&auto_play=false&show_artwork=true&show_comments=true&show_playcount=true&show_user=true"
      title="SoundCloud track"
      frameborder="0" 
      allow="autoplay">
    </iframe>
  </div>
</div>

With Start Time




















<div class="soundcloud-embed-wrapper">
  <div class="soundcloud-embed-container">
    <iframe 
      width="100%" 
      height="166" 
      src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/1434547055436&color=ff5500&auto_play=false&show_artwork=true&show_comments=true&show_playcount=true&show_user=true&start=120"
      title="SoundCloud track"
      frameborder="0" 
      allow="autoplay">
    </iframe>
  </div>
</div>

All Parameters




















<div class="soundcloud-embed-wrapper">
  <div class="soundcloud-embed-container">
    <iframe 
      width="100%" 
      height="166" 
      src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/TRACK_ID&color=ff5500&auto_play=false&show_artwork=true&show_comments=true&show_playcount=true&show_user=true"
      title="Custom Title"
      frameborder="0" 
      allow="autoplay">
    </iframe>
  </div>
</div>

Parameters Explained

  • id: The SoundCloud track ID (required if no URL provided)
  • url: Full SoundCloud URL (required if no ID provided)
  • title: Custom title for accessibility (default: “SoundCloud track”)
  • width: Custom width (default: “100%”)
  • height: Custom height (default: “166”)
  • color: Custom color hex code (default: “ff5500”)
  • auto_play: Set to “true” to enable autoplay (default: “false”)
  • show_artwork: Set to “false” to hide artwork (default: “true”)
  • show_comments: Set to “false” to hide comments (default: “true”)
  • show_playcount: Set to “false” to hide play count (default: “true”)
  • show_user: Set to “false” to hide user info (default: “true”)
  • start: Start time in seconds (default: “0”)

Spotify Embed

Basic Usage



















<div class="spotify-embed-wrapper">
  <div class="spotify-embed-container">
    <iframe 
      width="100%" 
      height="352" 
      src="https://open.spotify.com/embed/track/TRACK_ID?utm_source=generator&theme=black&view=coverart"
      title="Spotify content"
      frameborder="0" 
      allowfullscreen="" 
      allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" 
      loading="lazy">
    </iframe>
  </div>
</div>

With URL



















<div class="spotify-embed-wrapper">
  <div class="spotify-embed-container">
    <iframe 
      width="100%" 
      height="352" 
      src="https://open.spotify.com/embed/track/4iV5W9uYEdYUVa79Axb7Rh?utm_source=generator&theme=black&view=coverart"
      title="Spotify content"
      frameborder="0" 
      allowfullscreen="" 
      allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" 
      loading="lazy">
    </iframe>
  </div>
</div>

With Start Time



















<div class="spotify-embed-wrapper">
  <div class="spotify-embed-container">
    <iframe 
      width="100%" 
      height="352" 
      src="https://open.spotify.com/embed/track/4iV5W9uYEdYUVa79Axb7Rh?utm_source=generator&theme=black&view=coverart&start=90"
      title="Spotify content"
      frameborder="0" 
      allowfullscreen="" 
      allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" 
      loading="lazy">
    </iframe>
  </div>
</div>

All Parameters



















<div class="spotify-embed-wrapper">
  <div class="spotify-embed-container">
    <iframe 
      width="100%" 
      height="352" 
      src="https://open.spotify.com/embed/track/TRACK_ID?utm_source=generator&theme=black&view=coverart"
      title="Custom Title"
      frameborder="0" 
      allowfullscreen="" 
      allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" 
      loading="lazy">
    </iframe>
  </div>
</div>

Parameters Explained

  • id: The Spotify track/album/playlist ID (required if no URL provided)
  • url: Full Spotify URL (required if no ID provided)
  • type: Content type - “track”, “album”, “playlist”, “show”, “episode” (default: “track”)
  • title: Custom title for accessibility (default: “Spotify content”)
  • width: Custom width (default: “100%”)
  • height: Custom height (default: “352” for tracks, “380” for albums/playlists)
  • theme: Color theme - “black” or “white” (default: “black”)
  • view: View mode - “list” or “coverart” (default: “coverart”)
  • start: Start time in seconds (default: “0”)

Examples

SoundCloud Examples

<!-- Basic track -->



















<div class="soundcloud-embed-wrapper">
  <div class="soundcloud-embed-container">
    <iframe 
      width="100%" 
      height="166" 
      src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/293&color=ff5500&auto_play=false&show_artwork=true&show_comments=true&show_playcount=true&show_user=true"
      title="SoundCloud track"
      frameborder="0" 
      allow="autoplay">
    </iframe>
  </div>
</div>
 

<!-- Track with custom color -->



















<div class="soundcloud-embed-wrapper">
  <div class="soundcloud-embed-container">
    <iframe 
      width="100%" 
      height="166" 
      src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/293&color=ff0000&auto_play=false&show_artwork=true&show_comments=true&show_playcount=true&show_user=true"
      title="SoundCloud track"
      frameborder="0" 
      allow="autoplay">
    </iframe>
  </div>
</div>
 

<!-- Track with autoplay -->



















<div class="soundcloud-embed-wrapper">
  <div class="soundcloud-embed-container">
    <iframe 
      width="100%" 
      height="166" 
      src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/293&color=ff5500&auto_play=true&show_artwork=true&show_comments=true&show_playcount=true&show_user=true"
      title="SoundCloud track"
      frameborder="0" 
      allow="autoplay">
    </iframe>
  </div>
</div>
 

<!-- Track from URL -->



















<div class="soundcloud-embed-wrapper">
  <div class="soundcloud-embed-container">
    <iframe 
      width="100%" 
      height="166" 
      src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/1434547055436&color=ff5500&auto_play=false&show_artwork=true&show_comments=true&show_playcount=true&show_user=true"
      title="SoundCloud track"
      frameborder="0" 
      allow="autoplay">
    </iframe>
  </div>
</div>
 

<!-- Track from URL with start time (2 minutes in) -->



















<div class="soundcloud-embed-wrapper">
  <div class="soundcloud-embed-container">
    <iframe 
      width="100%" 
      height="166" 
      src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/1434547055436&color=ff5500&auto_play=false&show_artwork=true&show_comments=true&show_playcount=true&show_user=true&start=120"
      title="SoundCloud track"
      frameborder="0" 
      allow="autoplay">
    </iframe>
  </div>
</div>
 

<!-- Track with custom color and start time -->



















<div class="soundcloud-embed-wrapper">
  <div class="soundcloud-embed-container">
    <iframe 
      width="100%" 
      height="166" 
      src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/1434547055436&color=ff0000&auto_play=false&show_artwork=true&show_comments=true&show_playcount=true&show_user=true&start=180"
      title="SoundCloud track"
      frameborder="0" 
      allow="autoplay">
    </iframe>
  </div>
</div>

Spotify Examples

<!-- Basic track -->


















<div class="spotify-embed-wrapper">
  <div class="spotify-embed-container">
    <iframe 
      width="100%" 
      height="352" 
      src="https://open.spotify.com/embed/track/4iV5W9uYEdYUVa79Axb7Rh?utm_source=generator&theme=black&view=coverart"
      title="Spotify content"
      frameborder="0" 
      allowfullscreen="" 
      allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" 
      loading="lazy">
    </iframe>
  </div>
</div>
 

<!-- Album -->


















<div class="spotify-embed-wrapper">
  <div class="spotify-embed-container">
    <iframe 
      width="100%" 
      height="380" 
      src="https://open.spotify.com/embed/album/37i9dQZF1DXcBWIGoYBM5M?utm_source=generator&theme=black&view=coverart"
      title="Spotify content"
      frameborder="0" 
      allowfullscreen="" 
      allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" 
      loading="lazy">
    </iframe>
  </div>
</div>
 

<!-- Playlist -->


















<div class="spotify-embed-wrapper">
  <div class="spotify-embed-container">
    <iframe 
      width="100%" 
      height="380" 
      src="https://open.spotify.com/embed/playlist/37i9dQZF1DXcBWIGoYBM5M?utm_source=generator&theme=black&view=coverart"
      title="Spotify content"
      frameborder="0" 
      allowfullscreen="" 
      allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" 
      loading="lazy">
    </iframe>
  </div>
</div>
 

<!-- White theme -->


















<div class="spotify-embed-wrapper">
  <div class="spotify-embed-container">
    <iframe 
      width="100%" 
      height="352" 
      src="https://open.spotify.com/embed/track/4iV5W9uYEdYUVa79Axb7Rh?utm_source=generator&theme=white&view=coverart"
      title="Spotify content"
      frameborder="0" 
      allowfullscreen="" 
      allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" 
      loading="lazy">
    </iframe>
  </div>
</div>
 

<!-- From URL -->


















<div class="spotify-embed-wrapper">
  <div class="spotify-embed-container">
    <iframe 
      width="100%" 
      height="352" 
      src="https://open.spotify.com/embed/track/4iV5W9uYEdYUVa79Axb7Rh?utm_source=generator&theme=black&view=coverart"
      title="Spotify content"
      frameborder="0" 
      allowfullscreen="" 
      allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" 
      loading="lazy">
    </iframe>
  </div>
</div>
 

<!-- From URL with start time (1 minute 30 seconds in) -->


















<div class="spotify-embed-wrapper">
  <div class="spotify-embed-container">
    <iframe 
      width="100%" 
      height="352" 
      src="https://open.spotify.com/embed/track/4iV5W9uYEdYUVa79Axb7Rh?utm_source=generator&theme=black&view=coverart&start=90"
      title="Spotify content"
      frameborder="0" 
      allowfullscreen="" 
      allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" 
      loading="lazy">
    </iframe>
  </div>
</div>

Start Time Format

Both components accept start times in seconds:

  • start="30" - Start at 30 seconds
  • start="60" - Start at 1 minute
  • start="90" - Start at 1 minute 30 seconds
  • start="120" - Start at 2 minutes
  • start="180" - Start at 3 minutes

Finding IDs

SoundCloud

  1. Go to the track page on SoundCloud
  2. Look at the URL: https://soundcloud.com/username/track-name-123456789
  3. The ID is the number at the end: 123456789
  4. Or just use the full URL directly with the url parameter

Spotify

  1. Go to the track/album/playlist page on Spotify
  2. Look at the URL: https://open.spotify.com/track/4iV5W9uYEdYUVa79Axb7Rh
  3. The ID is the last part: 4iV5W9uYEdYUVa79Axb7Rh
  4. Or just use the full URL directly with the url parameter

URL Support

Both components now support full URLs directly:

  • SoundCloud: https://soundcloud.com/username/track-name
  • Spotify: https://open.spotify.com/track/4iV5W9uYEdYUVa79Axb7Rh

The components will automatically extract the necessary IDs from the URLs, so you can copy-paste directly from the share buttons.

Styling

The components include responsive styling that matches your existing YouTube and Facebook embed components. They will automatically adjust for mobile devices and include proper error handling for missing IDs.

Error Handling

If you don’t provide a valid ID or URL, the components will display an error message with usage instructions instead of breaking the page.

© 2025, Ramin Firoozye. All rights reserved.