diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index d919960..6134444 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -88,6 +88,41 @@ function App(): JSX.Element {
 
       console.log('got media set:', mediaSet);
       setMediaSet(mediaSet);
+
+      // fetch audio asynchronously
+      console.log('fetching audio...');
+      const audioProgressStream = service.GetPeaks({
+        id: mediaSet.id,
+        numBins: CanvasLogicalWidth,
+      });
+      const peaks = audioProgressStream.pipe(map((progress) => progress.peaks));
+      setOverviewPeaks(peaks);
+
+      const audioPipe = audioProgressStream.pipe(
+        first((progress: GetPeaksProgress) => progress.url != '')
+      );
+      const fetchAudioTask = firstValueFrom(audioPipe);
+
+      // fetch video asynchronously
+      console.log('fetching video...');
+      const videoProgressStream = service.GetVideo({ id: mediaSet.id });
+      const videoPipe = videoProgressStream.pipe(
+        first((progress: GetVideoProgress) => progress.url != '')
+      );
+      const fetchVideoTask = firstValueFrom(videoPipe);
+
+      // wait for both audio, then video.
+      const audioProgress = await fetchAudioTask;
+
+      audio.src = audioProgress.url;
+      audio.muted = false;
+      audio.volume = 1;
+      console.log('set audio src', audioProgress.url);
+      setMediaSet({ ...mediaSet, audioFrames: audioProgress.audioFrames });
+
+      const videoProgress = await fetchVideoTask;
+      video.src = videoProgress.url;
+      console.log('set video src', videoProgress.url);
     })();
   }, []);
 
@@ -131,53 +166,6 @@ function App(): JSX.Element {
     return () => document.removeEventListener('keypress', handleKeyPress);
   }, [selection, playState]);
 
