音の遅延疑似体験ツール

ワイヤレスイヤホン等の遅延によって、どれくらい絵と音に差がでるのか？
ゲームのプレイの感触はどのようになるのか？

これを簡単に疑似体験できるツールを無料公開します！

用途としては、ワイヤレスイヤホンイヤホンの購入前にどのくらいの遅延量があるのかを事前確認するよような事を想定しています。

実行環境によって結果は変動するためあくまで参考値として扱ってください。
使用者のデータ取得は行っておりません。
本ツール実行/結果によって使用者に不利益への責任は負いかねます。自己責任で使用ください。

使用方法

スライダーで設定した遅延量を、映像に対してわざと音を遅らせて出す事で遅延を疑似体験できます。

お手持ちの環境に対して、設定した遅延量がそのまま追加されるため、お手持ちの環境の遅延量を把握し、それに対して追加したい遅延量を設定してください。

お手持ちの環境の遅延が不明な場合は以下の遅延測定ツールも併せて活用ください。

基本的には有線イヤホンで試されるのが安定すると思います。
有線イヤホンの遅延は環境にも依りますが10~20msです。

FPS、アクション、音ゲー、それぞれの体験を模擬するモードを用意していますのでお好みに応じて切り替えて体験してください。

ツール

<!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>

お問い合わせ

コメントを残すコメントをキャンセル

表示できるコメントはありません。

使用方法

ツール

お問い合わせ

コメントを残す コメントをキャンセル

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル

コメントを残すコメントをキャンセル