Sticky mini audio player dock

<?php
/**
 * Sticky audio dock.
 *
 * @package Acme_Theme
 */

defined( 'ABSPATH' ) || exit;

function acme_audio_dock_assets(): void {
	$uri = get_template_directory_uri() . '/assets/';
	wp_enqueue_style( 'acme-dock', $uri . 'audio-dock.css', array(), '1.0.0' );
	wp_enqueue_script( 'acme-dock', $uri . 'audio-dock.js', array(), '1.0.0', array( 'in_footer' => true, 'strategy' => 'defer' ) );
}
add_action( 'wp_enqueue_scripts', 'acme_audio_dock_assets' );

function acme_audio_dock_markup(): void {
	?>
	<div class="acme-dock" role="region" aria-label="<?php esc_attr_e( 'Audio player', 'acme-theme' ); ?>" hidden>
		<button type="button" class="acme-dock__play" aria-label="<?php esc_attr_e( 'Play or pause', 'acme-theme' ); ?>"></button>
		<span class="acme-dock__title"></span>
		<input type="range" class="acme-dock__seek" min="0" max="100" value="0" aria-label="<?php esc_attr_e( 'Seek', 'acme-theme' ); ?>">
		<audio preload="none"></audio>
	</div>
	<?php
}
add_action( 'wp_footer', 'acme_audio_dock_markup' );

// Helper for templates: a link the dock script picks up.
function acme_audio_link( string $url, string $title ): string {
	return sprintf( '<a href="%1$s" data-audio="%1$s" data-title="%2$s">%3$s</a>', esc_url( $url ), esc_attr( $title ), esc_html( $title ) );
}

(() => {
	const dock = document.querySelector('.acme-dock');
	if (!dock) return;
	const audio = dock.querySelector('audio');
	const play = dock.querySelector('.acme-dock__play');
	const seek = dock.querySelector('.acme-dock__seek');

	document.addEventListener('click', (e) => {
		const link = e.target.closest('[data-audio]');
		if (!link) return;
		e.preventDefault();
		audio.src = link.dataset.audio;
		dock.querySelector('.acme-dock__title').textContent = link.dataset.title || '';
		dock.hidden = false;
		audio.play();
	});

	play.addEventListener('click', () => (audio.paused ? audio.play() : audio.pause()));
	audio.addEventListener('play', () => play.classList.add('is-playing'));
	audio.addEventListener('pause', () => play.classList.remove('is-playing'));
	audio.addEventListener('timeupdate', () => {
		if (audio.duration) seek.value = (audio.currentTime / audio.duration) * 100;
	});
	seek.addEventListener('input', () => {
		if (audio.duration) audio.currentTime = (seek.value / 100) * audio.duration;
	});
})();

.acme-dock { position: fixed; inset: auto 0 0 0; z-index: 50; display: flex; gap: 1rem; align-items: center; padding: .6rem 1rem; background: #111; color: #fff; }
.acme-dock[hidden] { display: none; }
.acme-dock__title { flex: 0 1 14rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.acme-dock__seek { flex: 1; }
.acme-dock__play { width: 2.5rem; height: 2.5rem; border: 0; border-radius: 50%; background: #fff; cursor: pointer; }
.acme-dock__play::before { content: "\25B6"; color: #111; }
.acme-dock__play.is-playing::before { content: "\275A\275A"; letter-spacing: -2px; }