{"library":"spotify-audio-element","title":"Spotify Audio Web Component","type":"library","description":"The `spotify-audio-element` package provides a custom web component, `<spotify-audio>`, designed to embed and control Spotify audio playback directly within HTML. It aims to replicate the standard HTML `<audio>` element's API, offering a familiar interface for developers. Currently at version `1.0.4`, this package is part of the `muxinc/media-elements` monorepo, which sees active development across its various media component offerings. While `spotify-audio-element` itself might not have frequent individual version bumps, the monorepo has consistent updates across its related packages. Its primary differentiators include a compliant `HTMLMediaElement` API surface, making it intuitive for those familiar with native audio elements, and seamless integration capabilities with `Media Chrome` for advanced UI customization.","language":"javascript","status":"active","last_verified":"Tue Apr 21","install":{"commands":["npm install spotify-audio-element"],"cli":null},"imports":["import 'spotify-audio-element';","import type { SpotifyAudioElement } from 'spotify-audio-element';","<spotify-audio src=\"spotify:track:11dFghVXANMlKmJXsNCbNl\" controls></spotify-audio>"],"auth":{"required":false,"env_vars":[]},"links":{"homepage":null,"github":"https://github.com/muxinc/media-elements","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/spotify-audio-element","openapi_spec":null,"status_page":null,"smithery":null},"quickstart":{"code":"import 'spotify-audio-element';\n\nconst spotifyPlayer = document.createElement('spotify-audio');\nspotifyPlayer.setAttribute('controls', '');\n// Use a Spotify track URI for direct playback, e.g., 'spotify:track:11dFghVXANMlKmJXsNCbNl' for a public domain track.\n// A Spotify artist URI as in the README example ('spotify:artist:246dkjvS1zLTtiykXe5h60') generally only loads the artist page, not playable audio.\n// Replace with a valid Spotify track URI or use an environment variable.\nspotifyPlayer.setAttribute('src', process.env.SPOTIFY_TRACK_URI ?? 'spotify:track:11dFghVXANMlKmJXsNCbNl');\n\ndocument.body.appendChild(spotifyPlayer);\n\n// Example of programmatic control after element is added to DOM\nspotifyPlayer.addEventListener('loadedmetadata', () => {\n  console.log('Spotify player loaded metadata.');\n  spotifyPlayer.play();\n});\n\nspotifyPlayer.addEventListener('play', () => {\n  console.log('Playback started!');\n});\n\nspotifyPlayer.addEventListener('error', (e) => {\n  console.error('Spotify player error:', e);\n});\n","lang":"typescript","description":"Demonstrates how to import and instantiate the `spotify-audio` custom element, set its source, append it to the DOM, and programmatically control playback. It uses an environment variable for a Spotify Track URI to ensure a runnable example.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}