explainer-default

デフォルトの解説動画

資金力のあるスタートアップがホームページに掲載するような、落ち着きのある高品質なプロダクトデモです。肝心なのは、あえて抑制することです。明るく開放的なキャンバスに、短いテキストを一度に1行だけ表示し、プロダクトのインターフェース自体をきれいに再現して、実際に使っている様子をクローズアップで撮影します。ストーリーを伝えるのはカメラです。テキストの行にズームインし、入力に合わせて動き、結果を見せるために引き、次の機能へと滑らかに移ります。

任意の時刻のフレームをレンダリングするHTMLページを1つ作成し、その後、モーションブラーとサウンドトラックを加えてMP4にレンダリングします。

ステップ1：概要を確認する（メッセージは1回、その後は作業を進める）

確認事項は1回のメッセージにすべてまとめ、その後は自分で作業を進めます。必須なのはプロダクトだけです。空欄があれば自分で決め、何を選んだかを伝えます。

1. プロダクト：名前と、どのようなものかを数文で説明してください。ウェブサイトのURLがあれば、さらによいです。
2. 視聴者に覚えてもらいたい最も重要なこと（例：「アイデアを入力すると、すぐにアプリができる」）。
3. ブランド：色、フォント、ロゴファイル、または「ウェブサイトを使う」。指定がなければ、以下のデフォルトパレットを使います。
4. フォーマット：16:9（1920×1080）または9:16（1080×1920）。デフォルトは16:9です。
5. 長さ：このスタイルのデフォルトは以下に記載しています。
6. 音楽：独自のトラック（ファイルパス）、または音楽の合成を許可するか。デフォルトでは合成します。
7. 演出の方向性（任意）：希望するシーン、タグライン、行動喚起、避けたいことなど。

URLがある場合は、執筆を始める前にウェブから取得して、プロダクトの実際の表現、機能、色、フォント名を確認してください。UIラベルやタグラインには、実際に使われている表現を使用します。

事実を決して捏造しないでください。 実績のない顧客数、売上、評価、推薦文、引用文を作らないでください。数値は、ユーザーまたはウェブサイトに記載されている場合に限って使います。それ以外の場合は、相対的なバー、進捗表示、プレースホルダーのスケルトンラインを使ってください。UI内のサンプルコンテンツ（プロンプト、ファイル名、プロジェクト名、レシートの価格など）は、もっともらしい内容で構いません。ただし、プロダクトそのものについての主張（統計、ユーザー数、評価、「無料」などのオファー）は避けてください。行動喚起には、ユーザーまたはウェブサイトが提示したURLまたはオファーのみを使います。どちらもない場合は、名前とタグラインで締めくくります。

ロゴ。 ロゴを使うのは、ユーザーからファイルが提供された場合、またはユーザー自身のプロダクトでロゴの使用を依頼された場合に限ります。それ以外の場合は、ブランドフォントで名前をテキストとして表示します。サードパーティのロゴ（連携先）は、提供された場合に限って使います。それ以外の場合は、名前を入れたシンプルな角丸タイルを使います。

さらに、任意で、表示する3～5個の機能またはワークフローの手順と、プロダクトの接続先（連携先）も確認します。URLがある場合は、サイトからこれらの情報を取得します。

このスタイルのデフォルトの長さは60秒です。範囲は45～90秒です。長さに応じて構成します（省く場合は、まず任意のセクションから省きます）。

長さ	機能	任意のセクション
45秒	2～3個、各約9秒	実績または連携先のいずれか一方
60秒	3～4個、各約10秒	実績／連携先のいずれか1つ
90秒	4～5個、各約12秒	両方

ステップ2：スクリプトを作成し、構築する

構成

まず、スクリプトとビートシートを書きます。画面に表示するテキストの各行、その後に続く UI の動き、表示時間をすべて記載し、上記の予算に対して時間を合計してください。画面上のテキストだけが「声」なので、それだけでストーリーを伝える必要があります。

シーンとカメラの組み合わせ方：各シーン（タイトル行、UI の動き）は、それぞれ独自のカメラを持つレイヤーです。シーン内ではカメラが寄ったり、動きに合わせて移動したり、引いたりします。シーン間では、次のレイヤーがすでに動き始めている状態で、前のレイヤーが短いぼかし（0.3～0.4 s）とともにディゾルブします。

