av-sync/render-audio.js

@@ -28,9 +28,6 @@ for (let i = 0; i < numberOfRepeats; i++) {
 	finalSamples.set(oneSecondChunk, i * sampleRate);
 }
 
-let halfSecondSilence = new Float32Array(sampleRate / 2).fill(0);
-finalSamples = Float32Array.from([...halfSecondSilence, ...finalSamples]);
-
 let finalBuffer = wav.encode([finalSamples], { sampleRate: sampleRate, float: true, bitDepth: 32 });
 
 fs.writeFileSync(options.output, finalBuffer);

av-sync/render-video.js

@@ -31,19 +31,16 @@ await page.evaluate(async (fps) => {
 }, options.fps);
 
 const totalFrames = parseInt(options.fps) * parseInt(options.cycles);
-const half = Math.floor(parseInt(options.fps) / 2);
 for (let frame = 0; frame < totalFrames; frame++) {
 	let start = Date.now();
 	await page.evaluate(async (n) => {
 		// @ts-ignore
 		await window.setFrame(n);
-	}, frame + half);
+	}, frame);
 	const path = `${options.output}/${frame.toString().padStart(Math.log10(totalFrames) + 1, '0')}.png`;
 	await page.screenshot({ path, omitBackground: true });
 	let end = Date.now();
-	console.log(
-		`Captured frame ${frame + half}: ${frame + 1}/${totalFrames} (took ${end - start}ms)`
-	);
+	console.log(`Captured frame ${frame + 1}/${totalFrames} (took ${end - start}ms)`);
 }
 
 console.log('Done.');

av-sync/src/components/Scale.svelte

@@ -3,24 +3,14 @@
 	export let fps: number;
 </script>
 
-<div class="scale" style="--frame: {frame}; --fps: {fps}">
+<div class="scale">
 	<div class="labels">
 		<div>Video Late</div>
 		<div>Audio Late</div>
 	</div>
-	<div class="zero">
-		<div class="label">0</div>
-		<div class="mark"></div>
-	</div>
 	<div class="indicator"></div>
 	<div class="ticks">
-		<div class="tick"></div>
 		{#each Array.from({ length: fps }, (_, i) => i) as i}
-			<div class="spacer" class:active={i === (frame + fps / 2) % fps}>
-				{#if i % (fps / 10) === 0 && i !== 0 && i !== fps / 2}
-					<div class="label">{(i - fps / 2) * (1000 / fps)}ms</div>
-				{/if}
-			</div>
 			<div class="tick"></div>
 		{/each}
 	</div>
@@ -58,56 +48,12 @@
 
 	.ticks {
 		display: flex;
-		flex-wrap: wrap;
-		width: 100%;
-
-		& .spacer {
-			position: relative;
-			flex-grow: 1;
-
-			&.active {
-				background: var(--color-active);
-				z-index: 9;
-			}
-
-			& .label {
-				position: absolute;
-				top: calc(100% + 2em);
-				left: 50%;
-				transform: translateX(-50%) rotate(90deg);
-
-				line-height: 1;
-				font-size: 13px;
-			}
-		}
-
-		& .tick {
-			width: 2px;
-			height: 5vh;
-			background: white;
-		}
+		justify-content: space-between;
 	}
 
-	.zero {
-		position: absolute;
-		top: calc(50% - 5vh * 2.5 / 2);
-		left: calc(50%);
-		width: calc(100% / var(--fps) - 1px);
-		font-size: 2vw;
-
-		& .label {
-			position: absolute;
-			top: -1.2em;
-			color: transparent;
-		}
-
-		& .mark {
-			width: 2px;
-			height: calc(5vh * 2.5);
-			background: white;
-			position: absolute;
-			top: 0;
-			left: 50%;
-		}
+	.tick {
+		width: 2px;
+		height: 3vh;
+		background: white;
 	}
 </style>

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "testcard",
-	"version": "0.0.0",
+	"version": "0.0.1",
 	"private": true,
 	"scripts": {
 		"dev": "vite dev",

src/routes/+page.svelte

@@ -14,7 +14,7 @@
 			<i class="ti ti-volume"></i>
 			Audio
 		</a>
-		<a href="av-sync">
+		<a href="av-sync" class="disabled">
 			<i class="ti ti-time-duration-off"></i>
 			AV&nbsp;Sync
 		</a>

src/routes/audio/channels/+layout.svelte

@@ -69,7 +69,7 @@
 	}
 
 	:global(.channels .label) {
-		opacity: 0.2;
+		opacity: 0.33;
 		font-size: 6rem;
 
 		position: absolute;