「桃太郎」の冒頭（桃から生まれて名付けられるまで）を、ブラウザで動く紙芝居にする。絵・字幕・効果音・読み上げ音声をそろえる。範囲は 計画: 桃太郎を最後までで全編に広げ、作品の名前も「桃太郎（冒頭）」から「桃太郎」に改めた。
音はすべてブラウザの中で作る。効果音と BGM は Web Audio API、読み上げは Web Speech API を使う。音声ファイル・画像ファイル・外部サービスは使わない。
昔話のため著作権の制約はない。文は自分で書く。5 場面。
| 場面 | 絵 | ナレーション | 音 |
|---|---|---|---|
| 1 | 山あいの家と、おじいさん・おばあさん | むかしむかし、ある所に、おじいさんとおばあさんが住んでいました。 | 拍子木（始まり）・BGM 開始 |
| 2 | 山へ向かうおじいさん、川へ向かうおばあさん | おじいさんは山へしばかりに、おばあさんは川へせんたくに行きました。 | 鳥の声 |
| 3 | 川で洗濯するおばあさん。上流から大きな桃が揺れながら流れてくる | おばあさんが川でせんたくをしていると、川上から大きな桃が、どんぶらこ、どんぶらこと流れてきました。 | 川の水音・どんぶらこの揺れに合わせた音 |
| 4 | 家で桃を切ろうとすると、桃が割れて赤ちゃんが出てくる | おばあさんは桃を家に持ち帰りました。おじいさんが包丁で切ろうとすると、桃がぱかっと割れて、中から元気な男の赤ちゃんが生まれました。 | ぱかっ（割れる音）・きらきら |
| 5 | 赤ちゃんを抱く二人 | 桃から生まれたので、二人はこの子を「桃太郎」と名づけました。 | 拍子木（終わり）・BGM 終了 |
台本は作品の story.js に JavaScript の配列として持ち、<script src> で読み込む。script.json に分けると、ファイルを直接開いたとき（file://）に読み込めないため。
notes/samples/sound-webaudio.html の作り方（波形をその場で計算）を使うnotes/samples/speech-webspeech.html の作り方を使うlocalService が true）を優先して選ぶ。無ければネットの声を使い、それも無ければ字幕だけで進めるonend）で次の場面へ送るonboundary）。色の境目は 1 語ずつではなく、読んでいる句の「、」「。」まで進めて、声が次の句に入るまで待つ。読み用の文（read）を使った文は、字幕と文字の位置がずれるため、何番目の句を読んでいるかで字幕の句に対応させる（16-A。読みを変えるのは語だけで、「、」「。」の数は変わらない）。位置が届かない声では文単位の表示にする| 成果物 | 置き場 | 内容 |
|---|---|---|
| 共通の仕組み | src/engine/ | 舞台・送り・効果音・読み上げ。2 作目以降も使う |
| 桃太郎 | src/works/01-momotaro/ | index.html と story.js（台本・SVG・音の指定）。ダブルクリックで開ける |
置き場の決め方と公開の方法は、p261004-01「作品の置き場と公開」に従う。
段階ごとに利用者の確認を取ってから次へ進む。
src/engine/kamishibai.css・player.js、作品は src/works/01-momotaro/。tests/momotaro.spec.ts（tools/40_test/run-tests.cmd で実行）で、表紙から 5 場面を送り字幕が台本どおりに変わること、送りのボタンまで 1 画面に収まることを確かめたsrc/engine/speech.js。文ごとに、先頭に「っ」を足して読む。読んでいる文に色を付け、位置が届く声なら、読んでいる句の「、」「。」まで色の境目を進める。読み終えて 1.5 秒（場面に入って 5 秒未満なら 5 秒まで）待って次の場面へ送る。日本語の声が無いときは字幕だけで、文字数に応じた時間で送る。使っている声の名前を送りのボタンの下に出すtests/momotaro.spec.ts では読み上げを差し替えて、自動送り・読む順・先頭の「っ」・句単位の色付け・手で送ったときの読み直し・声が無いときの送りを確かめた。本物の声は利用者が聞き、読み違いは見つからなかったため read は使っていない利用者の要望。送りのボタンの下に出ている声の名前をクリックして、別の声に変える。変えたら、今の場面を頭から新しい声で読み直す。選べるのは日本語の声だけ。4-B・5-A に決まった。一覧はブラウザ標準の選択欄（select）で開く。選んだ声はブラウザの localStorage に残し、残せない・残した声が無くなったときは内蔵の声を優先して選び直す。残し方は p261012-01 で sessionStorage（タブを閉じれば消える）に改めた。
結果: ✅ 済。tests/momotaro.spec.ts で、一覧に日本語の声だけが「内蔵」「ネット」の別つきで並ぶこと、選ぶと今の場面を頭から読み直すこと、開き直しても選んだ声で読むこと、残した声が無くなれば内蔵の声に戻ること、一覧で矢印キーを押しても場面が送られないことを確かめた。
一覧の別は、はじめ「PC 内」と書いていたが、iPhone で「Kyoko（PC 内）」と出て合わなかったため、PC にもスマホにも通る「内蔵」に改めた（14-D）。サンプルページ notes/samples/speech-webspeech.html も同じ言い方にした。iPhone では、Safari も Chrome も内蔵の声だけが出て、ネットの声は出ない。
利用者の要望。送りのボタン（‹ ›）の左に「⏮」を置き、押すと読み上げを止めて表紙に戻る（13-A。1 場面目に戻る 13-B は採らない）。表紙ではこのボタンを押せない。
結果: ✅ 済。tests/momotaro.spec.ts で、表紙では押せないこと、押すと読み上げを止めて表紙に戻り、表紙では読み上げないことを確かめた。
段階 2+ の localStorage を sessionStorage に改める。別の計画 p261012-01 で進める。
src/engine/sound.js）。どの場面で何を鳴らすかと BGM の旋律は、作品の story.js に書くtests/momotaro.spec.ts では、sound.js が残す記録（鳴らした音の名前、BGM と音量下げの状態）で、拍子木と BGM の始まり・表紙での停止、場面ごとの効果音、13 場面で BGM が速くなること、読み上げ中の音量下げ、2 つのボタンの動きを確かめた。Playwright の Windows 版 WebKit には Web Audio が無いため、音のテストは Chromium だけで通している確認は Chrome と Edge で行う。PlayWright 共有環境で各場面のスクリーンショットを撮り、絵の崩れを見る。音は利用者が聞いて確かめる。
テストは PlayWright 共有環境の Chromium と WebKit（iPhone の Safari と同じしくみ）で流す（20-A）。スクリーンショットはブラウザごとに tmp/screens/chromium/・tmp/screens/webkit/ に撮る。Firefox は共有環境側で描画のエラーが出るため外している。Edge では確かめていない。
個別の回答はなく、「作ってみて」の指示を受けて、すべて推奨の A で着手した。変えるときはこの章を直す。