-  // load audio when MediaSet is loaded:
-  useEffect(() => {
-    (async function () {
-      if (mediaSet == null) {
-        return;
-      }
-      console.log('fetching audio...');
-      const service = new MediaSetServiceClientImpl(newRPC());
-      const audioProgressStream = service.GetPeaks({
-        id: mediaSet.id,
-        numBins: CanvasLogicalWidth,
-      });
-      const peaks = audioProgressStream.pipe(map((progress) => progress.peaks));
-      setOverviewPeaks(peaks);
-
-      const pipe = audioProgressStream.pipe(
-        first((progress: GetPeaksProgress) => progress.url != '')
-      );
-      const progressWithURL = await firstValueFrom(pipe);
-
-      audio.src = progressWithURL.url;
-      audio.muted = false;
-      audio.volume = 1;
-      console.log('set audio src', progressWithURL.url);
-    })();
-  }, [mediaSet]);
-
-  // load video when MediaSet is loaded:
-  useEffect(() => {
-    (async function () {
-      if (mediaSet == null) {
-        return;
-      }
-
-      console.log('fetching video...');
-      const service = new MediaSetServiceClientImpl(newRPC());
-      const videoProgressStream = service.GetVideo({ id: mediaSet.id });
-      const pipe = videoProgressStream.pipe(
-        first((progress: GetVideoProgress) => progress.url != '')
-      );
-      const progressWithURL = await firstValueFrom(pipe);
-
-      video.src = progressWithURL.url;
-      console.log('set video src', progressWithURL.url);
-    })();
-  }, [mediaSet]);
-
   // set viewport when MediaSet is loaded:
   useEffect(() => {
     if (mediaSet == null) {
diff --git a/frontend/src/Waveform.tsx b/frontend/src/Waveform.tsx
index aa9235e..87740e9 100644
--- a/frontend/src/Waveform.tsx
+++ b/frontend/src/Waveform.tsx
@@ -59,7 +59,7 @@ export const Waveform: React.FC<Props> = ({
       );
       setPeaks(peaks);
     })();
-  }, [viewport]);
+  }, [viewport, mediaSet]);
 
   // convert position to canvas pixels
   useEffect(() => {
diff --git a/frontend/src/generated/google/protobuf/duration.ts b/frontend/src/generated/google/protobuf/duration.ts
index 19e7889..3940aba 100644
--- a/frontend/src/generated/google/protobuf/duration.ts
+++ b/frontend/src/generated/google/protobuf/duration.ts
@@ -82,7 +82,9 @@ export interface Duration {
   nanos: number;
 }
 
-const baseDuration: object = { seconds: 0, nanos: 0 };
+function createBaseDuration(): Duration {
+  return { seconds: 0, nanos: 0 };
+}
 
 export const Duration = {
   encode(
@@ -101,7 +103,7 @@ export const Duration = {
   decode(input: _m0.Reader | Uint8Array, length?: number): Duration {
     const reader = input instanceof _m0.Reader ? input : new _m0.Reader(input);
     let end = length === undefined ? reader.len : reader.pos + length;
-    const message = { ...baseDuration } as Duration;
+    const message = createBaseDuration();
     while (reader.pos < end) {
       const tag = reader.uint32();
       switch (tag >>> 3) {
@@ -120,27 +122,22 @@ export const Duration = {
   },
 
   fromJSON(object: any): Duration {
-    const message = { ...baseDuration } as Duration;
-    message.seconds =
-      object.seconds !== undefined && object.seconds !== null
-        ? Number(object.seconds)
-        : 0;
-    message.nanos =
-      object.nanos !== undefined && object.nanos !== null
-        ? Number(object.nanos)
-        : 0;
-    return message;
+    return {
+      seconds: isSet(object.seconds) ? Number(object.seconds) : 0,
+      nanos: isSet(object.nanos) ? Number(object.nanos) : 0,
+    };
   },
 
   toJSON(message: Duration): unknown {
     const obj: any = {};
-    message.seconds !== undefined && (obj.seconds = message.seconds);
-    message.nanos !== undefined && (obj.nanos = message.nanos);
+    message.seconds !== undefined &&
+      (obj.seconds = Math.round(message.seconds));
+    message.nanos !== undefined && (obj.nanos = Math.round(message.nanos));
     return obj;
   },
 
   fromPartial<I extends Exact<DeepPartial<Duration>, I>>(object: I): Duration {
-    const message = { ...baseDuration } as Duration;
+    const message = createBaseDuration();
     message.seconds = object.seconds ?? 0;
     message.nanos = object.nanos ?? 0;
     return message;
@@ -196,3 +193,7 @@ if (_m0.util.Long !== Long) {
   _m0.util.Long = Long as any;
   _m0.configure();
 }
+
+function isSet(value: any): boolean {
+  return value !== null && value !== undefined;
+}
diff --git a/frontend/src/generated/media_set.ts b/frontend/src/generated/media_set.ts
index fb7243a..d03448b 100644
--- a/frontend/src/generated/media_set.ts
+++ b/frontend/src/generated/media_set.ts
@@ -71,6 +71,7 @@ export interface GetPeaksProgress {
   peaks: number[];
   percentComplete: number;
   url: string;
+  audioFrames: number;
 }
 
 export interface GetPeaksForSegmentRequest {
@@ -115,21 +116,24 @@ export interface GetVideoThumbnailResponse {
   height: number;
 }
 
-const baseMediaSet: object = {
-  id: "",
-  youtubeId: "",
-  title: "",
-  description: "",
-  author: "",
-  audioChannels: 0,
-  audioApproxFrames: 0,
-  audioFrames: 0,
-  audioSampleRate: 0,
-  audioYoutubeItag: 0,
-  audioMimeType: "",
-  videoYoutubeItag: 0,
-  videoMimeType: "",
-};
+function createBaseMediaSet(): MediaSet {
+  return {
+    id: "",
+    youtubeId: "",
+    title: "",
+    description: "",
+    author: "",
+    audioChannels: 0,
+    audioApproxFrames: 0,
+    audioFrames: 0,
+    audioSampleRate: 0,
+    audioYoutubeItag: 0,
+    audioMimeType: "",
+    videoDuration: undefined,
+    videoYoutubeItag: 0,
+    videoMimeType: "",
+  };
+}
 
 export const MediaSet = {
   encode(
@@ -184,7 +188,7 @@ export const MediaSet = {
   decode(input: _m0.Reader | Uint8Array, length?: number): MediaSet {
     const reader = input instanceof _m0.Reader ? input : new _m0.Reader(input);
     let end = length === undefined ? reader.len : reader.pos + length;
-    const message = { ...baseMediaSet } as MediaSet;
+    const message = createBaseMediaSet();
     while (reader.pos < end) {
       const tag = reader.uint32();
       switch (tag >>> 3) {
@@ -239,63 +243,38 @@ export const MediaSet = {
   },
 
   fromJSON(object: any): MediaSet {
-    const message = { ...baseMediaSet } as MediaSet;
-    message.id =
-      object.id !== undefined && object.id !== null ? String(object.id) : "";
-    message.youtubeId =
-      object.youtubeId !== undefined && object.youtubeId !== null
-        ? String(object.youtubeId)
-        : "";
-    message.title =
-      object.title !== undefined && object.title !== null
-        ? String(object.title)
-        : "";
-    message.description =
-      object.description !== undefined && object.description !== null
-        ? String(object.description)
-        : "";
-    message.author =
-      object.author !== undefined && object.author !== null
-        ? String(object.author)
-        : "";
-    message.audioChannels =
-      object.audioChannels !== undefined && object.audioChannels !== null
+    return {
+      id: isSet(object.id) ? String(object.id) : "",
+      youtubeId: isSet(object.youtubeId) ? String(object.youtubeId) : "",
+      title: isSet(object.title) ? String(object.title) : "",
+      description: isSet(object.description) ? String(object.description) : "",
+      author: isSet(object.author) ? String(object.author) : "",
+      audioChannels: isSet(object.audioChannels)
         ? Number(object.audioChannels)
-        : 0;
-    message.audioApproxFrames =
-      object.audioApproxFrames !== undefined &&
-      object.audioApproxFrames !== null
+        : 0,
+      audioApproxFrames: isSet(object.audioApproxFrames)
         ? Number(object.audioApproxFrames)
-        : 0;
-    message.audioFrames =
-      object.audioFrames !== undefined && object.audioFrames !== null
-        ? Number(object.audioFrames)
-        : 0;
-    message.audioSampleRate =
-      object.audioSampleRate !== undefined && object.audioSampleRate !== null
+        : 0,
+      audioFrames: isSet(object.audioFrames) ? Number(object.audioFrames) : 0,
+      audioSampleRate: isSet(object.audioSampleRate)
         ? Number(object.audioSampleRate)
-        : 0;
-    message.audioYoutubeItag =
-      object.audioYoutubeItag !== undefined && object.audioYoutubeItag !== null
+        : 0,
+      audioYoutubeItag: isSet(object.audioYoutubeItag)
         ? Number(object.audioYoutubeItag)
-        : 0;
-    message.audioMimeType =
-      object.audioMimeType !== undefined && object.audioMimeType !== null
+        : 0,
+      audioMimeType: isSet(object.audioMimeType)
         ? String(object.audioMimeType)
-        : "";
-    message.videoDuration =
-      object.videoDuration !== undefined && object.videoDuration !== null
+        : "",
+      videoDuration: isSet(object.videoDuration)
         ? Duration.fromJSON(object.videoDuration)
-        : undefined;
-    message.videoYoutubeItag =
-      object.videoYoutubeItag !== undefined && object.videoYoutubeItag !== null
+        : undefined,
+      videoYoutubeItag: isSet(object.videoYoutubeItag)
         ? Number(object.videoYoutubeItag)
-        : 0;
-    message.videoMimeType =
-      object.videoMimeType !== undefined && object.videoMimeType !== null
+        : 0,
+      videoMimeType: isSet(object.videoMimeType)
         ? String(object.videoMimeType)
-        : "";
-    return message;
+        : "",
+    };
   },
 
   toJSON(message: MediaSet): unknown {
@@ -307,15 +286,15 @@ export const MediaSet = {
       (obj.description = message.description);
     message.author !== undefined && (obj.author = message.author);
     message.audioChannels !== undefined &&
-      (obj.audioChannels = message.audioChannels);
+      (obj.audioChannels = Math.round(message.audioChannels));
     message.audioApproxFrames !== undefined &&
-      (obj.audioApproxFrames = message.audioApproxFrames);
+      (obj.audioApproxFrames = Math.round(message.audioApproxFrames));
     message.audioFrames !== undefined &&
-      (obj.audioFrames = message.audioFrames);
+      (obj.audioFrames = Math.round(message.audioFrames));
     message.audioSampleRate !== undefined &&
-      (obj.audioSampleRate = message.audioSampleRate);
+      (obj.audioSampleRate = Math.round(message.audioSampleRate));
     message.audioYoutubeItag !== undefined &&
-      (obj.audioYoutubeItag = message.audioYoutubeItag);
+      (obj.audioYoutubeItag = Math.round(message.audioYoutubeItag));
     message.audioMimeType !== undefined &&
       (obj.audioMimeType = message.audioMimeType);
     message.videoDuration !== undefined &&
@@ -323,14 +302,14 @@ export const MediaSet = {
         ? Duration.toJSON(message.videoDuration)
         : undefined);
     message.videoYoutubeItag !== undefined &&
-      (obj.videoYoutubeItag = message.videoYoutubeItag);
+      (obj.videoYoutubeItag = Math.round(message.videoYoutubeItag));
     message.videoMimeType !== undefined &&
       (obj.videoMimeType = message.videoMimeType);
     return obj;
   },
 
   fromPartial<I extends Exact<DeepPartial<MediaSet>, I>>(object: I): MediaSet {
-    const message = { ...baseMediaSet } as MediaSet;
+    const message = createBaseMediaSet();
     message.id = object.id ?? "";
     message.youtubeId = object.youtubeId ?? "";
     message.title = object.title ?? "";
@@ -352,7 +331,9 @@ export const MediaSet = {
   },
 };
 
-const baseGetRequest: object = { youtubeId: "" };
+function createBaseGetRequest(): GetRequest {
+  return { youtubeId: "" };
+}
 
 export const GetRequest = {
   encode(
@@ -368,7 +349,7 @@ export const GetRequest = {
   decode(input: _m0.Reader | Uint8Array, length?: number): GetRequest {
     const reader = input instanceof _m0.Reader ? input : new _m0.Reader(input);
     let end = length === undefined ? reader.len : reader.pos + length;
-    const message = { ...baseGetRequest } as GetRequest;
+    const message = createBaseGetRequest();
     while (reader.pos < end) {
       const tag = reader.uint32();
       switch (tag >>> 3) {
@@ -384,12 +365,9 @@ export const GetRequest = {
   },
 
   fromJSON(object: any): GetRequest {
-    const message = { ...baseGetRequest } as GetRequest;
-    message.youtubeId =
-      object.youtubeId !== undefined && object.youtubeId !== null
-        ? String(object.youtubeId)
-        : "";
-    return message;
+    return {
+      youtubeId: isSet(object.youtubeId) ? String(object.youtubeId) : "",
+    };
   },
 
   toJSON(message: GetRequest): unknown {
@@ -401,13 +379,15 @@ export const GetRequest = {
   fromPartial<I extends Exact<DeepPartial<GetRequest>, I>>(
     object: I
   ): GetRequest {
-    const message = { ...baseGetRequest } as GetRequest;
+    const message = createBaseGetRequest();
     message.youtubeId = object.youtubeId ?? "";
     return message;
   },
 };
 
-const baseGetPeaksRequest: object = { id: "", numBins: 0 };
+function createBaseGetPeaksRequest(): GetPeaksRequest {
+  return { id: "", numBins: 0 };
+}
 
 export const GetPeaksRequest = {
   encode(
@@ -426,7 +406,7 @@ export const GetPeaksRequest = {
   decode(input: _m0.Reader | Uint8Array, length?: number): GetPeaksRequest {
     const reader = input instanceof _m0.Reader ? input : new _m0.Reader(input);
     let end = length === undefined ? reader.len : reader.pos + length;
-    const message = { ...baseGetPeaksRequest } as GetPeaksRequest;
+    const message = createBaseGetPeaksRequest();
     while (reader.pos < end) {
       const tag = reader.uint32();
       switch (tag >>> 3) {
@@ -445,34 +425,33 @@ export const GetPeaksRequest = {
   },
 
   fromJSON(object: any): GetPeaksRequest {
-    const message = { ...baseGetPeaksRequest } as GetPeaksRequest;
-    message.id =
-      object.id !== undefined && object.id !== null ? String(object.id) : "";
-    message.numBins =
-      object.numBins !== undefined && object.numBins !== null
-        ? Number(object.numBins)
-        : 0;
-    return message;
+    return {
+      id: isSet(object.id) ? String(object.id) : "",
+      numBins: isSet(object.numBins) ? Number(object.numBins) : 0,
+    };
   },
 
   toJSON(message: GetPeaksRequest): unknown {
     const obj: any = {};
     message.id !== undefined && (obj.id = message.id);
-    message.numBins !== undefined && (obj.numBins = message.numBins);
+    message.numBins !== undefined &&
+      (obj.numBins = Math.round(message.numBins));
     return obj;
   },
 
   fromPartial<I extends Exact<DeepPartial<GetPeaksRequest>, I>>(
     object: I
   ): GetPeaksRequest {
-    const message = { ...baseGetPeaksRequest } as GetPeaksRequest;
+    const message = createBaseGetPeaksRequest();
     message.id = object.id ?? "";
     message.numBins = object.numBins ?? 0;
     return message;
   },
 };
 
-const baseGetPeaksProgress: object = { peaks: 0, percentComplete: 0, url: "" };
+function createBaseGetPeaksProgress(): GetPeaksProgress {
+  return { peaks: [], percentComplete: 0, url: "", audioFrames: 0 };
+}
 
 export const GetPeaksProgress = {
   encode(
@@ -490,14 +469,16 @@ export const GetPeaksProgress = {
     if (message.url !== "") {
       writer.uint32(26).string(message.url);
     }
+    if (message.audioFrames !== 0) {
+      writer.uint32(32).int64(message.audioFrames);
+    }
     return writer;
   },
 
   decode(input: _m0.Reader | Uint8Array, length?: number): GetPeaksProgress {
     const reader = input instanceof _m0.Reader ? input : new _m0.Reader(input);
     let end = length === undefined ? reader.len : reader.pos + length;
-    const message = { ...baseGetPeaksProgress } as GetPeaksProgress;
-    message.peaks = [];
+    const message = createBaseGetPeaksProgress();
     while (reader.pos < end) {
       const tag = reader.uint32();
       switch (tag >>> 3) {
@@ -517,6 +498,9 @@ export const GetPeaksProgress = {
         case 3:
           message.url = reader.string();
           break;
+        case 4:
+          message.audioFrames = longToNumber(reader.int64() as Long);
+          break;
         default:
           reader.skipType(tag & 7);
           break;
@@ -526,47 +510,48 @@ export const GetPeaksProgress = {
   },
 
   fromJSON(object: any): GetPeaksProgress {
-    const message = { ...baseGetPeaksProgress } as GetPeaksProgress;
-    message.peaks = (object.peaks ?? []).map((e: any) => Number(e));
-    message.percentComplete =
-      object.percentComplete !== undefined && object.percentComplete !== null
+    return {
+      peaks: Array.isArray(object?.peaks)
+        ? object.peaks.map((e: any) => Number(e))
+        : [],
+      percentComplete: isSet(object.percentComplete)
         ? Number(object.percentComplete)
-        : 0;
-    message.url =
-      object.url !== undefined && object.url !== null ? String(object.url) : "";
-    return message;
+        : 0,
+      url: isSet(object.url) ? String(object.url) : "",
+      audioFrames: isSet(object.audioFrames) ? Number(object.audioFrames) : 0,
+    };
   },
 
   toJSON(message: GetPeaksProgress): unknown {
     const obj: any = {};
     if (message.peaks) {
-      obj.peaks = message.peaks.map((e) => e);
+      obj.peaks = message.peaks.map((e) => Math.round(e));
     } else {
       obj.peaks = [];
     }
     message.percentComplete !== undefined &&
       (obj.percentComplete = message.percentComplete);
     message.url !== undefined && (obj.url = message.url);
+    message.audioFrames !== undefined &&
+      (obj.audioFrames = Math.round(message.audioFrames));
     return obj;
   },
 
   fromPartial<I extends Exact<DeepPartial<GetPeaksProgress>, I>>(
     object: I
   ): GetPeaksProgress {
-    const message = { ...baseGetPeaksProgress } as GetPeaksProgress;
+    const message = createBaseGetPeaksProgress();
     message.peaks = object.peaks?.map((e) => e) || [];
     message.percentComplete = object.percentComplete ?? 0;
     message.url = object.url ?? "";
+    message.audioFrames = object.audioFrames ?? 0;
     return message;
   },
 };
 
-const baseGetPeaksForSegmentRequest: object = {
-  id: "",
-  numBins: 0,
-  startFrame: 0,
-  endFrame: 0,
-};
+function createBaseGetPeaksForSegmentRequest(): GetPeaksForSegmentRequest {
+  return { id: "", numBins: 0, startFrame: 0, endFrame: 0 };
+}
 
 export const GetPeaksForSegmentRequest = {
   encode(
@@ -594,9 +579,7 @@ export const GetPeaksForSegmentRequest = {
   ): GetPeaksForSegmentRequest {
     const reader = input instanceof _m0.Reader ? input : new _m0.Reader(input);
     let end = length === undefined ? reader.len : reader.pos + length;
-    const message = {
-      ...baseGetPeaksForSegmentRequest,
-    } as GetPeaksForSegmentRequest;
+    const message = createBaseGetPeaksForSegmentRequest();
     while (reader.pos < end) {
       const tag = reader.uint32();
       switch (tag >>> 3) {
@@ -621,41 +604,30 @@ export const GetPeaksForSegmentRequest = {
   },
 
   fromJSON(object: any): GetPeaksForSegmentRequest {
-    const message = {
-      ...baseGetPeaksForSegmentRequest,
-    } as GetPeaksForSegmentRequest;
-    message.id =
-      object.id !== undefined && object.id !== null ? String(object.id) : "";
-    message.numBins =
-      object.numBins !== undefined && object.numBins !== null
-        ? Number(object.numBins)
-        : 0;
-    message.startFrame =
-      object.startFrame !== undefined && object.startFrame !== null
-        ? Number(object.startFrame)
-        : 0;
-    message.endFrame =
-      object.endFrame !== undefined && object.endFrame !== null
-        ? Number(object.endFrame)
-        : 0;
-    return message;
+    return {
+      id: isSet(object.id) ? String(object.id) : "",
+      numBins: isSet(object.numBins) ? Number(object.numBins) : 0,
+      startFrame: isSet(object.startFrame) ? Number(object.startFrame) : 0,
+      endFrame: isSet(object.endFrame) ? Number(object.endFrame) : 0,
+    };
   },
 
   toJSON(message: GetPeaksForSegmentRequest): unknown {
     const obj: any = {};
     message.id !== undefined && (obj.id = message.id);
-    message.numBins !== undefined && (obj.numBins = message.numBins);
-    message.startFrame !== undefined && (obj.startFrame = message.startFrame);
-    message.endFrame !== undefined && (obj.endFrame = message.endFrame);
+    message.numBins !== undefined &&
+      (obj.numBins = Math.round(message.numBins));
+    message.startFrame !== undefined &&
+      (obj.startFrame = Math.round(message.startFrame));
+    message.endFrame !== undefined &&
+      (obj.endFrame = Math.round(message.endFrame));
     return obj;
   },
 
   fromPartial<I extends Exact<DeepPartial<GetPeaksForSegmentRequest>, I>>(
     object: I
   ): GetPeaksForSegmentRequest {
-    const message = {
-      ...baseGetPeaksForSegmentRequest,
-    } as GetPeaksForSegmentRequest;
+    const message = createBaseGetPeaksForSegmentRequest();
     message.id = object.id ?? "";
     message.numBins = object.numBins ?? 0;
     message.startFrame = object.startFrame ?? 0;
@@ -664,7 +636,9 @@ export const GetPeaksForSegmentRequest = {
   },
 };
 
-const baseGetPeaksForSegmentResponse: object = { peaks: 0 };
+function createBaseGetPeaksForSegmentResponse(): GetPeaksForSegmentResponse {
+  return { peaks: [] };
+}
 
 export const GetPeaksForSegmentResponse = {
   encode(
@@ -685,10 +659,7 @@ export const GetPeaksForSegmentResponse = {
   ): GetPeaksForSegmentResponse {
     const reader = input instanceof _m0.Reader ? input : new _m0.Reader(input);
     let end = length === undefined ? reader.len : reader.pos + length;
-    const message = {
-      ...baseGetPeaksForSegmentResponse,
-    } as GetPeaksForSegmentResponse;
-    message.peaks = [];
+    const message = createBaseGetPeaksForSegmentResponse();
     while (reader.pos < end) {
       const tag = reader.uint32();
       switch (tag >>> 3) {
@@ -711,17 +682,17 @@ export const GetPeaksForSegmentResponse = {
   },
 
   fromJSON(object: any): GetPeaksForSegmentResponse {
-    const message = {
-      ...baseGetPeaksForSegmentResponse,
-    } as GetPeaksForSegmentResponse;
-    message.peaks = (object.peaks ?? []).map((e: any) => Number(e));
-    return message;
+    return {
+      peaks: Array.isArray(object?.peaks)
+        ? object.peaks.map((e: any) => Number(e))
+        : [],
+    };
   },
 
   toJSON(message: GetPeaksForSegmentResponse): unknown {
     const obj: any = {};
     if (message.peaks) {
-      obj.peaks = message.peaks.map((e) => e);
+      obj.peaks = message.peaks.map((e) => Math.round(e));
     } else {
       obj.peaks = [];
     }
@@ -731,20 +702,15 @@ export const GetPeaksForSegmentResponse = {
   fromPartial<I extends Exact<DeepPartial<GetPeaksForSegmentResponse>, I>>(
     object: I
   ): GetPeaksForSegmentResponse {
-    const message = {
-      ...baseGetPeaksForSegmentResponse,
-    } as GetPeaksForSegmentResponse;
+    const message = createBaseGetPeaksForSegmentResponse();
     message.peaks = object.peaks?.map((e) => e) || [];
     return message;
   },
 };
 
-const baseGetAudioSegmentRequest: object = {
-  id: "",
-  startFrame: 0,
-  endFrame: 0,
-  format: 0,
-};
+function createBaseGetAudioSegmentRequest(): GetAudioSegmentRequest {
+  return { id: "", startFrame: 0, endFrame: 0, format: 0 };
+}
 
 export const GetAudioSegmentRequest = {
   encode(
@@ -772,7 +738,7 @@ export const GetAudioSegmentRequest = {
   ): GetAudioSegmentRequest {
     const reader = input instanceof _m0.Reader ? input : new _m0.Reader(input);
     let end = length === undefined ? reader.len : reader.pos + length;
-    const message = { ...baseGetAudioSegmentRequest } as GetAudioSegmentRequest;
+    const message = createBaseGetAudioSegmentRequest();
     while (reader.pos < end) {
       const tag = reader.uint32();
       switch (tag >>> 3) {
@@ -797,29 +763,21 @@ export const GetAudioSegmentRequest = {
   },
 
   fromJSON(object: any): GetAudioSegmentRequest {
-    const message = { ...baseGetAudioSegmentRequest } as GetAudioSegmentRequest;
-    message.id =
-      object.id !== undefined && object.id !== null ? String(object.id) : "";
-    message.startFrame =
-      object.startFrame !== undefined && object.startFrame !== null
-        ? Number(object.startFrame)
-        : 0;
-    message.endFrame =
-      object.endFrame !== undefined && object.endFrame !== null
-        ? Number(object.endFrame)
-        : 0;
-    message.format =
-      object.format !== undefined && object.format !== null
-        ? audioFormatFromJSON(object.format)
-        : 0;
-    return message;
+    return {
+      id: isSet(object.id) ? String(object.id) : "",
+      startFrame: isSet(object.startFrame) ? Number(object.startFrame) : 0,
+      endFrame: isSet(object.endFrame) ? Number(object.endFrame) : 0,
+      format: isSet(object.format) ? audioFormatFromJSON(object.format) : 0,
+    };
   },
 
   toJSON(message: GetAudioSegmentRequest): unknown {
     const obj: any = {};
     message.id !== undefined && (obj.id = message.id);
-    message.startFrame !== undefined && (obj.startFrame = message.startFrame);
-    message.endFrame !== undefined && (obj.endFrame = message.endFrame);
+    message.startFrame !== undefined &&
+      (obj.startFrame = Math.round(message.startFrame));
+    message.endFrame !== undefined &&
+      (obj.endFrame = Math.round(message.endFrame));
     message.format !== undefined &&
       (obj.format = audioFormatToJSON(message.format));
     return obj;
@@ -828,7 +786,7 @@ export const GetAudioSegmentRequest = {
   fromPartial<I extends Exact<DeepPartial<GetAudioSegmentRequest>, I>>(
     object: I
   ): GetAudioSegmentRequest {
-    const message = { ...baseGetAudioSegmentRequest } as GetAudioSegmentRequest;
+    const message = createBaseGetAudioSegmentRequest();
     message.id = object.id ?? "";
     message.startFrame = object.startFrame ?? 0;
     message.endFrame = object.endFrame ?? 0;
@@ -837,7 +795,9 @@ export const GetAudioSegmentRequest = {
   },
 };
 
-const baseGetAudioSegmentProgress: object = { percentComplete: 0 };
+function createBaseGetAudioSegmentProgress(): GetAudioSegmentProgress {
+  return { percentComplete: 0, audioData: new Uint8Array() };
+}
 
 export const GetAudioSegmentProgress = {
   encode(
@@ -859,10 +819,7 @@ export const GetAudioSegmentProgress = {
   ): GetAudioSegmentProgress {
     const reader = input instanceof _m0.Reader ? input : new _m0.Reader(input);
     let end = length === undefined ? reader.len : reader.pos + length;
-    const message = {
-      ...baseGetAudioSegmentProgress,
-    } as GetAudioSegmentProgress;
-    message.audioData = new Uint8Array();
+    const message = createBaseGetAudioSegmentProgress();
     while (reader.pos < end) {
       const tag = reader.uint32();
       switch (tag >>> 3) {
@@ -881,18 +838,14 @@ export const GetAudioSegmentProgress = {
   },
 
   fromJSON(object: any): GetAudioSegmentProgress {
-    const message = {
-      ...baseGetAudioSegmentProgress,
-    } as GetAudioSegmentProgress;
-    message.percentComplete =
-      object.percentComplete !== undefined && object.percentComplete !== null
+    return {
+      percentComplete: isSet(object.percentComplete)
         ? Number(object.percentComplete)
-        : 0;
-    message.audioData =
-      object.audioData !== undefined && object.audioData !== null
+        : 0,
+      audioData: isSet(object.audioData)
         ? bytesFromBase64(object.audioData)
-        : new Uint8Array();
-    return message;
+        : new Uint8Array(),
+    };
   },
 
   toJSON(message: GetAudioSegmentProgress): unknown {
@@ -909,16 +862,16 @@ export const GetAudioSegmentProgress = {
   fromPartial<I extends Exact<DeepPartial<GetAudioSegmentProgress>, I>>(
     object: I
   ): GetAudioSegmentProgress {
-    const message = {
-      ...baseGetAudioSegmentProgress,
-    } as GetAudioSegmentProgress;
+    const message = createBaseGetAudioSegmentProgress();
     message.percentComplete = object.percentComplete ?? 0;
     message.audioData = object.audioData ?? new Uint8Array();
     return message;
   },
 };
 
-const baseGetVideoRequest: object = { id: "" };
+function createBaseGetVideoRequest(): GetVideoRequest {
+  return { id: "" };
+}
 
 export const GetVideoRequest = {
   encode(
@@ -934,7 +887,7 @@ export const GetVideoRequest = {
   decode(input: _m0.Reader | Uint8Array, length?: number): GetVideoRequest {
     const reader = input instanceof _m0.Reader ? input : new _m0.Reader(input);
     let end = length === undefined ? reader.len : reader.pos + length;
-    const message = { ...baseGetVideoRequest } as GetVideoRequest;
+    const message = createBaseGetVideoRequest();
     while (reader.pos < end) {
       const tag = reader.uint32();
       switch (tag >>> 3) {
@@ -950,10 +903,9 @@ export const GetVideoRequest = {
   },
 
   fromJSON(object: any): GetVideoRequest {
-    const message = { ...baseGetVideoRequest } as GetVideoRequest;
-    message.id =
-      object.id !== undefined && object.id !== null ? String(object.id) : "";
-    return message;
+    return {
+      id: isSet(object.id) ? String(object.id) : "",
+    };
   },
 
   toJSON(message: GetVideoRequest): unknown {
@@ -965,13 +917,15 @@ export const GetVideoRequest = {
   fromPartial<I extends Exact<DeepPartial<GetVideoRequest>, I>>(
     object: I
   ): GetVideoRequest {
-    const message = { ...baseGetVideoRequest } as GetVideoRequest;
+    const message = createBaseGetVideoRequest();
     message.id = object.id ?? "";
     return message;
   },
 };
 
-const baseGetVideoProgress: object = { percentComplete: 0, url: "" };
+function createBaseGetVideoProgress(): GetVideoProgress {
+  return { percentComplete: 0, url: "" };
+}
 
 export const GetVideoProgress = {
   encode(
@@ -990,7 +944,7 @@ export const GetVideoProgress = {
   decode(input: _m0.Reader | Uint8Array, length?: number): GetVideoProgress {
     const reader = input instanceof _m0.Reader ? input : new _m0.Reader(input);
     let end = length === undefined ? reader.len : reader.pos + length;
-    const message = { ...baseGetVideoProgress } as GetVideoProgress;
+    const message = createBaseGetVideoProgress();
     while (reader.pos < end) {
       const tag = reader.uint32();
       switch (tag >>> 3) {
@@ -1009,14 +963,12 @@ export const GetVideoProgress = {
   },
 
   fromJSON(object: any): GetVideoProgress {
-    const message = { ...baseGetVideoProgress } as GetVideoProgress;
-    message.percentComplete =
-      object.percentComplete !== undefined && object.percentComplete !== null
+    return {
+      percentComplete: isSet(object.percentComplete)
         ? Number(object.percentComplete)
-        : 0;
-    message.url =
-      object.url !== undefined && object.url !== null ? String(object.url) : "";
-    return message;
+        : 0,
+      url: isSet(object.url) ? String(object.url) : "",
+    };
   },
 
   toJSON(message: GetVideoProgress): unknown {
@@ -1030,14 +982,16 @@ export const GetVideoProgress = {
   fromPartial<I extends Exact<DeepPartial<GetVideoProgress>, I>>(
     object: I
   ): GetVideoProgress {
-    const message = { ...baseGetVideoProgress } as GetVideoProgress;
+    const message = createBaseGetVideoProgress();
     message.percentComplete = object.percentComplete ?? 0;
     message.url = object.url ?? "";
     return message;
   },
 };
 
-const baseGetVideoThumbnailRequest: object = { id: "" };
+function createBaseGetVideoThumbnailRequest(): GetVideoThumbnailRequest {
+  return { id: "" };
+}
 
 export const GetVideoThumbnailRequest = {
   encode(
@@ -1056,9 +1010,7 @@ export const GetVideoThumbnailRequest = {
   ): GetVideoThumbnailRequest {
     const reader = input instanceof _m0.Reader ? input : new _m0.Reader(input);
     let end = length === undefined ? reader.len : reader.pos + length;
-    const message = {
-      ...baseGetVideoThumbnailRequest,
-    } as GetVideoThumbnailRequest;
+    const message = createBaseGetVideoThumbnailRequest();
     while (reader.pos < end) {
       const tag = reader.uint32();
       switch (tag >>> 3) {
@@ -1074,12 +1026,9 @@ export const GetVideoThumbnailRequest = {
   },
 
   fromJSON(object: any): GetVideoThumbnailRequest {
-    const message = {
-      ...baseGetVideoThumbnailRequest,
-    } as GetVideoThumbnailRequest;
-    message.id =
-      object.id !== undefined && object.id !== null ? String(object.id) : "";
-    return message;
+    return {
+      id: isSet(object.id) ? String(object.id) : "",
+    };
   },
 
   toJSON(message: GetVideoThumbnailRequest): unknown {
@@ -1091,15 +1040,15 @@ export const GetVideoThumbnailRequest = {
   fromPartial<I extends Exact<DeepPartial<GetVideoThumbnailRequest>, I>>(
     object: I
   ): GetVideoThumbnailRequest {
-    const message = {
-      ...baseGetVideoThumbnailRequest,
-    } as GetVideoThumbnailRequest;
+    const message = createBaseGetVideoThumbnailRequest();
     message.id = object.id ?? "";
     return message;
   },
 };
 
-const baseGetVideoThumbnailResponse: object = { width: 0, height: 0 };
+function createBaseGetVideoThumbnailResponse(): GetVideoThumbnailResponse {
+  return { image: new Uint8Array(), width: 0, height: 0 };
+}
 
 export const GetVideoThumbnailResponse = {
   encode(
@@ -1124,10 +1073,7 @@ export const GetVideoThumbnailResponse = {
   ): GetVideoThumbnailResponse {
     const reader = input instanceof _m0.Reader ? input : new _m0.Reader(input);
     let end = length === undefined ? reader.len : reader.pos + length;
-    const message = {
-      ...baseGetVideoThumbnailResponse,
-    } as GetVideoThumbnailResponse;
-    message.image = new Uint8Array();
+    const message = createBaseGetVideoThumbnailResponse();
     while (reader.pos < end) {
       const tag = reader.uint32();
       switch (tag >>> 3) {
@@ -1149,22 +1095,13 @@ export const GetVideoThumbnailResponse = {
   },
 
   fromJSON(object: any): GetVideoThumbnailResponse {
-    const message = {
-      ...baseGetVideoThumbnailResponse,
-    } as GetVideoThumbnailResponse;
-    message.image =
-      object.image !== undefined && object.image !== null
+    return {
+      image: isSet(object.image)
         ? bytesFromBase64(object.image)
-        : new Uint8Array();
-    message.width =
-      object.width !== undefined && object.width !== null
-        ? Number(object.width)
-        : 0;
-    message.height =
-      object.height !== undefined && object.height !== null
-        ? Number(object.height)
-        : 0;
-    return message;
+        : new Uint8Array(),
+      width: isSet(object.width) ? Number(object.width) : 0,
+      height: isSet(object.height) ? Number(object.height) : 0,
+    };
   },
 
   toJSON(message: GetVideoThumbnailResponse): unknown {
@@ -1173,17 +1110,15 @@ export const GetVideoThumbnailResponse = {
       (obj.image = base64FromBytes(
         message.image !== undefined ? message.image : new Uint8Array()
       ));
-    message.width !== undefined && (obj.width = message.width);
-    message.height !== undefined && (obj.height = message.height);
+    message.width !== undefined && (obj.width = Math.round(message.width));
+    message.height !== undefined && (obj.height = Math.round(message.height));
     return obj;
   },
 
   fromPartial<I extends Exact<DeepPartial<GetVideoThumbnailResponse>, I>>(
     object: I
   ): GetVideoThumbnailResponse {
-    const message = {
-      ...baseGetVideoThumbnailResponse,
-    } as GetVideoThumbnailResponse;
+    const message = createBaseGetVideoThumbnailResponse();
     message.image = object.image ?? new Uint8Array();
     message.width = object.width ?? 0;
     message.height = object.height ?? 0;
@@ -1625,3 +1560,7 @@ if (_m0.util.Long !== Long) {
   _m0.util.Long = Long as any;
   _m0.configure();
 }
+
+function isSet(value: any): boolean {
+  return value !== null && value !== undefined;
+}
diff --git a/frontend/src/generated/media_set_pb.js b/frontend/src/generated/media_set_pb.js
index 7039d67..7951413 100644
--- a/frontend/src/generated/media_set_pb.js
+++ b/frontend/src/generated/media_set_pb.js
@@ -1160,7 +1160,8 @@ proto.media_set.GetPeaksProgress.toObject = function(includeInstance, msg) {
   var f, obj = {
     peaksList: (f = jspb.Message.getRepeatedField(msg, 1)) == null ? undefined : f,
     percentComplete: jspb.Message.getFloatingPointFieldWithDefault(msg, 2, 0.0),
-    url: jspb.Message.getFieldWithDefault(msg, 3, "")
+    url: jspb.Message.getFieldWithDefault(msg, 3, ""),
+    audioFrames: jspb.Message.getFieldWithDefault(msg, 4, 0)
   };
 
   if (includeInstance) {
@@ -1211,6 +1212,10 @@ proto.media_set.GetPeaksProgress.deserializeBinaryFromReader = function(msg, rea
       var value = /** @type {string} */ (reader.readString());
       msg.setUrl(value);
       break;
+    case 4:
+      var value = /** @type {number} */ (reader.readInt64());
+      msg.setAudioFrames(value);
+      break;
     default:
       reader.skipField();
       break;
@@ -1261,6 +1266,13 @@ proto.media_set.GetPeaksProgress.serializeBinaryToWriter = function(message, wri
       f
     );
   }
+  f = message.getAudioFrames();
+  if (f !== 0) {
+    writer.writeInt64(
+      4,
+      f
+    );
+  }
 };
 
 
@@ -1337,6 +1349,24 @@ proto.media_set.GetPeaksProgress.prototype.setUrl = function(value) {
 };
 
 
+/**
+ * optional int64 audio_frames = 4;
+ * @return {number}
+ */
+proto.media_set.GetPeaksProgress.prototype.getAudioFrames = function() {
+  return /** @type {number} */ (jspb.Message.getFieldWithDefault(this, 4, 0));
+};
+
+
+/**
+ * @param {number} value
+ * @return {!proto.media_set.GetPeaksProgress} returns this
+ */
+proto.media_set.GetPeaksProgress.prototype.setAudioFrames = function(value) {
+  return jspb.Message.setProto3IntField(this, 4, value);
+};
+
+
 
 
 
diff --git a/proto/media_set.proto b/proto/media_set.proto
index 75e685e..9d1f7b4 100644
--- a/proto/media_set.proto
+++ b/proto/media_set.proto
@@ -39,6 +39,7 @@ message GetPeaksProgress {
   repeated int32 peaks = 1;
   float percent_complete = 2;
   string url = 3;
+  int64 audio_frames = 4;
 }
 
 message GetPeaksForSegmentRequest {