Interactive Playground
A highly modular, lightweight Vanilla JS music player API supporting LRC lyrics synchronization, instantly convertible into various Card UI formats.
MusicEmbedAPI is a lightweight, modular, client-side audio embed player built with Vanilla JavaScript (ES6).
It provides a modern music-player experience with a UI inspired by the overall experience of services such as Spotify, while remaining a standalone browser component that does not require React, Vue, or another frontend framework.
Design note: MusicEmbedAPI is inspired by modern music-streaming interfaces, with Spotify being the primary visual and UX reference. It is an independent project and is not affiliated with, endorsed by, or sponsored by Spotify.
MusicEmbedAPI provides three display modes. The default type is
full.
The player uses the browser's native HTMLAudioElement.
Supported audio sources can be any browser-compatible audio URL, such
as MP3, WAV, and other formats supported by the target browser.
MusicEmbedAPI does not host or distribute audio files. You provide the
audio URL through the src option.
Lyrics can be supplied as a string in LRC format.
[00:05.20]First line of the song
[00:10.50]Second line of the song
[00:15.90]Third line of the songThe player parses the timestamps and automatically highlights the current lyric line as the audio plays. Lyrics can also automatically scroll to keep the active line visible.
The player supports dark and light modes.
Dark mode is the default. The compact track and
lyrics cards can also use a custom
themeColor.
The full player can optionally display an artist section with an artist banner, name, verification indicator, statistics, and description.
You can show production credits and a license label directly inside the full player. This is useful when distributing music or other media with attribution requirements.
The full player includes sharing support through the browser's Web Share API. When Web Share is unavailable, MusicEmbedAPI falls back to copying the configured share URL to the clipboard.
You can disable selected controls without modifying the source code:
MusicEmbedAPI is intended for modern browsers that support:
HTMLAudioElementNo frontend framework is required. No build step is required for normal browser usage.
MusicEmbedAPI is a browser-side JavaScript library. Place the
JavaScript file in your project and load it with a normal
<script> tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MusicEmbedAPI Example</title>
</head>
<body>
<div id="music-player"></div>
<script src="./musicembed.js"></script>
<script>
const player = new MusicEmbed({
type: "full",
container: "#music-player",
width: "100%", // Responsive width
height: "auto",
src: "./music/song.mp3",
cover: "./images/cover.jpg",
title: "My Song",
author: "My Artist",
mode: "dark"
});
</script>
</body>
</html>The constructor accepts an optional configuration object.
MusicEmbedAPI allows specific controls to be disabled.
Important: Skip Button Behavior
The previous/next buttons are
not playlist navigation controls. They seek
approximately -5 seconds (Previous) and
+5 seconds (Next).
Provide LRC-formatted lyrics using the lyrics option.
The format is [mm:ss.xx]Lyric text. Lyrics sort
automatically by timestamp.
lyrics: `
[00:02.00]Welcome to the song
[00:06.50]This line appears next
[00:11.20]Now the third line is active
`
Auto Scroll: Enabled by default (autoScrollLyrics: true).
Pass an object to artistInformation and
credits to display detailed track metadata and
attribution inside the full player.
credits: {
active: true,
list: [
{ role: "Vocalist", name: "Tenxi" },
{ role: "Producer", name: "DIA" }
]
}You can create multiple MusicEmbed instances on the same page. Each instance receives its own generated internal ID and renders into its configured container.
Note: Pressing Space toggles play/pause globally
(unless typing in an input/textarea), which can affect the instance
handling the shortcut.
license and credits options.
Security Note: MusicEmbedAPI injects configuration values into generated HTML. Do not pass raw untrusted input directly into fields like title, author, lyrics, credits, or license. Treat them as application data and sanitize them.
CORS Considerations: Normal browser media loading rules apply. Host audio on infrastructure configured for your website, or ensure the external media host permits CORS.
const player = new MusicEmbed({
type: "full",
container: "#music-player",
width: "100%", // Responsive
height: "auto", // No internal scrollbar limit
mode: "dark",
src: "music.mp3",
cover: "cover.png",
title: "Makasih Tuhan",
author: "Tenxi",
disableScrubbing: false,
disableDurationText: false,
disableSkip: false,
disableShare: false,
lyrics: `
[00:00.00] Intro...
[00:05.20] Lirik baris pertama
[00:10.40] Lirik baris kedua
`,
autoScrollLyrics: true,
artistInformation: {
active: true,
banner: "cover.png",
name: "Tenxi",
verified: false,
stats: "",
description: "J4W4R4"
},
license: "Creative Commons Attribution 4.0",
credits: {
active: true,
list: [
{ role: "Vocalist", name: "Tenxi" },
{ role: "Producer", name: "DIA" }
]
},
share: {
title: "Dengarkan Makasih Tuhan - Tenxi",
description: "Lagu terbaru dari Tenxi",
url: "https://jasonpw.web.id"
}
});MusicEmbedAPI is not:
It is a client-side JavaScript player component. You provide the media and metadata; MusicEmbedAPI provides the player interface and playback experience.
Contributions are welcome! You can contribute by reporting bugs, suggesting improvements, improving docs, accessibility, or browser compatibility, adding tests, or adding new features.
Copyright © 2026 JPROJECT-1. MusicEmbedAPI is licensed under the MIT License. The MIT License permits use, modification, distribution, and private or commercial use, provided that the copyright notice and license notice are retained.