1. **オープニング（0～5 s）。**明るい無地のキャンバス。中央に小さな単語 Introducing がフェードインします。ブランドのシーンへディゾルブし、柔らかなブランドグラデーション（シルクのような斜めの光の帯がゆっくり漂う）が現れ、ロゴまたは名前が中央に小さく表示されます。
2. **課題、または問いかけ（約5 s）。**視聴者に身近な短い一文（Still building prospect lists by hand?）、または製品への入力画面から始めます。大きく角丸の入力ボックスを空の状態で表示し、プレースホルダーテキストと、その下に候補チップを表示します。
3. **機能ごとの章（3～5章、各約8～15 s）。**各章の構成は以下のとおりです。
   • タイトル行：短い一文を、明るい無地のキャンバス中央に小さく（1080p で約28 px）表示します。単語ごとにタイプ入力するか、フェードインさせます。その後、カメラがタイトルに寄り、行の幅が画面幅の約75%になるまで拡大します。そして、重要な単語または短いフレーズを1つ強調します。ブランドカラーの柔らかなボックスが、その背後を左から右へ走ります（Call the decision maker. Directly.）。
   • UI の動き：製品の実際のインターフェースを、スクリーンショットではなく、すっきりとしたベクター UI として再構築し、重要な部分だけを切り抜いて大きく表示します。要素が画面の大半を占めるほどカメラを近づけ、動きに合わせて追従させます。入力欄にテキストが入力される様子（カメラはキャレットを追い、measureText でテキストの位置を測定します）、エージェントの手順が1つずつ完了していく様子（スピナー → チェック、Found 247 matches）、奥のカードをぼかしながら結果カードが積み重なる様子（被写界深度）、テーブルの行が1行ずつ埋まる様子、カーソルがセルのボタンをクリックして値が表示される様子、新しい列が追加されて各セルがきらめくような効果とともに「思考」した後、値が表示される様子、推論とソースを含むポップオーバーが開く様子などを見せます。
   • 引きのショット：動きの後、カメラをゆっくり引いて画面全体を一瞬見せ、視聴者がどの画面にいるか分かるようにしてから、次へ進みます。
4. **実績（任意。実際の数値のみ）。**カウントアップする数値を含む一文を表示し、その数値を強調します（Backed by a database of 300M+ profiles）。背景には控えめな点描の地球儀やグリッドを表示します。
5. **インテグレーション（任意）。**中央に Built for your existing workflow. と表示し、アプリのタイルを8～12個、さまざまな奥行きで端から浮かび上がらせます（角丸の四角形。実際のロゴを使うのは提供されている場合のみ。数が少ない場合はインテグレーションを繰り返します）。手前のタイルは大きく少しぼかし、奥のタイルは小さく鮮明に表示し、すべて視差をつけて漂わせます。ここではカメラを寄せる代わりにテキストだけを拡大し、タイルが画面内に収まるようにします。
6. **締めくくり。**ブランドグラデーションを背景に、用途に合わせて強調する単語が入れ替わる一文を表示します（Do all your [prospecting / research / outreach] in Product.）。製品に実際に備わっている場合に限り、別の使い方（Claude コネクターがある製品なら、たとえば Or just ask Claude）を続けて表示し、その後、重要なフレーズを強調したタグラインを表示します。
7. **エンドカード（3 s）。**ブランドグラデーションを背景にロゴまたは名前を表示し、その下に URL または行動を促す文を小さく表示します。

高品質に感じさせるルール

