spotify-audio

Audio component that plays Spotify content through the Spotify embed: tracks, episodes, albums, playlists, shows, and artists. Podcast episodes play in full for signed-out listeners; music plays as a preview until the listener logs in to Spotify.

Load a source

src takes an open.spotify.com URL for any embeddable entity, including the localized (/intl-de/) and already-embedded (/embed/) forms, or a spotify:<type>:<id> URI. A t parameter sets the start position in seconds.

<SpotifyAudio src="https://open.spotify.com/episode/7makk4oTQel546B0PZlDM5" controls />

<spotify-audio src="https://open.spotify.com/episode/7makk4oTQel546B0PZlDM5" controls></spotify-audio>

Controls

Spotify’s own chrome is the only UI the embed offers, so controls decides whether the element is visible at all. With controls, it shows Spotify’s player. Without it, the element hides itself and plays as an invisible transport: a hidden iframe still loads and plays, so a player skin’s buttons drive playback while the embed takes no room on the page.

Behavior

The Spotify embed exposes less than a native <audio> element:

• No volume and no mute: the embed takes neither command and reports neither value, so a player skin shows no volume controls at all.
• No playback rate and no text tracks.
• loop replays the entity from the top when it ends; without it, the embed continues into whatever Spotify queues next.

Examples

Basic Usage

import { SpotifyAudio } from '@videojs/react/media/spotify-audio';

export default function BasicUsage() {
  return (
    <div className="spotify-audio">
      <SpotifyAudio src="https://open.spotify.com/episode/7makk4oTQel546B0PZlDM5" controls />
    </div>
  );
}

.spotify-audio {
  width: 100%;
  height: 152px;
}

<spotify-audio
    class="spotify-audio"
    src="https://open.spotify.com/episode/7makk4oTQel546B0PZlDM5"
    controls
></spotify-audio>

.spotify-audio {
  width: 100%;
  height: 152px;
}

import '@videojs/html/media/spotify-audio';

<SpotifyAudio
  source={{
    src: 'https://open.spotify.com/episode/7makk4oTQel546B0PZlDM5',
    engine: { spotify: { t: 90, theme: 0 } },
  }}
/>

const audio = document.querySelector('spotify-audio');
audio.source = {
  src: 'https://open.spotify.com/episode/7makk4oTQel546B0PZlDM5',
  engine: { spotify: { t: 90, theme: 0 } },
};