Examples

Copy-paste examples for common WebPlayer use cases. Each example is a self-contained HTML snippet you can drop into your page.

Basic embed

The simplest possible integration. Add the script tag and the player handles everything:

<!DOCTYPE html>
<html>
<body>
  <h1>My Music Page</h1>
  <ul>
    <li><a href="https://example.com/track1.mp3">Track 1</a></li>
    <li><a href="https://example.com/track2.mp3">Track 2</a></li>
    <li><a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">YouTube Video</a></li>
  </ul>

  <script src="https://webplayer.warmerdam.ai/widget/loader.js" async></script>
</body>
</html>

Custom theme

Set the player to light mode and adjust the default volume:

<script>
var WPParams = {
  theme: "light",
  volume: 0.6,
  autoplay: false
};
</script>
<script src="https://webplayer.warmerdam.ai/widget/loader.js" async></script>

Use theme: "auto" to follow the user's system preference (light or dark).

Scoped scanning

Only scan specific parts of the page for media links, and exclude others:

<script>
var WPParams = {
  include: "main.content, article",
  exclude: ".sidebar, .ad-block, nav"
};
</script>
<script src="https://webplayer.warmerdam.ai/widget/loader.js" async></script>

<!-- Only links inside <main class="content"> and <article> are scanned.
     Links inside .sidebar, .ad-block, and nav are skipped. -->

YouTube-focused page

A page with YouTube links. The player detects them and uses the embedded YouTube player for playback, with a video viewport:

<!DOCTYPE html>
<html>
<body>
  <h1>My Favorite Videos</h1>

  <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">Rick Astley - Never Gonna Give You Up</a>
  <a href="https://www.youtube.com/watch?v=9bZkp7q19f0">PSY - Gangnam Style</a>
  <a href="https://youtu.be/kJQP7kiw5Fk">Luis Fonsi - Despacito</a>

  <script>
  var WPParams = {
    autoplay: false,
    theme: "dark"
  };
  </script>
  <script src="https://webplayer.warmerdam.ai/widget/loader.js" async></script>
</body>
</html>

Playlist file integration

Link to an XSPF, M3U, or PLS playlist file. The player fetches and parses it automatically:

<!-- Link to an XSPF playlist file -->
<a href="/playlists/summer-mix.xspf" class="htrack">Summer Mix (12 tracks)</a>

<!-- Link to an M3U playlist -->
<a href="/playlists/radio-stations.m3u" class="htrack">Radio Stations</a>

<script src="https://webplayer.warmerdam.ai/widget/loader.js" async></script>

The htrack class ensures these links are always detected, even if the file extension is not in the default detection list.

Programmatic control

Use the JavaScript API to build custom controls or integrate with other parts of your application:

<button onclick="WebPlayer.togglePlayPause()">Play / Pause</button>
<button onclick="WebPlayer.next()">Next</button>
<button onclick="WebPlayer.previous()">Previous</button>
<input type="range" min="0" max="100" oninput="WebPlayer.setVolume(this.value / 100)">

<script>
// Wait for the player to be ready, then display track info
WebPlayer.events.on('player:ready', () => {
  console.log('Tracks loaded:', WebPlayer.playlist.length);
});

WebPlayer.events.on('track:change', ({ track }) => {
  document.getElementById('now-playing').textContent = track.title;
});
</script>

<script src="https://webplayer.warmerdam.ai/widget/loader.js" async></script>

Event listening

A more complete event listener setup for building a custom progress display and handling errors:

<script>
// Custom progress bar
WebPlayer.events.on('playback:timeupdate', ({ currentTime, duration, progress }) => {
  const bar = document.getElementById('progress');
  bar.style.width = (progress * 100) + '%';
  document.getElementById('time').textContent =
    formatTime(currentTime) + ' / ' + formatTime(duration);
});

// Track changes
WebPlayer.events.on('track:change', ({ track, index }) => {
  document.getElementById('title').textContent = track.title;
  document.getElementById('counter').textContent =
    (index + 1) + ' of ' + WebPlayer.playlist.length;
});

// Error handling
WebPlayer.events.on('playback:error', ({ track, error }) => {
  console.error('Playback error for', track.title, ':', error);
  // Optionally skip to next track
  WebPlayer.next();
});

// Scanner complete
WebPlayer.events.on('scanner:complete', ({ tracks, count }) => {
  console.log('Found', count, 'playable tracks on this page');
});

function formatTime(seconds) {
  const m = Math.floor(seconds / 60);
  const s = Math.floor(seconds % 60);
  return m + ':' + (s < 10 ? '0' : '') + s;
}
</script>