• 一度にひとつだけ。 画面にはテキストを1行とUI要素を1つ以上表示しません。テキストとUIが同じフレームに表示されることはほとんどありません。テキストのシーンの次に、UIのシーンを配置します。
• カメラがエディターです。 ハードカットは使いません。シーンの切り替えはすべて、カメラの動き（寄る、引く、滑らかに移動する）か、無地のキャンバス上でのソフトなぼかしディゾルブにします。カメラの動きは滑らかなイージング（0.6～1.2 s の ease）か、減衰を強くしたスプリング（z ≥ 0.95）にします。弾む動きは使いません。
• 本物のUIを、すっきりと。 製品についての知識（またはウェブサイト）をもとに、実際のレイアウト、ラベル、色、フォント、角丸を再現し、シーンに必要な範囲に簡略化します。UI内のコンテンツには、製品に合った、信頼できるサンプルデータを使います。柔らかな影、1 px の境界線、ゆとりのある余白を使います。
• カーソル： macOS風の標準的な矢印を使います。緩やかなカーブを描いて動かし、クリックの少し前に到着させます。クリック時には軽く沈み込み、クリックしたコントロールに柔らかな波紋を表示します。ホバー状態も変化させます。
• 文字： ブランドのフォントがわかっている場合はそれを使い、わからない場合は Inter または Geist を使います。タイトル行は小さく、標準のウェイトにします（フォントサイズではなくカメラによって大きく見せます）。大きな文字では、字間を詰めます。
• デフォルトの配色： キャンバスは #F7F7F8、テキストは #111114、セカンダリは #8A8A94、UIの面は白、境界線は #E7E7EC、ブランドのアクセントは #2E6BFF、ハイライトボックスはアクセントカラーを15～20%の不透明度で使用します。ブランドのグラデーションは、白 → 淡いアクセントカラー → アクセントカラーの、ゆっくりとした斜めのシルク状の帯にします（CSSのぼかしではなく、キャンバスに描画します）。ブランドカラーがある場合は、アクセントカラーの代わりに使います。
• テンポ： タイトル行は表示後、約2秒間そのままにします。UIの動きは実際の速度で行い（タイピングは1秒あたり約25文字）、結果が表示されるたびに、視聴者が読めるよう0.5秒間の間を置きます。
• 禁止事項： UIの背後にごちゃついた背景を置くこと、複数のアクセントカラーを使うこと、弾むイージング、絵文字、大きなドロップシャドウ、全面的なグラスモーフィズム、実在しない指標や推薦コメント。

サウンド

100～110 BPMの、心地よく穏やかな高揚感のある伴奏（柔らかなピアノまたはプラックのコード、オープニング後に軽いパーカッションが加わり、締めくくりに向けて盛り上がる）を使います。静かで温かみのある音にします。効果音は控えめにします。タイピング中のキー音、柔らかなクリック音、各ステップの完了時に軽い「チッ」という音、大きなカメラ移動時の柔らかな風切り音、エンドカードでの優しいチャイムを使います。音楽は、よくできた製品紹介動画の背景に流れるようなもので、動画を主導するものにはしません。

ページの構築方法

自己完結型の HTML ファイルを 1 つ作成します（CSS と JS はインライン、画像はユーザーから提供されたもののみ使用）。DOM と CSS の変換、SVG、または全画面キャンバスなど、目的に合った方法で描画します。

ページの仕様

• window.VIDEO = {w, h, duration} と window.seek(t) を用意します。seek(t) は時間の純粋関数で、時刻 t（秒）におけるすべての要素を設定します。CSS トランジションやアニメーション、setTimeout、前のフレームから引き継ぐ状態は使いません。どのフレームも、どの順番でも単独で正しく描画できる必要があります。seek 内でのレイアウト計測（例：offsetLeft、measureText）は問題ありません。結果が決定論的であることが条件です。
• 乱数（粒子、ノイズ、音声内のノイズなど）は、Math.random ではなく、シード付きジェネレーターから生成します。
• 履歴が必要なもの（動く物体に遅れて追従するカメラ、シミュレーションなど）は、読み込み時に一度だけ事前計算します。0 から duration まで 1/240 秒間隔で進め、値を保存します。seek では補間しながら値を読み取ります。ループの場合は、ループ開始時の状態からシミュレーションを開始します（スタイルごとの継ぎ目のルールを参照）。
• ループ： seek(t) では t % duration を使用します。継ぎ目をまたぐエフェクト（着地時のスクワッシュ、サウンドの余韻など）は、両端で描画またはミックスします。
• URL に ?render がある場合：コントロールやプレビューの拡大縮小は行わず、ステージを左上に w × h のサイズで表示します。ない場合：ウィンドウに収まるよう CSS でステージを拡大縮小し、プレビューコントロールを表示します。
• フォントは埋め込みます。 woff2 ファイル（Google Fonts またはブランドのフォント）をダウンロードし、base64 の @font-face としてインライン化します。これにより、レンダリング時に気づかないままフォールバックすることを防げます。ウェイトを変化させる場合は、[email protected] のような範囲を持つ可変フォントを使います。
• レイヤー： シーンのレイヤーは背景を透明にし、背後にある 1 つのステージ背景でベースカラーを指定します。これにより、後のレイヤーが誤って前のレイヤーを隠すのを防げます。絶対配置のテキストには white-space: nowrap を指定します。
• 速度： 大きな CSS の filter: blur() や、大きくぼかしたグラデーションはスクリーンショットの生成が非常に遅くなります。グラデーションやグローは読み込み時に一度だけキャンバス（または画像）に描画し、それを動かします。

