diff --git a/frontend/src/AppState.test.ts b/frontend/src/AppState.test.ts
index cd67b41..7fd56a3 100644
--- a/frontend/src/AppState.test.ts
+++ b/frontend/src/AppState.test.ts
@@ -19,31 +19,37 @@ const initialState: State = {
 };
 
 describe('stateReducer', () => {
-  describe('mediasetloaded', () => {
+  describe('audiosourceloaded', () => {
     describe.each([
       {
-        audioFrames: 4410000,
-        wantViewportFrames: 220500,
+        src: 'foo.opus',
+        numFrames: 22050,
+        wantViewport: { start: 0, end: 1100 },
+        wantViewportCanvas: { x1: 0, x2: 100 },
       },
       {
-        audioFrames: 44100,
-        wantViewportFrames: 2200,
+        src: 'foo.opus',
+        numFrames: 44100000,
+        wantViewport: { start: 0, end: 2205000 },
+        wantViewportCanvas: { x1: 0, x2: 100 },
       },
     ])(
-      'mediaset with $audioFrames frames',
-      ({ audioFrames, wantViewportFrames }) => {
+      '$numFrames frames',
+      ({ src, numFrames, wantViewport, wantViewportCanvas }) => {
         it('generates the expected state', () => {
           const mediaSet = MediaSet.fromPartial({
             id: '123',
-            audioFrames: audioFrames,
+            audioFrames: 0,
           });
           const state = stateReducer(
-            { ...initialState },
-            { type: 'mediasetloaded', mediaSet: mediaSet }
+            { ...initialState, mediaSet },
+            { type: 'audiosourceloaded', src, numFrames }
           );
-          expect(state.mediaSet).toBe(mediaSet);
-          expect(state.viewport.start).toEqual(0);
-          expect(state.viewport.end).toEqual(wantViewportFrames);
+
+          expect(state.mediaSet!.audioFrames).toEqual(numFrames);
+          expect(state.audioSrc).toEqual(src);
+          expect(state.viewport).toEqual(wantViewport);
+          expect(state.viewportCanvas).toEqual(wantViewportCanvas);
         });
       }
     );
diff --git a/frontend/src/AppState.tsx b/frontend/src/AppState.tsx
index 02cc0fa..5a815de 100644
--- a/frontend/src/AppState.tsx
+++ b/frontend/src/AppState.tsx
@@ -159,16 +159,7 @@ function handleMediaSetLoaded(
   state: State,
   { mediaSet }: MediaSetLoadedAction
 ): State {
-  const numFrames = Math.min(
-    Math.round(mediaSet.audioFrames / CanvasWidth) *
-      initialViewportCanvasPixels,
-    mediaSet.audioFrames
-  );
-
-  return setViewport(
-    { ...state, mediaSet },
-    { type: 'setviewport', viewport: { start: 0, end: numFrames } }
-  );
+  return { ...state, mediaSet };
 }
 
 function handleOverviewPeaksLoaded(
@@ -194,11 +185,22 @@ function handleAudioSourceLoaded(
     return state;
   }
 
-  return {
-    ...state,
-    audioSrc: src,
-    mediaSet: { ...mediaSet, audioFrames: numFrames },
-  };
+  const viewportEnd = Math.min(
+    Math.round(numFrames / CanvasWidth) * initialViewportCanvasPixels,
+    numFrames
+  );
+
+  return setViewport(
+    {
+      ...state,
+      audioSrc: src,
+      mediaSet: {
+        ...mediaSet,
+        audioFrames: numFrames,
+      },
+    },
+    { type: 'setviewport', viewport: { start: 0, end: viewportEnd } }
+  );
 }
 
 function handleVideoSourceLoaded(