Use nanohtml in audio-player content script

app/audio-player/contentscript.js

@@ -1,22 +1,26 @@
 import * as WaveformPlaylist from 'waveform-playlist';
 import delay from 'delay';
+import html from 'nanohtml'
 
 import { parseMediaFragmentIdentifier } from '../util/media-fragment-identifier.js';
 
 async function init() {
-	document.body.innerHTML = `
+	document.body.innerHTML = '';
+
+	const mainEl = html`
 		<main>
 			<div id="controls">
-				<button id="playpause">⏯</button>
+				<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" />
+				  <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'),
@@ -27,15 +31,13 @@ async function init() {
 
 	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)
-	);
+	function playpause() {
+		eventEmitter.emit(playlist.isPlaying() ? 'pause' : 'play');
+	}
+
+	function updateVolume(event) {
+		eventEmitter.emit('mastervolumechange', event.target.value);
+	}
 
 	// Load the file
 	await playlist.load([{