nicksheffield · March 17, 2018 10:42
diff --git a/film_and_40s_player.html b/film_and_40s_player.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<meta http-equiv="X-UA-Compatible" content="ie=edge">
 	<title>Film &amp; 40's player</title>
 	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css">
 	<style>
 		body {
 			margin: 1em;
 		}

 		video {
 			width: 600px;
 		}
 		
 		audio {
 			width: 568px;
 		}

 		#offset {
 			width: 200px;
 			margin-right: 0.3em;
 		}
 	</style>
 </head>
 <body>
 	<h1>Film &amp; 40's player</h1>
 	<video controls></video><br>
 	<audio controls></audio>

 	<div id="controls">
 		<p>
 			<button class="btn btn-primary" id="play">Play</button>
 		</p>
 		<div>
 			<p id="desired_display">Desired offset: 0</p>
 			<p id="display">Actual offset: 0</p>
 		</div>
 		<p>
 			<button class="btn btn-dark" id="sync">Sync</button>
 		</p>
 		<p class="form-inline">
 			<input type="text" class="form-control" id="offset">
 			<button class="btn btn-dark" id="offset_set">Set</button>
 		</p>
 		<p>
 			<button class="btn btn-dark" id="ap100">Audio +100</button>
 			<button class="btn btn-dark" id="am100">Audio -100</button>
 		</p>
 		<p>
 			<button class="btn btn-dark" id="ap1000">Audio +1000</button>
 			<button class="btn btn-dark" id="am1000">Audio -1000</button>
 		</p>
 	</div>

 	<script>
 		// the name of the video file
 		const video_src = ''
 		// the name of the audio file
 		const audio_src = ''
 		// how far ahead the audio is in seconds
 		let offset = 0


 		const video_el = document.querySelector('video')
 		const audio_el = document.querySelector('audio')
 		const play_btn = document.querySelector('#play')
 		const sync_btn = document.querySelector('#sync')
 		const offset_el = document.querySelector('#offset')
 		const offset_set = document.querySelector('#offset_set')
 		const ap100 = document.querySelector('#ap100')
 		const am100 = document.querySelector('#am100')
 		const ap1000 = document.querySelector('#ap1000')
 		const am1000 = document.querySelector('#am1000')
 		const display = document.querySelector('#display')
 		const desired_display = document.querySelector('#desired_display')

 		const isPlaying = (el) => el.currentTime > 0 && el.paused === false && el.ended === false
 		
 		video_el.src = video_src
 		audio_el.src = audio_src

 		const pause = () => {
 			if (!isPlaying(video_el) && !isPlaying(audio_el)) {
 				video_el.play()
 				audio_el.play()
 				play_btn.innerHTML = 'Pause'
 			} else {
 				video_el.pause()
 				audio_el.pause()
 				play_btn.innerHTML = 'Play'
 			}
 		}

 		const sync = () => {
 			audio_el.currentTime = video_el.currentTime + offset
 		}

 		play_btn.addEventListener('click', pause)

 		ap100.addEventListener('click',  () => {
 			offset += 0.100
 			sync()
 		})

 		am100.addEventListener('click',  () => {
 			offset -= 0.100
 			sync()
 		})

 		ap1000.addEventListener('click', () => {
 			offset += 1.000
 			sync()
 		})

 		am1000.addEventListener('click', () => {
 			offset -= 1.000
 			sync()
 		})

 		offset_set.addEventListener('click', () => {
 			offset = parseFloat(offset_el.value)
 			sync()
 		})

 		sync_btn.addEventListener('click', () => {
 			sync()
 		})

 		video_el.addEventListener('seeking', () => {
 			sync()
 		})

 		setInterval(() => {
 			desired_display.innerHTML = 'Desired offset: ' + offset.toFixed(3)
 			display.innerHTML = 'Actual offset: ' + (audio_el.currentTime - video_el.currentTime).toFixed(3)
 		}, 1000 / 60)

 		window.addEventListener('keyup', (e) => {
 			switch(e.key) {
 				case 'ArrowLeft':
 					video_el.currentTime -= 5.000
 					sync()
 					break;
 				case 'ArrowRight':
 					video_el.currentTime += 5.000
 					sync()
 					break;
 				case ' ':
 					pause()
 					break;
 			}
 		})

 	</script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Film & 40's player</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css">
	<style>
	body {
	margin: 1em;
	}

	video {
	width: 600px;
	}

	audio {
	width: 568px;
	}

	#offset {
	width: 200px;
	margin-right: 0.3em;
	}
	</style>
	</head>
	<body>
	<h1>Film & 40's player</h1>
	<video controls></video><br>
	<audio controls></audio>

	<div id="controls">
	<p>
	<button class="btn btn-primary" id="play">Play</button>
	</p>
	<div>
	<p id="desired_display">Desired offset: 0</p>
	<p id="display">Actual offset: 0</p>
	</div>
	<p>
	<button class="btn btn-dark" id="sync">Sync</button>
	</p>
	<p class="form-inline">
	<input type="text" class="form-control" id="offset">
	<button class="btn btn-dark" id="offset_set">Set</button>
	</p>
	<p>
	<button class="btn btn-dark" id="ap100">Audio +100</button>
	<button class="btn btn-dark" id="am100">Audio -100</button>
	</p>
	<p>
	<button class="btn btn-dark" id="ap1000">Audio +1000</button>
	<button class="btn btn-dark" id="am1000">Audio -1000</button>
	</p>
	</div>

	<script>
	// the name of the video file
	const video_src = ''
	// the name of the audio file
	const audio_src = ''
	// how far ahead the audio is in seconds
	let offset = 0


	const video_el = document.querySelector('video')
	const audio_el = document.querySelector('audio')
	const play_btn = document.querySelector('#play')
	const sync_btn = document.querySelector('#sync')
	const offset_el = document.querySelector('#offset')
	const offset_set = document.querySelector('#offset_set')
	const ap100 = document.querySelector('#ap100')
	const am100 = document.querySelector('#am100')
	const ap1000 = document.querySelector('#ap1000')
	const am1000 = document.querySelector('#am1000')
	const display = document.querySelector('#display')
	const desired_display = document.querySelector('#desired_display')

	const isPlaying = (el) => el.currentTime > 0 && el.paused === false && el.ended === false

	video_el.src = video_src
	audio_el.src = audio_src

	const pause = () => {
	if (!isPlaying(video_el) && !isPlaying(audio_el)) {
	video_el.play()
	audio_el.play()
	play_btn.innerHTML = 'Pause'
	} else {
	video_el.pause()
	audio_el.pause()
	play_btn.innerHTML = 'Play'
	}
	}

	const sync = () => {
	audio_el.currentTime = video_el.currentTime + offset
	}

	play_btn.addEventListener('click', pause)

	ap100.addEventListener('click', () => {
	offset += 0.100
	sync()
	})

	am100.addEventListener('click', () => {
	offset -= 0.100
	sync()
	})

	ap1000.addEventListener('click', () => {
	offset += 1.000
	sync()
	})

	am1000.addEventListener('click', () => {
	offset -= 1.000
	sync()
	})

	offset_set.addEventListener('click', () => {
	offset = parseFloat(offset_el.value)
	sync()
	})

	sync_btn.addEventListener('click', () => {
	sync()
	})

	video_el.addEventListener('seeking', () => {
	sync()
	})

	setInterval(() => {
	desired_display.innerHTML = 'Desired offset: ' + offset.toFixed(3)
	display.innerHTML = 'Actual offset: ' + (audio_el.currentTime - video_el.currentTime).toFixed(3)
	}, 1000 / 60)

	window.addEventListener('keyup', (e) => {
	switch(e.key) {
	case 'ArrowLeft':
	video_el.currentTime -= 5.000
	sync()
	break;
	case 'ArrowRight':
	video_el.currentTime += 5.000
	sync()
	break;
	case ' ':
	pause()
	break;
	}
	})

	</script>
	</body>
	</html>