ヘルパー：以下を貼り付けて、その上にすべてを構築します

// damped spring step response 0 -> 1. w = speed (8 slow, 14 normal, 22 snappy), z = damping (1 = no overshoot)
function spring(t, w = 14, z = 0.82) {
  if (t <= 0) return 0;
  if (z >= 1) return 1 - Math.exp(-w * t) * (1 + w * t);
  const wd = w * Math.sqrt(1 - z * z);
  return 1 - Math.exp(-z * w * t) * (Math.cos(wd * t) + (z * w / wd) * Math.sin(wd * t));
}
// a value that changes target many times, springing to each: track(start, [[time, value, w?, z?], ...]) -> f(t)
const track = (v0, keys) => t => { let v = v0, p = v0; for (const [tk, val, w, z] of keys) { v += (val - p) * spring(t - tk, w, z); p = val; } return v; };
// precise eased keyframes (best for camera moves): kf([[t0, v0], [t1, v1, easeFn?], ...]) -> f(t)
const kf = keys => t => { if (t <= keys[0][0]) return keys[0][1]; for (let i = 1; i < keys.length; i++) { const [a, va] = keys[i - 1], [b, vb, e = ease] = keys[i]; if (t <= b) return lerp(va, vb, e((t - a) / (b - a))); } return keys[keys.length - 1][1]; };
const clamp = (x, a = 0, b = 1) => Math.min(b, Math.max(a, x));
const ease = x => (x = clamp(x), x < .5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2);   // easeInOutCubic
const lerp = (a, b, k) => a + (b - a) * k;
const seg = (t, a, b) => clamp((t - a) / (b - a));      // 0..1 progress of t through [a, b]
const rng = s => () => (s = (s + 0x6D2B79F5) | 0, s = Math.imul(s ^ (s >>> 15), 1 | s), s ^= s + Math.imul(s ^ (s >>> 7), 61 | s), ((s ^ (s >>> 14)) >>> 0) / 4294967296);

• タイピング：表示する文字列は full.slice(0, n(t)) で、キャレットは t に基づいて点滅させます。カウントアップ：lerp(a, b, ease(seg(t, …))) で書式を整えます。
• カメラは、kf または track で制御する transform: translate() scale() rotate() を持つラッパー要素です。

サウンド

• window.buildAudio(ctx) は、渡された AudioContext または OfflineAudioContext を使い、時刻 0 からサウンドトラック全体（音楽 + 効果音）をスケジュールします。映像と同じタイムラインの値を使います。オシレーター、フィルタリングしたノイズ（シード付きバッファから生成）、エンベロープで音を合成します。ユーザーから音楽ファイルが提供された場合は、fetch と decodeAudioData で読み込み、テンポを計測してビートグリッドを設定し、その上に効果音のみを追加します。
• プレビュー再生： 最初の再生時にサウンドトラックを一度バッファにレンダリングし、その後はシークした任意の位置から再生できるようにします。クロックで seek を制御します。

let buf, ac, src, startAt = 0, offset = 0, playing = false;
async function play() {
  ac ??= new AudioContext();
  if (!buf) { const off = new OfflineAudioContext(2, Math.ceil(48000 * VIDEO.duration), 48000); await buildAudio(off); buf = await off.startRendering(); }
  src = ac.createBufferSource(); src.buffer = buf; src.connect(ac.destination);
  src.start(0, offset % VIDEO.duration); startAt = ac.currentTime; playing = true;
}
function pause() { if (!playing) return; offset += ac.currentTime - startAt; src.stop(); playing = false; }
function now() { return playing ? (offset + ac.currentTime - startAt) % VIDEO.duration : offset; }
(function loop() { seek(now()); requestAnimationFrame(loop); })();   // the scrubber sets offset (pause, set, play)

• スクリプトの先頭にコメントとしてビートシートを記述します。各行に、時刻、発生する内容、使用するサウンドを記載します。

ステップ 3：確認、レンダリング、納品

