Hardcoded crossOrigin='anonymous' breaks playback of media served without CORS headers

[adamsilverstein]

createAudio() unconditionally sets crossOrigin = 'anonymous' on the audio element it creates:

createAudio() {
    if (this.options.audioMode === 'external') {
        this.audio = null;
        return;
    }
    this.audio = new Audio();
    this.audio.preload = this.options.preload || 'metadata';
    this.audio.crossOrigin = 'anonymous';
}

Setting crossOrigin forces the browser to make a CORS request for the media. If the audio file is hosted somewhere that doesn't send Access-Control-Allow-Origin (a common setup: media offloaded to S3/a CDN with default configuration), the request is blocked and playback fails entirely, even though a plain <audio> element would play the same URL fine.

As far as I can tell the attribute isn't needed for the player's core functionality:

• The audio element is never connected to an AudioContext via createMediaElementSource, so playback doesn't require CORS-clean media.
• Waveform peak analysis goes through a separate fetch() + decodeAudioData path, which already falls back to placeholder peaks when the fetch fails.

Request: make this configurable, e.g. an options.crossOrigin accepting 'anonymous', 'use-credentials', or null/unset (don't set the attribute). Reading it from a data-cross-origin container attribute like the other options would be ideal. If backwards compatibility allows, defaulting to unset would match what <audio> does natively and avoid the broken-playback failure mode out of the box.

Context: WordPress's Gutenberg Playlist block uses waveform-player and hit this with CDN-hosted media (report: https://core.trac.wordpress.org/ticket/65673). We're currently working around it by clearing audio.crossOrigin right after constructing the player (WordPress/gutenberg#80533), which works because load() is deferred to a requestAnimationFrame callback, but a supported option would let us drop the workaround.

Happy to send a PR if you're open to it.

[arraypress]

Thanks for the thorough write-up, @adamsilverstein — your analysis is exactly right. The <audio> element is never wired into an AudioContext (no createMediaElementSource), so playback never needed CORS-clean media, and peak analysis has its own fetch() + placeholder-fallback path that's unaffected. The unconditional crossOrigin = 'anonymous' could only ever break the CDN-hosted case you hit, never enable anything.

Shipped just now in @arraypress/waveform-player@1.23.0:

• New crossOrigin option — 'anonymous' | 'use-credentials' | null — also settable via data-cross-origin on the container.
• The default is now unset: the player no longer touches crossOrigin at all, matching a plain <audio>. So CDN media without Access-Control-Allow-Origin plays out of the box, and you can drop the requestAnimationFrame workaround in Playlist: Fix playback of tracks served without CORS headers WordPress/gutenberg#80533. To opt back into the old behaviour, pass crossOrigin: 'anonymous' (or data-cross-origin="anonymous").

new WaveformPlayer(el, { url: '…', crossOrigin: 'anonymous' }); // opt back in

<div data-waveform-player data-url="…" data-cross-origin="anonymous"></div>

Since the default flips, it went out as a minor bump with a changelog Changed note. The framework wrappers pick it up too — a crossOrigin prop on the React/Vue/Svelte/Astro player wrappers, and a crossOrigin config key on the bar wrappers (all published).

No PR needed on your side — appreciated the offer, and thanks for the clear reproduction plus the trac/gutenberg links. Docs: https://docs.waveformplayer.com/player/options/

Going to close this as resolved, but happy to reopen if anything's off on your end.

[adamsilverstein]

Shipped just now in @arraypress/waveform-player@1.23.0

Amazing! 🎉

Thanks for the prompt response.