遅延体感シミュレーター

遅延(レイテンシ)体感シミュレーター

操作による「視覚的な反応」と「音が鳴るタイミング」のズレを体験できます。

音声の遅延量 (Delay)

0 ms

0ms 250ms 500ms

最高環境。プロゲーマーも納得の応答速度です。

Click または Space で操作

<!DOCTYPE html><html lang="ja"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>遅延体感シミュレーター</title><script src="https://cdn.tailwindcss.com"></script><style>.flash-anim{animation:flash .1s ease-out forwards}@keyframes flash{0%{background-color:rgba(0,0,0,.05);opacity:1}100%{background-color:transparent;opacity:0}}.recoil-anim{animation:recoil .2s cubic-bezier(.25,1,.5,1)}@keyframes recoil{0%{transform:translateY(0)}20%{transform:translateY(-20px) scale(1.05)}100%{transform:translateY(0) scale(1)}}.jump-anim{animation:jump .4s cubic-bezier(.25,.46,.45,.94)}@keyframes jump{0%,100%{transform:translateY(0) scaleY(1)}15%{transform:translateY(0) scaleY(.85)}50%{transform:translateY(-100px) scaleY(1.05)}85%{transform:translateY(0) scaleY(.95)}}.note-hit{animation:hitEffect .2s ease-out forwards}@keyframes hitEffect{0%{transform:translateX(-50%) scale(.8);opacity:1;border-width:4px}100%{transform:translateX(-50%) scale(1.5);opacity:0;border-width:0}}.judge-anim{animation:floatUp .5s ease-out forwards}@keyframes floatUp{0%{opacity:0;transform:translateY(10px) scale(.9)}20%{opacity:1;transform:translateY(0) scale(1)}80%{opacity:1;transform:translateY(-5px) scale(1)}100%{opacity:0;transform:translateY(-10px) scale(.9)}}input[type=range]{-webkit-appearance:none;width:100%;background:0 0}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:16px;width:16px;border-radius:50%;background:#0f172a;cursor:pointer;margin-top:-6px}input[type=range]::-webkit-slider-runnable-track{width:100%;height:4px;cursor:pointer;background:#cbd5e1;border-radius:2px}input[type=range]:focus{outline:0}</style></head><body class="bg-slate-50 text-slate-900 font-sans h-screen flex flex-col overflow-hidden m-0 p-0"><div class="max-w-3xl mx-auto w-full p-4 md:p-8 flex flex-col h-full gap-6"><header class="text-center shrink-0 pt-4"><h1 class="text-2xl font-bold text-slate-900 tracking-tight">遅延体感シミュレーター</h1><p class="text-sm text-slate-600 mt-1">視覚と聴覚のズレを体験</p></header><div class="bg-white border border-slate-300 p-6 rounded-xl shadow-sm shrink-0"><div class="mb-6"><div class="flex justify-between items-end mb-4"><label class="block text-sm font-medium text-slate-700">音声の遅延量</label><div class="text-right"><span id="delay-display" class="text-slate-900 font-bold text-2xl font-mono tracking-tighter">0</span><span class="text-slate-500 text-sm ml-1">ms</span></div></div><input type="range" id="delay-slider" min="0" max="500" value="0" step="10" class="w-full"><div class="flex justify-between text-xs text-slate-500 mt-2 font-mono"><span>0</span><span>250</span><span>500</span></div><div id="delay-comment" class="mt-4 text-sm text-center py-2 px-4 rounded-md bg-slate-50 text-slate-700 border border-slate-300 transition-colors">最高環境。プロゲーマーも納得の応答速度です。</div></div><div class="flex space-x-2 bg-slate-200 p-1 rounded-lg"><button class="mode-btn flex-1 py-2 px-2 rounded-md bg-white text-slate-900 font-medium shadow-sm transition-all text-sm" data-mode="fps">FPS</button><button class="mode-btn flex-1 py-2 px-2 rounded-md text-slate-600 hover:text-slate-900 transition-all text-sm" data-mode="action">アクション</button><button class="mode-btn flex-1 py-2 px-2 rounded-md text-slate-600 hover:text-slate-900 transition-all text-sm" data-mode="rhythm">音ゲー</button></div></div><div id="play-area" class="flex-1 bg-white rounded-xl border border-slate-300 relative overflow-hidden cursor-pointer flex items-center justify-center group select-none shadow-sm"><div class="absolute top-4 right-4 opacity-0 group-hover:opacity-100 transition duration-200 pointer-events-none z-50"><span class="bg-white/90 backdrop-blur-sm px-3 py-1.5 rounded-md text-xs text-slate-600 border border-slate-300 shadow-sm flex items-center gap-1.5"><kbd class="bg-slate-100 px-1.5 py-0.5 rounded border border-slate-300 font-mono text-[10px] text-slate-700">Click</kbd> / <kbd class="bg-slate-100 px-1.5 py-0.5 rounded border border-slate-300 font-mono text-[10px] text-slate-700">Space</kbd></span></div><div id="scene-fps" class="scene active w-full h-full flex items-center justify-center relative bg-slate-50/50"><div id="fps-flash" class="absolute inset-0 opacity-0 pointer-events-none z-10"></div><div id="fps-crosshair" class="relative text-slate-500 z-20"><svg width="40" height="40" viewBox="0 0 40 40" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="20" cy="20" r="10" stroke-opacity="0.3"/><circle cx="20" cy="20" r="1.5" fill="currentColor"/><line x1="20" y1="0" x2="20" y2="6"/><line x1="20" y1="34" x2="20" y2="40"/><line x1="0" y1="20" x2="6" y2="20"/><line x1="34" y1="20" x2="40" y2="20"/></svg></div></div><div id="scene-action" class="scene hidden w-full h-full flex items-end justify-center pb-12 relative bg-slate-50/50"><div class="absolute bottom-12 w-full h-px bg-slate-300"></div><div id="action-player" class="w-10 h-10 bg-slate-800 rounded-sm relative z-10"></div></div><div id="scene-rhythm" class="scene hidden w-full h-full flex flex-col items-center justify-center relative bg-slate-50/50 overflow-hidden"><div class="w-24 h-full border-x border-slate-300 relative bg-white"><div id="judge-line" class="absolute bottom-20 w-full h-px bg-slate-500 z-10"></div><div id="notes-container" class="absolute inset-0 z-20 overflow-hidden pointer-events-none"></div></div><div id="judge-text" class="absolute top-1/3 text-3xl font-bold tracking-widest text-slate-900 opacity-0 pointer-events-none z-30">PERFECT</div></div></div></div><script>document.addEventListener('DOMContentLoaded',()=>{const sl=document.getElementById('delay-slider'),dd=document.getElementById('delay-display'),cd=document.getElementById('delay-comment'),mB=document.querySelectorAll('.mode-btn'),sc=document.querySelectorAll('.scene'),pA=document.getElementById('play-area'),fF=document.getElementById('fps-flash'),fC=document.getElementById('fps-crosshair'),aP=document.getElementById('action-player'),jL=document.getElementById('judge-line'),nC=document.getElementById('notes-container'),jT=document.getElementById('judge-text');let cM='fps',dMs=0,aX=null,aN=[],rA=null,nT=0,bN=0,sT=null;const la=25.0,sA=1.5,fD=1.2;function iA(){if(!aX){const A=window.AudioContext||window.webkitAudioContext;aX=new A()}if(aX.state==='suspended'){aX.resume()}}function sN(b,t){if(b%2===0)pK(t);else pH(t);const el=document.createElement('div');el.className='absolute w-16 h-2 bg-slate-800 rounded-full left-1/2 -translate-x-1/2 z-20';el.style.top='-100px';nC.appendChild(el);aN.push({targetTime:t,el:el,hit:false})}function nN(){nT+=60.0/120;bN=(bN+1)%4}function scd(){if(!aX)return;while(nT<aX.currentTime+sA){sN(bN,nT);nN()}sT=setTimeout(scd,la)}function sB(){xB();aN.forEach(n=>n.el.remove());aN=[];nT=aX.currentTime+0.5;bN=0;scd();rR()}function xB(){if(sT)clearTimeout(sT);sT=null;if(rA)cancelAnimationFrame(rA);rA=null}function rR(){if(cM!=='rhythm'||!aX)return;const cT=aX.currentTime,jR=jL.getBoundingClientRect(),cR=nC.getBoundingClientRect(),jY=jR.top-cR.top+jR.height/2,sY=-40;for(let i=aN.length-1;i>=0;i--){const n=aN[i];if(n.hit)continue;const tD=n.targetTime-cT;if(tD<-0.3){n.el.remove();aN.splice(i,1);sJT("MISS","text-slate-400");continue}if(tD<=fD){const p=1.0-(tD/fD),cY=sY+(jY-sY)*p;n.el.style.top=cY+'px'}}rA=requestAnimationFrame(rR)}function uC(m){let c="",cC="",bC="",brC="";if(m===0){c="理想的な環境。ズレは全くありません。";cC="text-slate-700";bC="bg-slate-50";brC="border-slate-300"}else if(m<=30){c="非常に良好。高性能モニター相当の応答速度です。";cC="text-emerald-800";bC="bg-emerald-50";brC="border-emerald-300"}else if(m<=70){c="一般的なテレビ環境。音ゲーでは少し違和感を感じ始めます。";cC="text-amber-800";bC="bg-amber-50";brC="border-amber-300"}else if(m<=150){c="明確な遅延。アクションやFPSではプレイに支障が出ます。";cC="text-orange-800";bC="bg-orange-50";brC="border-orange-300"}else{c="致命的な遅延。安価なBluetoothイヤホン等で起こる現象です。";cC="text-rose-800";bC="bg-rose-50";brC="border-rose-300"}cd.textContent=c;cd.className=`mt-4 text-sm text-center py-2 px-4 rounded-md border transition-colors duration-300 ${cC} ${bC} ${brC}`}sl.addEventListener('input',(e)=>{dMs=parseInt(e.target.value,10);dd.textContent=dMs;uC(dMs)});mB.forEach(btn=>{btn.addEventListener('click',(e)=>{iA();mB.forEach(b=>{b.classList.remove('bg-white','text-slate-900','font-medium','shadow-sm');b.classList.add('text-slate-600','hover:text-slate-900')});const tB=e.currentTarget;tB.classList.remove('text-slate-600','hover:text-slate-900');tB.classList.add('bg-white','text-slate-900','font-medium','shadow-sm');cM=tB.dataset.mode;sc.forEach(s=>{s.classList.add('hidden');if(s.id===`scene-${cM}`){s.classList.remove('hidden')}});if(cM==='rhythm'){sB()}else{xB()}})});function tA(el,cN){el.classList.remove(cN);void el.offsetWidth;el.classList.add(cN)}function tV(m){if(m==='fps'){tA(fF,'flash-anim');tA(fC,'recoil-anim')}else if(m==='action'){tA(aP,'jump-anim')}else if(m==='rhythm'){hRV()}}function sJT(t,cC){jT.textContent=t;jT.className=`absolute top-1/3 text-3xl font-bold tracking-widest ${cC} opacity-0 pointer-events-none z-30`;tA(jT,'judge-anim')}function hRV(){if(!aX)return;const cT=aX.currentTime;let cN=null,mD=Infinity;aN.forEach(n=>{if(n.hit)return;const d=Math.abs(n.targetTime-cT);if(d<mD){mD=d;cN=n}});if(cN&&mD<0.25){let jS="MISS",cC="text-rose-600";if(mD<0.05){jS="PERFECT";cC="text-slate-900"}else if(mD<0.12){jS="GREAT";cC="text-slate-700"}else{jS="GOOD";cC="text-slate-500"}const r=cN.el.getBoundingClientRect(),cR=nC.getBoundingClientRect(),eY=r.top+r.height/2-cR.top;const ef=document.createElement('div');ef.className='absolute w-16 h-16 border-2 border-slate-400 rounded-full left-1/2 -translate-x-1/2 note-hit z-10';ef.style.top=(eY-32)+'px';nC.appendChild(ef);ef.addEventListener('animationend',()=>ef.remove());cN.hit=true;cN.el.remove();sJT(jS,cC)}else{sJT("MISS","text-rose-600")}}function pS(m,d){if(!aX)return;const pT=aX.currentTime+(d/1000);if(m==='fps')pG(pT);else if(m==='action')pJ(pT);else if(m==='rhythm')pR(pT)}function hI(e){if(e.type==='keydown'){if(e.code!=='Space')return;e.preventDefault();if(e.repeat)return}iA();tV(cM);pS(cM,dMs)}pA.addEventListener('mousedown',hI);pA.addEventListener('touchstart',(e)=>{e.preventDefault();hI(e)},{passive:false});window.addEventListener('keydown',hI);function pK(t){const o=aX.createOscillator(),g=aX.createGain();o.type='sine';o.frequency.setValueAtTime(150,t);o.frequency.exponentialRampToValueAtTime(0.01,t+0.4);g.gain.setValueAtTime(0.4,t);g.gain.exponentialRampToValueAtTime(0.01,t+0.4);o.connect(g);g.connect(aX.destination);o.start(t);o.stop(t+0.4)}function pH(t){const bS=aX.sampleRate*0.05,b=aX.createBuffer(1,bS,aX.sampleRate),d=b.getChannelData(0);for(let i=0;i<bS;i++)d[i]=Math.random()*2-1;const n=aX.createBufferSource();n.buffer=b;const f=aX.createBiquadFilter();f.type='highpass';f.frequency.value=7000;const g=aX.createGain();g.gain.setValueAtTime(0.15,t);g.gain.exponentialRampToValueAtTime(0.01,t+0.05);n.connect(f);f.connect(g);g.connect(aX.destination);n.start(t)}function pG(t){const bS=aX.sampleRate*0.3,b=aX.createBuffer(1,bS,aX.sampleRate),d=b.getChannelData(0);for(let i=0;i<bS;i++){d[i]=Math.random()*2-1}const n=aX.createBufferSource();n.buffer=b;const nF=aX.createBiquadFilter();nF.type='lowpass';nF.frequency.setValueAtTime(2000,t);nF.frequency.exponentialRampToValueAtTime(100,t+0.2);const nG=aX.createGain();nG.gain.setValueAtTime(1,t);nG.gain.exponentialRampToValueAtTime(0.01,t+0.2);n.connect(nF);nF.connect(nG);nG.connect(aX.destination);n.start(t);const o=aX.createOscillator();o.type='sine';o.frequency.setValueAtTime(150,t);o.frequency.exponentialRampToValueAtTime(0.01,t+0.1);const oG=aX.createGain();oG.gain.setValueAtTime(1.5,t);oG.gain.exponentialRampToValueAtTime(0.01,t+0.1);o.connect(oG);oG.connect(aX.destination);o.start(t);o.stop(t+0.2)}function pJ(t){const o=aX.createOscillator();o.type='square';o.frequency.setValueAtTime(150,t);o.frequency.linearRampToValueAtTime(300,t+0.1);o.frequency.linearRampToValueAtTime(450,t+0.25);const g=aX.createGain();g.gain.setValueAtTime(0,t);g.gain.linearRampToValueAtTime(0.15,t+0.05);g.gain.linearRampToValueAtTime(0,t+0.25);const f=aX.createBiquadFilter();f.type='lowpass';f.frequency.value=1000;o.connect(f);f.connect(g);g.connect(aX.destination);o.start(t);o.stop(t+0.25)}function pR(t){const o=aX.createOscillator();o.type='sine';o.frequency.setValueAtTime(1200,t);o.frequency.exponentialRampToValueAtTime(100,t+0.05);const g=aX.createGain();g.gain.setValueAtTime(1,t);g.gain.exponentialRampToValueAtTime(0.01,t+0.08);o.connect(g);g.connect(aX.destination);o.start(t);o.stop(t+0.1)}});</script></body></html>