作業フォルダーで一度だけセットアップします：npm i playwright を実行し、Chromium がまだインストールされていない場合は npx playwright install chromium を実行します。ffmpeg が PATH 上にある必要があります。このファイルの末尾にあるスクリプトを render.mjs として保存します。

1. 静止画。 ビートシートの各行につき 1 つの時刻を指定して node render.mjs demo.html check.png --stills 0.5,1.2,… を実行します（シートは読みやすいサイズで、1 行に 3 つ並んでいます）。内容を確認します。切れている、重なっている、読みにくい、ブランドイメージに合わない、構図が悪い、または空白になっている箇所があれば修正します。もう一度確認します。
2. ドラフト。 node render.mjs demo.html draft.mp4 30 1 4 を実行します（高速：30 fps、モーションブラーなし、並列ワーカー 4 個。最後の数値はマシンのコア数に設定します）。これはレビュー用コピーです。HTML と一緒にユーザーに送り、最終版の前に変更点を尋ねます。
3. 最終版。 node render.mjs demo.html demo.mp4 60 4 8 を実行します。モーションブラーを適用すると、レンダリング時間はサブフレーム数に比例して長くなります。60 秒の最終版はノート PC で 20～60 分かかることがあるため、開始前にその旨を伝えます。demo.mp4（音声は約 −16 LUFS に正規化）と demo_silent.mp4 が出力されます。
4. HTML（その場でシークできます）、MP4 ファイル、そして短いメモを納品します。メモにはビートシート、仮置きの内容、2 つ目のバージョンで変更する項目を記載します。別の方向性も 1 つ、1 文で提案します。

// render.mjs: turn a seek(t) page into an MP4 with motion blur and its own audio.
//   node render.mjs page.html out.mp4 [fps=60] [subframes=4] [workers=4]
//   node render.mjs page.html sheet.png --stills 0.5,1.2,3   (full-size contact sheet for checking)
// Optional: window.buildAudio(ctx) schedules the soundtrack on any (Offline)AudioContext.
import { chromium } from 'playwright';
import { spawn } from 'node:child_process';
import { writeFileSync, mkdirSync, rmSync } from 'node:fs';
import path from 'node:path';
import { pathToFileURL } from 'node:url';

const [, , html, out, a3 = '60', a4 = '4', a5 = '4'] = process.argv;
if (!html || !out) { console.log('usage: node render.mjs page.html out.mp4 [fps] [subframes] [workers]'); process.exit(1); }
const run = (args) => new Promise((res, rej) => { const p = spawn('ffmpeg', args, { stdio: 'inherit' }); p.on('close', c => c ? rej(new Error('ffmpeg ' + c)) : res()); });
const url = pathToFileURL(path.resolve(html)).href + '?render';
const proxy = process.env.HTTPS_PROXY || process.env.https_proxy;
const browser = await chromium.launch({ args: ['--allow-file-access-from-files'], ...(proxy ? { proxy: { server: proxy } } : {}) });

// Read the size first, then open every page at exactly that size (pages that measure themselves on load stay correct).
const probe = await browser.newPage();
await probe.goto(url);
await probe.waitForFunction(() => window.VIDEO && typeof window.seek === 'function');
const V = await probe.evaluate(() => window.VIDEO);
await probe.close();

async function openPage() {
  const page = await browser.newPage({ viewport: { width: V.w, height: V.h }, deviceScaleFactor: 1 });
  await page.goto(url);
  await page.waitForFunction(() => window.VIDEO && typeof window.seek === 'function');
  // load every declared font, even ones only used by scenes hidden at t=0
  const bad = await page.evaluate(async () => {
    await Promise.all([...document.fonts].map(f => f.load().catch(() => {})));
    await document.fonts.ready;
    return [...document.fonts].filter(f => f.status !== 'loaded').map(f => f.family);
  });
  if (bad.length) console.warn('WARNING: fonts did not load (fallback in use):', [...new Set(bad)].join(', '), '- embed them as base64.');
  return page;
}
const shot = async (page, t) => { await page.evaluate(t => window.seek(t), t); return page.screenshot({ type: 'jpeg', quality: 95 }); };

