bookmark-audio-fragment/app/scripts

import * as WaveformPlaylist from 'waveform-playlist';

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

	const main = document.createElement('main');
	main.innerHTML = `
		<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>
	`;
	document.body.append(main);

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

	const eventEmitter = playlist.getEventEmitter();

	function onClickPlayPause(event) {
		if (playlist.isPlaying()) {
			eventEmitter.emit('pause');
		} else {
			eventEmitter.emit('play');
		}
	}

	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)
	);

	let start, end;
	const fragmentIdentifier = window.location.hash;
	if (fragmentIdentifier) {
		const match = fragmentIdentifier.match(/#t=(\d+(?:\.\d+)?)?(?:,(\d+(?:\.\d+)?))?/)
		if (match) {
			if (match[1] !== undefined) {
				start = Number.parseFloat(match[1]);
			}
			if (match[2] !== undefined) {
				end = Number.parseFloat(match[2]);
			}
		}
	}

	await playlist.load([{
		src: document.URL,
		selected: { start, end },
	}]);
}

init();