feat: add audio volume slider control (0-200%)

src/components/AudioSpeedControl.tsx

@@ -114,6 +114,32 @@ export default function AudioSpeedControl({ recipe, onChange }: Props) {
         </div>
       </div>
 
+      <div className={cn("transition-opacity duration-200", !recipe.keepAudio && "opacity-50 pointer-events-none")}>
+        <div className="flex items-center justify-between mb-2">
+          <label
+            htmlFor="volume-control"
+            className="text-sm font-heading font-semibold uppercase tracking-wider text-[var(--muted)] flex items-center gap-2"
+          >
+            <Volume2 size={10} aria-hidden="true" /> Volume
+          </label>
+
+          <span className="text-sm font-heading font-bold text-film-600 block">
+            {recipe.volume}%
+          </span>
+        </div>
+        <input
+          id="volume-control"
+          type="range"
+          min={0}
+          max={200}
+          step={1}
+          disabled={!recipe.keepAudio}
+          value={recipe.volume ?? 100}
+          onChange={(e) => onChange({ volume: Number(e.target.value) })}
+          className="w-full h-11 accent-film-600 cursor-pointer"
+        />
+      </div>
+
       {recipe.keepAudio && (
         <button
           type="button"

src/lib/constants.ts

@@ -13,6 +13,7 @@ export const DEFAULT_RECIPE: EditRecipe = {
   rotate: 0,
   keepAudio: true,
   speed: 1,
+  volume: 100,
   quality: 23,
   format: "mp4",
   brightness: 0,

src/lib/ffmpeg.ts

@@ -165,11 +165,11 @@ export function buildVideoFilter(recipe: EditRecipe, targetW: number, targetH: n
   return filters.join(",");
 }
 
-export function buildAudioFilter(speed: number, normalizeAudio: boolean): string {
-  if (speed <= 0) return "";
+export function buildAudioFilter(recipe: EditRecipe): string {
+  if (recipe.speed <= 0) return "";
   const filters: string[] = [];
 
-  let remaining = speed;
+  let remaining = recipe.speed;
   while (remaining < 0.5) {
     filters.push("atempo=0.5");
     remaining /= 0.5;
@@ -184,7 +184,11 @@ export function buildAudioFilter(speed: number, normalizeAudio: boolean): string
     filters.push(`atempo=${Number(remaining.toFixed(4))}`);
   }
 
-  if (normalizeAudio) filters.push("loudnorm=I=-14:TP=-1.5:LRA=11");
+  if (recipe.volume !== undefined && recipe.volume !== 100) {
+    filters.push(`volume=${(recipe.volume / 100).toFixed(2)}`);
+  }
+
+  if (recipe.normalizeAudio) filters.push("loudnorm=I=-14:TP=-1.5:LRA=11");
 
   return filters.join(",");
 }
@@ -213,7 +217,7 @@ function buildArguments(
 ): string[] {
   const vf = buildVideoFilter(recipe, targetW, targetH);
   const audioTrim = hasOriginalAudio ? buildAudioTrimFilter(recipe) : "";
-  const audioSpeed = hasOriginalAudio ? buildAudioFilter(recipe.speed, recipe.normalizeAudio ?? false) : "";
+  const audioSpeed = hasOriginalAudio ? buildAudioFilter(recipe) : "";
   const afParts = [audioTrim, audioSpeed].filter(Boolean);
   const af = afParts.join(",");
 

src/lib/tests/ffmpeg.test.ts

@@ -1,48 +1,50 @@
 import { describe, it, expect } from "vitest";
 import { buildAudioFilter } from "../ffmpeg";
+import { EditRecipe } from "../types";
+
+function build(speed: number, normalizeAudio: boolean): string {
+  return buildAudioFilter({ speed, normalizeAudio, volume: 100 } as EditRecipe);
+}
 
 describe("buildAudioFilter", () => {
   it("should return an empty string for 1.0x speed", () => {
-    expect(buildAudioFilter(1, false)).toBe("");
+    expect(build(1, false)).toBe("");
   });
 
   it("should chain two 0.5x filters for 0.25x speed", () => {
-    expect(buildAudioFilter(0.25, false)).toBe("atempo=0.5,atempo=0.5");
+    expect(build(0.25, false)).toBe("atempo=0.5,atempo=0.5");
   });
 
   it("should chain two 2.0x filters for 4.0x speed", () => {
-    expect(buildAudioFilter(4, false)).toBe("atempo=2.0,atempo=2");
+    expect(build(4, false)).toBe("atempo=2.0,atempo=2");
   });
 
   it("should chain multiple 0.5x filters and a remainder for 0.1x speed", () => {
-    // 0.1 / 0.5 = 0.2
-    // 0.2 / 0.5 = 0.4
-    // 0.4 / 0.5 = 0.8
-    // Result should be three 0.5s and one 0.8
-    expect(buildAudioFilter(0.1, false)).toBe("atempo=0.5,atempo=0.5,atempo=0.5,atempo=0.8");
+    expect(build(0.1, false)).toBe("atempo=0.5,atempo=0.5,atempo=0.5,atempo=0.8");
   });
 
   it("should chain multiple 2.0x filters and a remainder for 3.0x speed", () => {
-    // 3.0 / 2.0 = 1.5
-    expect(buildAudioFilter(3, false)).toBe("atempo=2.0,atempo=1.5");
+    expect(build(3, false)).toBe("atempo=2.0,atempo=1.5");
   });
 
   it("should handle boundary values inside the 0.5x-2.0x range without chaining", () => {
-    expect(buildAudioFilter(0.5, false)).toBe("atempo=0.5");
-    expect(buildAudioFilter(2.0, false)).toBe("atempo=2"); // Note: Number(2.0.toFixed(4)) -> 2
-    expect(buildAudioFilter(1.5, false)).toBe("atempo=1.5");
-    expect(buildAudioFilter(0.75, false)).toBe("atempo=0.75");
+    expect(build(0.5, false)).toBe("atempo=0.5");
+    expect(build(2.0, false)).toBe("atempo=2");
+    expect(build(1.5, false)).toBe("atempo=1.5");
+    expect(build(0.75, false)).toBe("atempo=0.75");
   });
 
   it("should chain properly for very large speeds", () => {
-    // 10 / 2.0 = 5
-    // 5 / 2.0 = 2.5
-    // 2.5 / 2.0 = 1.25
-    expect(buildAudioFilter(10, false)).toBe("atempo=2.0,atempo=2.0,atempo=2.0,atempo=1.25");
+    expect(build(10, false)).toBe("atempo=2.0,atempo=2.0,atempo=2.0,atempo=1.25");
   });
 
   it("should append loudnorm filter when normalizeAudio is true", () => {
-    const result = buildAudioFilter(1, true);
+    const result = build(1, true);
     expect(result).toContain("loudnorm");
   });
+
+  it("should add volume filter when volume is not 100", () => {
+    const result = buildAudioFilter({ speed: 1, normalizeAudio: false, volume: 150 } as EditRecipe);
+    expect(result).toBe("volume=1.50");
+  });
 });

src/lib/types.ts

@@ -24,6 +24,7 @@ export interface EditRecipe {
   keepAudio: boolean;
   normalizeAudio: boolean;
   speed: number;
+  volume: number;
   quality: number;
   format: "mp4" | "webm" | "mkv" | "gif";
   stabilization: boolean;
@@ -94,6 +95,7 @@ export function isValidRecipe(value: unknown): value is EditRecipe {
   if (typeof v.keepAudio !== "boolean") return false;
   if (typeof v.normalizeAudio !== "boolean") return false;
   if (typeof v.speed !== "number" || !isFinite(v.speed)) return false;
+  if (typeof v.volume !== "number" || !isFinite(v.volume)) return false;
   if (typeof v.quality !== "number" || !isFinite(v.quality)) return false;
   if (!["mp4", "webm", "mkv", "gif"].includes(v.format)) return false;
   if (typeof v.stabilization !== "boolean") return false;