ひろばニュース｜2026/05/15~2026/05/21号

//１．ユーザーが「録画開始」や「プレビュー」を押した瞬間に実行
if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)();
if (audioCtx.state === 'suspended') {
    try { await audioCtx.resume(); } catch(e){ console.warn("resume failed", e); }
}

//２．画像が読み込まれたら、その原寸大（画像のサイズ）を取得
bgImage.onload = () => {
    recordWidth = bgImage.naturalWidth || bgImage.width;
    recordHeight = bgImage.naturalHeight || bgImage.height;
    updateFileStatus();
};

//３．録画直前に、そのサイズでメモリ上にキャンバスを生成
function setupRecordCanvas() {
    if (bgImage && bgImage.complete && bgImage.naturalWidth) {
        recordCanvas = document.createElement('canvas'); // メモリ内にのみ存在
        recordCanvas.width = bgImage.naturalWidth;
        recordCanvas.height = bgImage.naturalHeight;
        recordCtx = recordCanvas.getContext('2d');
    }
    // ...
}

function draw() {
    requestAnimationFrame(draw); // 次のフレームの描画を予約（無限ループ）

    // 1. キャンバスのクリア
    vCtx.fillRect(0, 0, vCanvas.width, vCanvas.height);

    // 2. 音を解析して描画（renderFrame）を呼び出す
    if (analyser) {
        renderFrame(vCtx, vCanvas.width, vCanvas.height, 1.0);
    }
    // ...
}

draw(); // 最初のスイッチを入れる