52 lines
3.9 KiB
HTML
52 lines
3.9 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>完整开场 · 原片输入音效</title>
|
|
<style>
|
|
*{box-sizing:border-box}body{margin:0;background:#eee9df;color:#272b25;font:14px system-ui;line-height:1.6}main{max-width:1600px;margin:auto;padding:24px}h1{font-size:22px;margin:0 0 8px}p{color:#67685f;margin:0 0 16px}nav{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:16px}button,a{font:inherit;border:1px solid #b6b8a9;color:inherit;background:transparent;padding:9px 16px;text-decoration:none;cursor:pointer}button:disabled{opacity:.45;cursor:wait}button:focus-visible,a:focus-visible{outline:2px solid #776343;outline-offset:3px}label{display:flex;align-items:center;gap:8px}input{accent-color:#565c46}iframe{display:block;width:100%;aspect-ratio:16/9;border:0;background:#eae5e1}output{margin-left:auto;font-variant-numeric:tabular-nums}details{margin-top:18px;color:#65685c}pre{white-space:pre-wrap;font:12px monospace}
|
|
</style>
|
|
<main><h1>完整开场 · 原片输入音效</h1>
|
|
<p>从白场开始播放真实界面。开场文字使用原片输入短音，随后衔接权限验证、欢迎页和档案阵列。</p>
|
|
<nav><button id="play" disabled>播放完整开场（含音效）</button><button id="stop" disabled>停止并进入档案</button><label><input id="music" type="checkbox">包含背景音乐</label><a href="audio-check.html">单项音效试听</a><output id="status" role="status">正在载入场景…</output></nav>
|
|
<iframe id="replica" title="完整开场实时界面" allow="autoplay" src="/?scene=archive"></iframe>
|
|
<details><summary>同步检查</summary><pre id="checks">等待播放。</pre></details>
|
|
</main>
|
|
<script type="module">
|
|
import {TYPING_FRAMES} from '/src/typing-rhythm.ts';
|
|
const frame=document.querySelector('#replica'),play=document.querySelector('#play'),stop=document.querySelector('#stop'),status=document.querySelector('#status'),checks=document.querySelector('#checks');
|
|
let running=false,starting=false,baseline=0,started=false,done=false,lastPoll=0,request=0;
|
|
const api=()=>frame.contentWindow?.rhine;
|
|
play.onclick=async()=>{
|
|
const app=api();if(!app?.stats().ready||starting)return;
|
|
const ticket=++request;
|
|
baseline=app.stats().audio.playedKeys;done=false;starting=true;
|
|
play.disabled=true;stop.disabled=false;document.querySelectorAll('audio').forEach(a=>a.pause());
|
|
status.textContent='正在准备声音…';
|
|
// Invoke while the click's activation is still available to the same-origin iframe.
|
|
const ok=await app.playBootPreview(document.querySelector('#music').checked);
|
|
if(ticket!==request)return;
|
|
starting=false;running=ok;started=ok;
|
|
status.textContent=ok?'正在播放':'声音未能启动，请再次点击播放。';
|
|
};
|
|
stop.onclick=()=>{request++;api()?.archive();running=false;starting=false;done=false;status.textContent='已停止，进入档案。';stop.disabled=true;};
|
|
function poll(now){
|
|
if(now-lastPoll>100){
|
|
lastPoll=now;const stats=api()?.stats();
|
|
if(stats?.ready){
|
|
play.disabled=starting;play.textContent=started?'从头重播（含音效）':'播放完整开场（含音效）';
|
|
if(!started&&!starting)status.textContent='已就绪，点击播放。';
|
|
if(running&&stats.mode==='boot')status.textContent=`正在播放 · 原片 ${stats.bootTime.toFixed(2)} 秒`;
|
|
if(running&&stats.mode!=='boot'){running=false;done=true;status.textContent='开场结束，已进入档案。';stop.disabled=true;}
|
|
if(started){
|
|
const count=stats.audio.playedKeys-baseline;
|
|
checks.textContent=JSON.stringify({mode:stats.mode,time:stats.bootTime,inputSounds:count,expectedInputSounds:TYPING_FRAMES.length,
|
|
audioState:stats.audio.state,voices:stats.audio.voices,tracks:stats.audio.tracks,
|
|
soundEnabled:stats.audio.preferences.sound,complete:done,allInputFramesPlayed:done?count===TYPING_FRAMES.length:null},null,2);
|
|
}
|
|
}
|
|
}
|
|
requestAnimationFrame(poll);
|
|
}
|
|
requestAnimationFrame(poll);
|
|
</script></html>
|