if (a3 === '--stills') {
  const page = await openPage();
  const times = a4.split(',').map(Number), dir = out + '.frames';
  mkdirSync(dir, { recursive: true });
  for (let i = 0; i < times.length; i++) writeFileSync(`${dir}/${String(i).padStart(3, '0')}.jpg`, await shot(page, times[i]));
  await browser.close();
  const cols = Math.min(3, times.length), rows = Math.ceil(times.length / cols);
  await run(['-v', 'error', '-y', '-framerate', '1', '-i', `${dir}/%03d.jpg`, '-vf', `scale=${Math.min(960, V.w)}:-1,tile=${cols}x${rows}:padding=6:color=gray`, '-frames:v', '1', out]);
  rmSync(dir, { recursive: true });
  console.log('stills ->', out); process.exit(0);
}

const fps = +a3, sub = Math.max(1, +a4), workers = Math.max(1, +a5), N = Math.round(V.duration * fps);
const base = out.replace(/\.mp4$/, ''), silent = base + '_silent.mp4';
const vf = sub > 1 ? ['-vf', `tmix=frames=${sub},select='eq(mod(n\\,${sub})\\,${sub - 1})',setpts=N/(${fps}*TB)`] : [];
const t0 = Date.now(); let doneFrames = 0;
const per = Math.ceil(N / workers), segs = [];
await Promise.all(Array.from({ length: workers }, async (_, w) => {
  const a = w * per, b = Math.min(N, a + per); if (a >= b) return;
  const seg = `${base}_seg${w}.mp4`; segs[w] = seg;
  const page = await openPage();
  const ff = spawn('ffmpeg', ['-v', 'error', '-y', '-f', 'image2pipe', '-framerate', String(fps * sub), '-i', '-', ...vf,
    '-r', String(fps), '-c:v', 'libx264', '-pix_fmt', 'yuv420p', '-crf', '16', '-preset', 'medium', seg], { stdio: ['pipe', 'inherit', 'inherit'] });
  const closed = new Promise(r => ff.on('close', r));
  for (let f = a; f < b; f++) {
    for (let s = 0; s < sub; s++) {             // 180-degree shutter: sub-frames spread over half a frame
      const buf = await shot(page, (f + (sub > 1 ? (s / sub) * 0.5 : 0)) / fps);
      if (!ff.stdin.write(buf)) await new Promise(r => ff.stdin.once('drain', r));
    }
    if (++doneFrames % 30 === 0) process.stdout.write(`\r${doneFrames}/${N} frames  ${((Date.now() - t0) / 1000).toFixed(0)}s`);
  }
  ff.stdin.end(); await closed; await page.close();
}));
const list = base + '_segs.txt';
writeFileSync(list, segs.filter(Boolean).map(s => `file '${path.resolve(s)}'`).join('\n'));
await run(['-v', 'error', '-y', '-f', 'concat', '-safe', '0', '-i', list, '-c', 'copy', silent]);
segs.filter(Boolean).forEach(s => rmSync(s)); rmSync(list);
console.log(`\nvideo -> ${silent}  (${((Date.now() - t0) / 1000).toFixed(0)}s)`);

const page = await openPage();
const hasAudio = await page.evaluate(() => typeof window.buildAudio === 'function');
if (hasAudio) {
  const b64 = await page.evaluate(async (dur) => {
    const sr = 48000, ctx = new OfflineAudioContext(2, Math.ceil(sr * dur), sr);
    await window.buildAudio(ctx);
    const b = await ctx.startRendering(), L = b.getChannelData(0), R = b.getChannelData(b.numberOfChannels > 1 ? 1 : 0);
    const i16 = new Int16Array(L.length * 2);
    for (let i = 0; i < L.length; i++) { i16[2 * i] = Math.max(-1, Math.min(1, L[i])) * 32767; i16[2 * i + 1] = Math.max(-1, Math.min(1, R[i])) * 32767; }
    const u8 = new Uint8Array(i16.buffer); let s = '';
    for (let i = 0; i < u8.length; i += 0x8000) s += String.fromCharCode.apply(null, u8.subarray(i, i + 0x8000));
    return btoa(s);
  }, V.duration);
  const pcm = base + '.pcm'; writeFileSync(pcm, Buffer.from(b64, 'base64'));
  await run(['-v', 'error', '-y', '-i', silent, '-f', 's16le', '-ar', '48000', '-ac', '2', '-i', pcm,
    '-af', 'loudnorm=I=-16:TP=-1.5:LRA=11', '-c:v', 'copy', '-c:a', 'aac', '-b:a', '192k', '-shortest', out]);
  rmSync(pcm); console.log('with audio ->', out);
}
await browser.close();