<spotify-audio>

A custom element for the Spotify player with an API that aims to match the <audio> API.

<media-controller audio>
  <spotify-audio
    src="https://open.spotify.com/artist/246dkjvS1zLTtiykXe5h60"
    slot="media"
    crossorigin
    muted
  ></spotify-audio>
  <media-control-bar style="width: 100%">
    <media-play-button></media-play-button>
    <media-seek-backward-button seek-offset="15"></media-seek-backward-button>
    <media-seek-forward-button seek-offset="15"></media-seek-forward-button>
    <media-time-range></media-time-range>
    <media-time-display show-duration remaining></media-time-display>
  </media-control-bar>
</media-controller>
Open on CodeSandboxOpen Sandbox

Installing

Section titled Installing

First install the NPM package:

npm install spotify-audio-element

Import in your app javascript (e.g. src/App.js):

import 'spotify-audio-element';

Optionally, you can load the script directly from a CDN using jsDelivr:

<script type="module" src="https://cdn.jsdelivr.net/npm/spotify-audio-element@0.1/+esm"></script>

This will register the custom elements with the browser so they can be used as HTML.