bookmark-audio-fragment/app/audio-player

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

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

async function init() {
	document.body.innerHTML = `
		<main>
			<div id="controls">
				<button id="playpause">⏯</button>
				<div>
				  <label for="volume" id="volume-label">🔊</label>
				  <input type="range" min="0" max="100" value="100" id="volume" />
				</div>
			</div>
			<div id="container">
			</div>
		</main>
	`;

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

	const eventEmitter = playlist.getEventEmitter();

	// Hook up play/pause and volume inputs
	const playpauseEl = document.getElementById('playpause');
	const volumeEl = document.getElementById('volume');
	playpauseEl.addEventListener('click',
		e => eventEmitter.emit(playlist.isPlaying() ? 'pause' : 'play')
	);
	volumeEl.addEventListener('input',
		e => eventEmitter.emit("mastervolumechange", e.target.value)
	);

	// 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 function() {
		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;
}

init().then(playlist => {
	// Store playlist as a shared global variable.
	self.playlist = playlist;
});