Setup

Script tag (one line)

Add this line before the closing </body> tag on any HTML page:

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

The player will automatically scan your page for media links and make them playable. No configuration is needed for the default behavior.

With configuration (WPParams)

To customize behavior, define a WPParams object before the script tag:

<script>
var WPParams = {
  autoplay: false,
  theme: "dark",
  volume: 0.8,
  include: "main",
  exclude: ".sidebar"
};
</script>
<script src="https://webplayer.warmerdam.ai/widget/loader.js" async></script>

See the Configuration page for a full list of options.

With data attributes

As an alternative to WPParams, you can pass configuration via data attributes directly on the script tag:

<script
  src="https://webplayer.warmerdam.ai/widget/loader.js"
  data-theme="dark"
  data-include="main article"
  data-autoplay="false"
  data-volume="0.8"
  async
></script>

Data attributes use the same names as WPParams properties, prefixed with data-. If both are present, WPParams takes priority.

npm package

For bundled applications and full programmatic control, install via npm:

npm install @webplayer/webplayer

Then import and initialize in your code:

import { WebPlayer } from '@webplayer/webplayer';

const player = new WebPlayer({
  container: document.body,
  theme: 'dark',
  autoplay: false,
});

player.init();

See the Self-Hosting page for more details on using the npm packages.

Browser compatibility

WebPlayer works in all modern browsers: Chrome, Firefox, Safari, and Edge (latest two major versions). It uses Web Components, the Web Audio API, and ES2020+ features. Internet Explorer is not supported.