bookmark-audio-fragment/app/audio-player

import * as WaveformPlaylist from 'waveform-playlist';
import delay from 'delay';
import html from 'nanohtml'

import { parseMediaFragmentIdentifier } from '../util/media-fragment-identifier.js';

export default async function init() {
	document.body.innerHTML = '';

	const mainEl = html`
		<main>
			<div id="controls">
				<button id="playpause" onclick=${playpause}>⏯</button>
				<div>
				  <label for="volume" id="volume-label">🔊</label>
				  <input type="range" min="0" max="100" value="100" id="volume" oninput=${updateVolume}/>
				</div>
			</div>
			<div id="container">
			</div>
		</main>
	`;
	document.body.appendChild(mainEl);

	const playlist = WaveformPlaylist.init({
	  container: document.getElementById('container'),
		timescale: true,
		waveHeight: 100,
		state: 'select',
	});

	const eventEmitter = playlist.getEventEmitter();

	function playpause() {
		eventEmitter.emit(playlist.isPlaying() ? 'pause' : 'play');
	}

	function updateVolume(event) {
		eventEmitter.emit('mastervolumechange', event.target.value);
	}

	document.body.addEventListener('keydown', event => {
		if (event.target !== document.body) return;
		if (event.code === 'Space') {
			playpause();
		}
	});

	// Load the file
	await playlist.load([{
		src: document.URL,
	}]);

	function syncFragmentToSelection() {
		// Read target fragment from URL
		let start, end;

		const fragmentIdentifier = window.location.hash;
		if (fragmentIdentifier) {
			try {
				const parsed = parseMediaFragmentIdentifier(fragmentIdentifier);
				start = parsed.start;
				end = parsed.end;
			} catch (err) {}
		}

		// Emit event to update selection in player
		eventEmitter.emit('select', start, end);
	}

	// Bind window hash change to update player
	window.addEventListener('hashchange', async () => {
		if(playlist.isPlaying()) {
			eventEmitter.emit('stop')
			// pause needs a small delay, coz the lib doesn't
			// update player view (drawRequest) when isPlaying() = true.
			await delay(10);
		}
		await syncFragmentToSelection();
		eventEmitter.emit('play');
	});

	// Read start & end from window location.
	syncFragmentToSelection();

	// Start playing. A tiny delay seems needed in Firefox to show the cursor at the right place.
	requestAnimationFrame(() => eventEmitter.emit('play'));

	return playlist;
}