ABX Audio Comparator<\/title><link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\"><link href=\"https:\/\/fonts.googleapis.com\/css2?family=Be+Vietnam+Pro:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\"><style>*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }:root { --accent: #f3be29; --accent-h: #f99c06; --gradient: linear-gradient(135deg, #f3be29 0%, #cd3ba7 100%); --gb: rgba(255,255,255,0.09); \/* glass border *\/ --gb-h: rgba(255,255,255,0.16); \/* glass border hover *\/ --text: #ffffff; --text-sub: rgba(255,255,255,0.58); --text-dim: rgba(255,255,255,0.32); --red: #ff4d6d; --green: #39d98a; --panel: rgba(8,8,10,0.60); --r: 16px; --r-sm: 10px; --ease: 0.17s cubic-bezier(0.4,0,0.2,1);}body { font-family: 'Be Vietnam Pro', sans-serif; color: var(--text); background: transparent; min-height: 100vh; padding: 32px 20px 56px; -webkit-font-smoothing: antialiased;}.app { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }\/* \u2500\u2500\u2500 Header \u2500\u2500\u2500 *\/.header { display: flex; align-items: center; gap: 18px; padding-bottom: 20px; border-bottom: 1px solid var(--gb);}.logo-badge { background: var(--gradient); border-radius: 11px; padding: 8px 15px; font-size: 13px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: #000; flex-shrink: 0;}.header-info h1 { font-size: 18px; font-weight: 700; letter-spacing: -.02em; color: var(--text); }.header-info p { font-size: 11.5px; color: var(--text); margin-top: 3px; }.la-badge { display: inline-flex; align-items: center; gap: 7px; padding: 5px 14px 5px 10px; border-radius: 100px; border: 1px solid rgba(8, 156, 4,0.22); background: rgba(28, 156, 4,0.06); margin-bottom: 10px; max-width:380px; } .la-badge-pip { width: 5px; height: 5px; border-radius: 50%; background: #089c04; box-shadow: 0 0 7px #089c04; animation: pip 2.5s ease infinite; } @keyframes pip { 0%,100%{ opacity:1; box-shadow:0 0 7px var(--accent); } 50% { opacity:0.35; box-shadow:0 0 2px var(--accent); } } .la-badge-text { font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #089c04; }\/* \u2500\u2500\u2500 Panel \u2500\u2500\u2500 *\/.panel { background: var(--panel); border: 1px solid var(--gb); border-radius: var(--r); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); padding: 24px; transition: border-color var(--ease);}.panel:hover { border-color: var(--gb-h); }.panel-title { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text); margin-bottom: 20px;}\/* \u2500\u2500\u2500 File Slots \u2500\u2500\u2500 *\/.files-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }.file-slot { border: 1.5px dashed rgba(255,255,255,0.12); border-radius: var(--r-sm); padding: 22px 16px; min-height: 116px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; cursor: pointer; position: relative; overflow: hidden; background: rgba(255,255,255,0.02); transition: all var(--ease);}.file-slot:hover { border-color: rgba(243,190,41,.40); background: rgba(243,190,41,.03); }.file-slot.loaded { border-style: solid; border-color: rgba(243,190,41,.32); background: rgba(243,190,41,.04); }.file-slot input[type=\"file\"] { display: none; }.slot-label { font-size: 22px; font-weight: 800; background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;}.slot-name { font-size: 11.5px; color: var(--text-sub); text-align: center; word-break: break-all; line-height: 1.45; }.slot-hint { font-size: 11px; color: var(--text-dim); }.slot-clear { position: absolute; top: 8px; right: 10px; font-size: 13px; color: var(--text-dim); cursor: pointer; background: none; border: none; transition: color var(--ease); display: none; line-height: 1; padding: 2px;}.file-slot.loaded .slot-clear { display: block; }.slot-clear:hover { color: var(--red); }\/* \u2500\u2500\u2500 Toggle \u2500\u2500\u2500 *\/.options-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 16px; }.toggle-group { display: flex; align-items: center; gap: 10px; cursor: pointer; }.toggle-label { font-size: 13px; font-weight: 500; color: var(--text-sub); user-select: none; }.toggle { position: relative; width: 40px; height: 22px; flex-shrink: 0; }.toggle input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }\/* track *\/.t-track { position: absolute; inset: 0; border-radius: 11px; background: rgba(255,255,255,0.10); border: 1.5px solid rgba(255,255,255,0.14); transition: background var(--ease), border-color var(--ease); cursor: pointer;}.toggle input:checked ~ .t-track { background: var(--accent); border-color: var(--accent); }\/* thumb \u2014 sibling to track inside .toggle, NOT inside track *\/.t-thumb { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.45); transition: transform var(--ease); pointer-events: none; z-index: 2;}.toggle input:checked ~ .t-thumb { transform: translateX(18px); }.gain-badges { display: flex; align-items: center; gap: 6px; margin-left: auto; }.gain-badge { padding: 3px 9px; border-radius: 6px; font-size: 11px; font-weight: 600; background: rgba(243,190,41,.10); color: var(--accent); border: 1px solid rgba(243,190,41,.22); display: none;}.info-note { margin-top: 12px; padding: 10px 14px; border-radius: 9px; border: 1px solid var(--gb); background: rgba(255,255,255,.025); font-size: 11.5px; color: var(--text-sub); line-height: 1.6;}.info-note strong { color: var(--text); }\/* \u2500\u2500\u2500 Buttons \u2500\u2500\u2500 *\/.btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border-radius: var(--r-sm); font-family: 'Be Vietnam Pro', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .01em; cursor: pointer; border: 1.5px solid transparent; transition: all var(--ease); white-space: nowrap; background: none;}.btn:disabled { opacity: .28; cursor: not-allowed; pointer-events: none; }\/* Track buttons \u2014 white idle, yellow active *\/.btn-track { color: var(--text); border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.05);}.btn-track:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.30);}.btn-track.playing { color: var(--accent); border-color: rgba(243,190,41,.55); background: rgba(243,190,41,.10); box-shadow: 0 0 18px rgba(243,190,41,.12);}\/* Ghost \/ secondary *\/.btn-ghost { color: var(--text-sub); border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.04);}.btn-ghost:hover { color: var(--text); background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.20);}\/* Primary CTA *\/.btn-primary { background: var(--gradient); color: #000; border: none; font-weight: 700; box-shadow: 0 4px 18px rgba(243,190,41,.18);}.btn-primary:hover { filter: brightness(1.07); box-shadow: 0 4px 26px rgba(243,190,41,.30); transform: translateY(-1px);}.btn-sm { padding: 7px 15px; font-size: 12px; border-radius: 8px; }\/* \u2500\u2500\u2500 Player \u2500\u2500\u2500 *\/.player-buttons { display: flex; gap: 10px; margin-bottom: 22px; flex-wrap: wrap; }.timeline-wrap { display: flex; flex-direction: column; gap: 9px; }.time-row { display: flex; justify-content: space-between; align-items: center; }.now-playing { font-size: 12px; font-weight: 600; color: var(--text-sub); display: flex; align-items: center; gap: 8px; }.np-slot { background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }.time-code { font-size: 11.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; font-weight: 500; }.status-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.14); flex-shrink: 0; transition: background var(--ease);}.status-dot.on { background: var(--green); box-shadow: 0 0 7px rgba(57,217,138,.65); animation: blink 1.4s ease-in-out infinite; }@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.5} }\/* \u2500\u2500\u2500 Range inputs \u2014 all unified \u2500\u2500\u2500 *\/input[type=\"range\"] { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 2px; background: rgba(255,255,255,.10); outline: none; cursor: pointer;}input[type=\"range\"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 15px; height: 15px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px rgba(243,190,41,.50); transition: transform var(--ease), box-shadow var(--ease); cursor: pointer;}input[type=\"range\"]:hover::-webkit-slider-thumb { transform: scale(1.25); box-shadow: 0 0 12px rgba(243,190,41,.65);}input[type=\"range\"]::-moz-range-thumb { width: 15px; height: 15px; border-radius: 50%; background: var(--accent); border: none; box-shadow: 0 0 6px rgba(243,190,41,.50);}\/* Seek: yellow fill *\/#seekBar { background: linear-gradient(to right, rgba(243,190,41,.65) var(--pct,0%), rgba(255,255,255,.10) var(--pct,0%)); }\/* Volume: yellow fill *\/#volumeBar { background: linear-gradient(to right, rgba(243,190,41,.70) var(--pct,80%), rgba(255,255,255,.10) var(--pct,80%)); max-width: 140px; }.controls-row { display: flex; align-items: center; gap: 14px; margin-top: 16px; flex-wrap: wrap; }.vol-group { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 160px; }.mute-btn { font-size: 14px; cursor: pointer; user-select: none; color: var(--text); transition: color var(--ease); flex-shrink: 0; background: none; border: none; padding: 0; font-family: inherit; }.mute-btn:hover { color: var(--text); }.vol-label { font-size: 11px; color: var(--text); font-variant-numeric: tabular-nums; min-width: 32px; }\/* \u2500\u2500\u2500 ABX \u2500\u2500\u2500 *\/.abx-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }.abx-meta { display: flex; align-items: center; gap: 14px; }.trial-counter { font-size: 13px; font-weight: 600; color: var(--text-sub); }.trial-counter strong { color: var(--text); font-size: 16px; }.progress-dots { display: flex; gap: 5px; }.dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.12); border: 1.5px solid transparent; transition: all .25s ease;}\/* During test \u2014 answered dots are just slightly brighter white, no colour hint *\/.dot.answered { background: rgba(255,255,255,.40); }\/* Current trial pulse *\/.dot.current { background: transparent; border-color: var(--accent); box-shadow: 0 0 7px rgba(243,190,41,.55); animation: blink 1.2s ease-in-out infinite; }\/* Revealed after test *\/.dot.correct { background: var(--green); border-color: transparent; box-shadow: none; animation: none; }.dot.wrong { background: var(--red); border-color: transparent; box-shadow: none; animation: none; }.stop-abx-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }.stop-abx-sub { font-size: 10.5px; color: var(--text-dim); }.abx-player-row { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }.btn-x-wide { flex: 1; justify-content: center; }.answer-row { display: flex; gap: 12px; }.btn-answer { flex: 1; justify-content: center; font-size: 15px; font-weight: 700; padding: 18px; border-radius: 12px; letter-spacing: .04em; color: var(--text); border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.04);}.btn-answer:hover { color: var(--accent); border-color: rgba(243,190,41,.50); background: rgba(243,190,41,.08); box-shadow: 0 4px 22px rgba(243,190,41,.12); transform: translateY(-2px);}.abx-hint { font-size: 11.5px; color: var(--text-dim); text-align: center; margin-top: 14px; line-height: 1.6; }\/* \u2500\u2500\u2500 Results \u2500\u2500\u2500 *\/#results-panel { display: none; }.results-hero { display: flex; align-items: center; gap: 24px; padding: 24px; border-radius: var(--r-sm); background: rgba(255,255,255,.025); border: 1px solid var(--gb); margin-bottom: 18px;}.score-pct { font-size: 54px; font-weight: 800; line-height: 1; flex-shrink: 0; background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;}.score-detail { flex: 1; }.score-label { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 4px; }.score-sub { font-size: 12px; color: var(--text-sub); line-height: 1.6; }.score-bar-wrap { height: 5px; background: rgba(255,255,255,.08); border-radius: 3px; margin-top: 14px; overflow: hidden; }.score-bar { height: 100%; border-radius: 3px; background: var(--gradient); transition: width .7s cubic-bezier(.4,0,.2,1); }.stat-badges { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }.stat-badge { padding: 9px 14px; border-radius: 9px; background: rgba(255,255,255,.04); border: 1px solid var(--gb); display: flex; flex-direction: column; gap: 3px;}.sb-val { font-size: 18px; font-weight: 800; color: var(--text); }.sb-lbl { font-size: 11px; color: var(--text-dim); }.trials-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px,1fr)); gap: 8px; margin-bottom: 16px; }.trial-card { padding: 10px 6px; border-radius: 10px; text-align: center; font-size: 11px; font-weight: 600; border: 1.5px solid transparent;}.trial-card.correct { background: rgba(57,217,138,.10); border-color: rgba(57,217,138,.30); color: var(--green); }.trial-card.wrong { background: rgba(255,77,109,.10); border-color: rgba(255,77,109,.30); color: var(--red); }.tc-num { font-size: 16px; font-weight: 800; display: block; margin-bottom: 3px; }.tc-answer { opacity: .72; }.interpretation { padding: 14px 18px; border-radius: var(--r-sm); font-size: 13px; line-height: 1.65; color: var(--text-sub); border: 1px solid var(--gb); background: rgba(255,255,255,.025);}.interpretation strong { color: var(--text); }.results-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }\/* \u2500\u2500\u2500 Feedback flash \u2500\u2500\u2500 *\/.feedback-flash { position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: 0; transition: opacity .12s ease; background: rgba(243,190,41,.06);}.feedback-flash.show { opacity: 1; }\/* \u2500\u2500\u2500 Mobile \u2500\u2500\u2500 *\/@media (max-width: 560px) { .files-grid { grid-template-columns: 1fr; } .answer-row { flex-direction: column; } .score-pct { font-size: 38px; }}::-webkit-scrollbar { width: 5px; }::-webkit-scrollbar-track { background: transparent; }::-webkit-scrollbar-thumb { background: rgba(255,255,255,.10); border-radius: 3px; }<\/style><\/head><body><div class=\"feedback-flash\" id=\"feedbackFlash\"><\/div><div class=\"app\">  <div class=\"la-badge\"> <span class=\"la-badge-pip\"><\/span> <span class=\"la-badge-text\">Free \u00b7 100% Local \u00b7 No Ads \u00b7 No Account Required<\/span> <\/div> <div class=\"header\"> <div class=\"logo-badge\">ABX<\/div> <div class=\"header-info\"> <h1>Audio Blind Test Comparator<\/h1> <pee><b>Verify if you can actually hear a difference between 2 files.<\/b><\/br>Load files A\/B > Start Blind Test > Guess multiple times which file is playing > Reveal Results.> <\/pee> <\/div> <\/div>  <div class=\"panel\"> <div class=\"panel-title\">Load Files<\/div> <div class=\"files-grid\"> <div class=\"file-slot\" id=\"slotA\" onclick=\"triggerFile('A')\"> <input type=\"file\" id=\"fileA\" accept=\"audio\/*\" onchange=\"loadFile('A',this)\"> <div class=\"slot-label\">A<\/div> <div class=\"slot-name\" id=\"nameA\">Click or drop file A<\/div> <div class=\"slot-hint\" id=\"hintA\">WAV \u00b7 FLAC \u00b7 MP3 \u00b7 AAC \u00b7 OGG<\/div> <button class=\"slot-clear\" id=\"clearA\" onclick=\"clearFile(event,'A')\" title=\"Remove\">\u2715<\/button> <\/div> <div class=\"file-slot\" id=\"slotB\" onclick=\"triggerFile('B')\"> <input type=\"file\" id=\"fileB\" accept=\"audio\/*\" onchange=\"loadFile('B',this)\"> <div class=\"slot-label\">B<\/div> <div class=\"slot-name\" id=\"nameB\">Click or drop file B<\/div> <div class=\"slot-hint\" id=\"hintB\">WAV \u00b7 FLAC \u00b7 MP3 \u00b7 AAC \u00b7 OGG<\/div> <button class=\"slot-clear\" id=\"clearB\" onclick=\"clearFile(event,'B')\" title=\"Remove\">\u2715<\/button> <\/div> <\/div> <div class=\"options-row\"> <label class=\"toggle-group\" for=\"gainToggle\"> <div class=\"toggle\"> <input type=\"checkbox\" id=\"gainToggle\" checked onchange=\"onGainToggle()\"> <div class=\"t-track\"><\/div> <div class=\"t-thumb\"><\/div> <\/div> <span class=\"toggle-label\">Gain Match<\/span> <\/label> <div class=\"gain-badges\"> <span class=\"gain-badge\" id=\"gainBadgeA\"><\/span> <span class=\"gain-badge\" id=\"gainBadgeB\"><\/span> <\/div> <\/div> <div class=\"info-note\" id=\"gainNote\"> \u26a1 <strong>Gain Match ON<\/strong> \u2014 RMS-based compensation applied in real-time so volume differences don’t bias your test. For gold-standard results, LUFS-normalize your files in a DAW beforehand. <\/div> <\/div> <div class=\"panel\"> <div class=\"panel-title\">Blind Test<\/div> <div id=\"abxReady\"> <pee style=\"font-size:13px;color:var(--text-sub);line-height:1.75;margin-bottom:18px;\"> Load both files above to begin. Each trial randomly assigns A or B as the mystery file <strong style=\"color:var(--text);\">X<\/strong>. Listen freely, then vote. Results and statistics reveal only at the end \u2014 no bias during the test. <\/pee> <button class=\"btn btn-primary\" id=\"startBtn\" onclick=\"abxStart()\" disabled>\u25b6 Start Blind Test<\/button> <\/div> <div id=\"abxRun\" style=\"display:none\"> <div class=\"abx-header\"> <div class=\"abx-meta\"> <div class=\"progress-dots\" id=\"progressDots\"><\/div> <div class=\"trial-counter\">Trial <strong id=\"trialNum\">1<\/strong> \/ 16<\/div> <\/div> <div class=\"stop-abx-wrap\"> <button class=\"btn btn-ghost btn-sm\" onclick=\"abxStop()\">\u25a0 Stop Early<\/button> <span class=\"stop-abx-sub\">Reveals results<\/span> <\/div> <\/div> <div class=\"abx-player-row\"> <button class=\"btn btn-track btn-x-wide\" id=\"btnX\" onclick=\"abxToggle('X')\"> <span id=\"iconX\">\u25b6<\/span> Play X <\/button> <button class=\"btn btn-track btn-sm\" id=\"btnAbxA\" onclick=\"abxToggle('A')\"> <span id=\"iconAbxA\">\u25b6<\/span> A <\/button> <button class=\"btn btn-track btn-sm\" id=\"btnAbxB\" onclick=\"abxToggle('B')\"> <span id=\"iconAbxB\">\u25b6<\/span> B <\/button> <\/div> <div class=\"answer-row\"> <button class=\"btn btn-answer\" onclick=\"abxAnswer('A')\">A<\/button> <button class=\"btn btn-answer\" onclick=\"abxAnswer('B')\">B<\/button> <\/div> <pee class=\"abx-hint\">Play X, then compare with A and B. <strong style=\"color:var(--text-sub);\">Click A or B when ready to answer.<\/strong><\/pee> <\/div> <\/div>  <div class=\"panel\" id=\"results-panel\"> <div class=\"panel-title\">Results<\/div> <div class=\"results-hero\"> <div class=\"score-pct\" id=\"scorePct\">\u2014<\/div> <div class=\"score-detail\"> <div class=\"score-label\" id=\"scoreLabel\">\u2014<\/div> <div class=\"score-sub\" id=\"scoreSub\">\u2014<\/div> <div class=\"score-bar-wrap\"><div class=\"score-bar\" id=\"scoreBar\" style=\"width:0%\"><\/div><\/div> <\/div> <\/div> <div class=\"stat-badges\" id=\"statBadges\"><\/div> <div class=\"trials-grid\" id=\"trialsGrid\"><\/div> <div class=\"interpretation\" id=\"interp\"><\/div> <div class=\"results-actions\"> <button class=\"btn btn-primary\" onclick=\"abxStart()\">\u25b6 Run Again<\/button> <button class=\"btn btn-ghost\" onclick=\"hideResults()\">\u2715 Dismiss<\/button> <\/div> <\/div>  <div class=\"panel\"> <div class=\"panel-title\">Simple Player<\/div> <div class=\"player-buttons\"> <button class=\"btn btn-track\" id=\"btnA\" onclick=\"playerToggle('A')\" disabled> <span id=\"iconA\">\u25b6<\/span> Play A <\/button> <button class=\"btn btn-track\" id=\"btnB\" onclick=\"playerToggle('B')\" disabled> <span id=\"iconB\">\u25b6<\/span> Play B <\/button> <button class=\"btn btn-ghost\" id=\"btnStop\" onclick=\"playerStop()\" disabled>\u25a0 Stop<\/button> <\/div> <div class=\"timeline-wrap\"> <div class=\"time-row\"> <div class=\"now-playing\"> <div class=\"status-dot\" id=\"playerDot\"><\/div> <span id=\"npLabel\">Stopped<\/span> <\/div> <span class=\"time-code\" id=\"timeCode\">0:00 \/ 0:00<\/span> <\/div> <input type=\"range\" id=\"seekBar\" min=\"0\" max=\"10000\" value=\"0\" oninput=”seekInput(this)” onchange=”seekCommit(this)”> <\/div> <div class=\"controls-row\"> <div class=\"vol-group\"> <button class=\"mute-btn\" id=\"muteBtn\" onclick=\"toggleMute()\">\ud83d\udd0a<\/button> <input type=\"range\" id=\"volumeBar\" min=\"0\" max=\"100\" value=\"80\" oninput=\"setVolume(this.value)\"> <span class=\"vol-label\" id=\"volLabel\">80%<\/span> <\/div> <\/div> <\/div> <\/div><script>'use strict';\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 AUDIO CONTEXT\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/const AC = new (window.AudioContext || window.webkitAudioContext)();const masterGain = AC.createGain();masterGain.gain.value = 0.8;masterGain.connect(AC.destination);\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 APP STATE\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\/\/ File dataconst F = { A: { buffer: null, name: '', rms: 0, comp: 1 }, B: { buffer: null, name: '', rms: 0, comp: 1 },};\/\/ Normal playerconst P = { slot: null, \/\/ 'A'|'B'|null src: null, \/\/ AudioBufferSourceNode gn: null, \/\/ GainNode startAt: 0, \/\/ AC.currentTime - offset when play began duration: 0, offset: 0, \/\/ paused-at seconds playing: false, seeking: false, raf: null,};\/\/ ABX playerconst X = { active: false, trials: [], currentX: null, \/\/ 'A'|'B' which: null, \/\/ 'X'|'A'|'B'|null (which button is active) src: null, gn: null, startAt: 0, duration: 0, offset: 0, playing: false,};let gainMatch = true;let muted = false;let volume = 0.8;\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 FILE LOADING\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/function triggerFile(slot) { document.getElementById('file' + slot).click();}async function loadFile(slot, inp) { const file = inp.files[0]; if (!file) return; inp.value = ''; const nameEl = document.getElementById('name' + slot); const hintEl = document.getElementById('hint' + slot); nameEl.textContent = '\u23f3 Decoding\u2026'; hintEl.textContent = ''; try { await acResume(); const buf = await AC.decodeAudioData(await file.arrayBuffer()); F[slot].buffer = buf; F[slot].name = file.name; F[slot].rms = calcRMS(buf); nameEl.textContent = file.name; hintEl.textContent = fmt(buf.duration) + ' \u00b7 ' + (file.size\/1048576).toFixed(1) + ' MB'; document.getElementById('slot' + slot).classList.add('loaded'); recomp(); refreshGainBadges(); refreshUI(); } catch(e) { nameEl.textContent = '\u26a0 Could not decode this file'; hintEl.textContent = 'Try WAV, FLAC, or MP3'; console.error(e); }}function clearFile(e, slot) { e.stopPropagation(); if (P.slot === slot && P.playing) playerStop(); F[slot] = { buffer: null, name: '', rms: 0, comp: 1 }; document.getElementById('slot' + slot).classList.remove('loaded'); document.getElementById('name' + slot).textContent = 'Click or drop file ' + slot; document.getElementById('hint' + slot).textContent = 'WAV \u00b7 FLAC \u00b7 MP3 \u00b7 AAC \u00b7 OGG'; document.getElementById('gainBadge' + slot).style.display = 'none'; refreshUI();}\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 GAIN MATCHING\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/function calcRMS(buf) { let s = 0, n = 0; for (let c = 0; c < buf.numberOfChannels; c++) { const d = buf.getChannelData(c); for (let i = 0; i < d.length; i++) { s += d[i]*d[i]; n++; } } return n > 0 ? Math.sqrt(s\/n) : 0;}function recomp() { if (!F.A.buffer || !F.B.buffer) return; const ra = F.A.rms, rb = F.B.rms; if (!ra || !rb) return; const t = Math.min(ra, rb); F.A.comp = t \/ ra; F.B.comp = t \/ rb;}function getComp(slot) { return gainMatch ? (F[slot].comp || 1) : 1; }function onGainToggle() { gainMatch = document.getElementById('gainToggle').checked; \/\/ update live gain nodes if (P.playing && P.gn) P.gn.gain.setTargetAtTime(getComp(P.slot), AC.currentTime, 0.02); if (X.playing && X.gn) { const sl = X.which === 'X' ? X.currentX : X.which; if(sl) X.gn.gain.setTargetAtTime(getComp(sl), AC.currentTime, 0.02); } refreshGainBadges(); document.getElementById('gainNote').innerHTML = gainMatch ? '\u26a1 <strong>Gain Match ON<\/strong> \u2014 RMS-based compensation applied in real-time so volume differences don\\'t bias your test. For gold-standard results, LUFS-normalize your files in a DAW beforehand.' : '\u26a0 <strong>Gain Match OFF<\/strong> \u2014 Volume differences are not compensated. Ensure your files are pre-matched (same integrated LUFS) for a truly unbiased comparison.';}function refreshGainBadges() { ['A','B'].forEach(s => { const el = document.getElementById('gainBadge' + s); if (gainMatch && F.A.buffer && F.B.buffer) { const db = 20 * Math.log10(F[s].comp || 1); el.textContent = s + ': ' + (db >= 0 ? '+' : '') + db.toFixed(1) + ' dB'; el.style.display = 'inline-block'; } else { el.style.display = 'none'; } });}\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 AUDIO LOW-LEVEL HELPERS\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/function _startSrc(buf, comp, offset, onEnded) { const gn = AC.createGain(); gn.gain.value = comp; gn.connect(masterGain); const src = AC.createBufferSource(); src.buffer = buf; src.connect(gn); src.start(0, Math.max(0, Math.min(offset, buf.duration - 0.01))); src.onended = onEnded; return { src, gn, startAt: AC.currentTime - offset };}function _killSrc(src) { if (!src) return; src.onended = null; try { src.stop(); } catch(e) {}}\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 NORMAL PLAYER\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/function playerToggle(slot) { acResume(); if (P.playing && P.slot === slot) { \/\/ Pause current slot const pos = _pPos(); _killSrc(P.src); cancelAnimationFrame(P.raf); P.src = P.gn = null; P.playing = false; P.offset = pos; renderPlayer(); return; } \/\/ Switch slot or start fresh \u2014 carry offset regardless of slot \/\/ (same-position start when switching: user naturally synced in time) const offset = P.offset; \/\/ preserved across slot switches _killSrc(P.src); cancelAnimationFrame(P.raf); if (!F[slot].buffer) return; const { src, gn, startAt } = _startSrc(F[slot].buffer, getComp(slot), offset, () => { if (P.src === src) _onPlayerEnd(); }); P.slot = slot; P.src = src; P.gn = gn; P.startAt = startAt; P.duration = F[slot].buffer.duration; P.offset = 0; P.playing = true; renderPlayer(); _seekLoop();}function playerStop() { P.offset = _pPos(); _killSrc(P.src); cancelAnimationFrame(P.raf); P.src = P.gn = null; P.playing = false; renderPlayer();}function _onPlayerEnd() { cancelAnimationFrame(P.raf); P.src = P.gn = null; P.playing = false; P.offset = 0; setSeek(0); document.getElementById('timeCode').textContent = '0:00 \/ ' + fmt(P.duration); renderPlayer();}function _pPos() { if (!P.playing) return P.offset; return Math.min(AC.currentTime - P.startAt, P.duration);}function seekInput(el) { P.seeking = true; const t = (el.value \/ 10000) * P.duration; document.getElementById('timeCode').textContent = fmt(t) + ' \/ ' + fmt(P.duration); setSeek(el.value \/ 10000);}function seekCommit(el) { P.seeking = false; const t = (el.value \/ 10000) * P.duration; if (P.playing) { const slot = P.slot; _killSrc(P.src); cancelAnimationFrame(P.raf); const { src, gn, startAt } = _startSrc(F[slot].buffer, getComp(slot), t, () => { if (P.src === src) _onPlayerEnd(); }); P.src = src; P.gn = gn; P.startAt = startAt; P.offset = 0; _seekLoop(); } else { P.offset = t; }}function _seekLoop() { cancelAnimationFrame(P.raf); function tick() { if (!P.playing) return; if (!P.seeking) { const pos = _pPos(); const pct = P.duration > 0 ? pos \/ P.duration : 0; setSeek(pct); document.getElementById('timeCode').textContent = fmt(pos) + ' \/ ' + fmt(P.duration); } P.raf = requestAnimationFrame(tick); } P.raf = requestAnimationFrame(tick);}function setSeek(pct) { const bar = document.getElementById('seekBar'); bar.value = Math.round(pct * 10000); bar.style.setProperty('--pct', (pct * 100).toFixed(3) + '%');}function setVolume(val) { volume = val \/ 100; if (!muted) masterGain.gain.value = volume; document.getElementById('volLabel').textContent = val + '%'; document.getElementById('volumeBar').style.setProperty('--pct', val + '%');}function toggleMute() { muted = !muted; masterGain.gain.value = muted ? 0 : volume; document.getElementById('muteBtn').textContent = muted ? '\ud83d\udd07' : '\ud83d\udd0a';}function renderPlayer() { const btnA = document.getElementById('btnA'); const btnB = document.getElementById('btnB'); btnA.classList.toggle('playing', P.playing && P.slot === 'A'); btnB.classList.toggle('playing', P.playing && P.slot === 'B'); document.getElementById('iconA').textContent = (P.playing && P.slot === 'A') ? '\u23f8' : '\u25b6'; document.getElementById('iconB').textContent = (P.playing && P.slot === 'B') ? '\u23f8' : '\u25b6'; document.getElementById('btnStop').disabled = !P.playing; const dot = document.getElementById('playerDot'); const lbl = document.getElementById('npLabel'); if (P.playing) { dot.classList.add('on'); lbl.innerHTML = 'Playing <span class=\"np-slot\">' + P.slot + ' \u2014 ' + (F[P.slot].name||'') + '<\/span>'; } else { dot.classList.remove('on'); lbl.textContent = 'Stopped'; }}\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 ABX ENGINE\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/function abxStart() { if (!F.A.buffer || !F.B.buffer) return; playerStop(); _xKill(); X.active = true; X.trials = []; X.currentX = null; X.which = null; X.playing = false; X.offset = 0; document.getElementById('abxReady').style.display = 'none'; document.getElementById('abxRun').style.display = 'block'; document.getElementById('results-panel').style.display = 'none'; buildDots(); nextTrial();}function nextTrial() { const n = X.trials.length; if (n >= 16) { finishABX(); return; } X.currentX = Math.random() < 0.5 ? 'A' : 'B'; X.offset = 0; X.which = null; X.playing = false; _xKill(); document.getElementById('trialNum').textContent = n + 1; buildDots(); xRenderBtns(null); setTimeout(() => xPlay('X'), 220);}function abxToggle(which) { acResume(); if (X.which === which && X.playing) { \/\/ pause const pos = _xPos(); _xKill(); X.offset = pos; X.which = which; X.playing = false; xRenderBtns(null); } else { xPlay(which); }}function xPlay(which) { acResume(); const slot = which === 'X' ? X.currentX : which; const buf = F[slot] && F[slot].buffer; if (!buf) return; \/\/ carry position when switching sources within same trial const offset = X.playing ? _xPos() : X.offset; _xKill(); const { src, gn, startAt } = _startSrc(buf, getComp(slot), offset, () => { if (X.src === src) { X.playing = false; X.which = null; xRenderBtns(null); } }); X.src = src; X.gn = gn; X.startAt = startAt; X.duration= buf.duration; X.offset = 0; X.which = which; X.playing = true; xRenderBtns(which);}function _xPos() { if (!X.playing) return X.offset; return Math.min(AC.currentTime - X.startAt, X.duration);}function _xKill() { _killSrc(X.src); X.src = X.gn = null;}function xRenderBtns(which) { ['X','A','B'].forEach(w => { const btnId = w === 'X' ? 'btnX' : 'btnAbx' + w; const icoId = w === 'X' ? 'iconX' : 'iconAbx' + w; const act = (which === w && X.playing); document.getElementById(btnId).classList.toggle('playing', act); document.getElementById(icoId).textContent = act ? '\u23f8' : '\u25b6'; });}function abxAnswer(answer) { _xKill(); X.playing = false; X.which = null; xRenderBtns(null); const correct = X.currentX; X.trials.push({ correct, answer, right: answer === correct }); \/\/ Neutral flash \u2014 no colour hint const fl = document.getElementById('feedbackFlash'); fl.classList.add('show'); setTimeout(() => fl.classList.remove('show'), 280); buildDots(); if (X.trials.length >= 10) { setTimeout(finishABX, 380); } else { setTimeout(nextTrial, 380); }}function abxStop() { _xKill(); X.active = false; X.playing = false; document.getElementById('abxRun').style.display = 'none'; document.getElementById('abxReady').style.display = 'block'; if (X.trials.length > 0) showResults();}function finishABX() { _xKill(); X.active = false; X.playing = false; document.getElementById('abxRun').style.display = 'none'; document.getElementById('abxReady').style.display = 'block'; buildDots(); \/\/ now reveal correct\/wrong colours showResults();}\/* Dots: neutral (answered) during test, coloured only after *\/function buildDots() { const c = document.getElementById('progressDots'); c.innerHTML = ''; for (let i = 0; i < 10; i++) { const d = document.createElement('div'); d.className = 'dot'; if (i < X.trials.length) { d.classList.add(X.active ? 'answered' : (X.trials[i].right ? 'correct' : 'wrong')); } else if (i === X.trials.length && X.active) { d.classList.add('current'); } c.appendChild(d); }}\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 RESULTS\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/function showResults() { const t = X.trials, n = t.length; if (!n) return; const correct = t.filter(x => x.right).length; const pct = Math.round(correct\/n*100); const p = pVal(correct, n); document.getElementById('results-panel').style.display = 'block'; document.getElementById('scorePct').textContent = pct + '%'; setTimeout(() => document.getElementById('scoreBar').style.width = pct + '%', 60); let label, sub; if (pct === 100) { label = '\ud83c\udfaf Perfect score'; sub = 'Every trial correct \u2014 statistically significant discrimination.'; } else if (pct >= 80) { label = '\u2726 Excellent discrimination'; sub = 'Strong evidence you can reliably hear a difference.'; } else if (pct >= 70) { label = '\u2726 Good performance'; sub = 'You likely perceive a real difference. Consider a second run to confirm.'; } else if (pct >= 60) { label = '\u25b3 Marginal result'; sub = 'Slightly above chance. The difference may be very subtle.'; } else { label = '\u25cb Chance level'; sub = 'Consistent with random guessing. Files may be perceptually identical.'; } document.getElementById('scoreLabel').textContent = label; document.getElementById('scoreSub').textContent = sub; document.getElementById('statBadges').innerHTML = badge(correct+'\/'+n,'Correct') + badge(pct+'%','Accuracy') + badge(p.toFixed(3),'p-value') + badge(p < 0.05 ? 'Yes' : 'No','Significant?'); const grid = document.getElementById('trialsGrid'); grid.innerHTML = ''; t.forEach((r,i) => { const c = document.createElement('div'); c.className = 'trial-card ' + (r.right ? 'correct' : 'wrong'); c.innerHTML = `<span class=\"tc-num\">${i+1}<\/span><span class=\"tc-answer\">X=${r.correct}<!\u2013- [et_pb_br_holder] -\u2013>\u2192${r.answer}<\/span>`; grid.appendChild(c); }); document.getElementById('interp').innerHTML = p < 0.05 ? `<strong>Statistically significant<\/strong> (p = ${p.toFixed(3)}) \u2014 With ${correct} correct out of ${n}, there is strong statistical evidence that you can perceptually distinguish the two files. Tonal balance, transient handling, stereo image, or encoding artefacts may all be contributing.` : `<strong>Not statistically significant<\/strong> (p = ${p.toFixed(3)}) \u2014 With ${correct} correct out of ${n}, results are consistent with chance-level performance. You cannot reliably distinguish the two files under these conditions. Verify gain match, listening environment, and monitoring chain quality.`; document.getElementById('results-panel').scrollIntoView({ behavior: 'smooth', block: 'nearest' });}function badge(v, l) { return `<div class=\"stat-badge\"><span class=\"sb-val\">${v}<\/span><span class=\"sb-lbl\">${l}<\/span><\/div>`; }function hideResults() { document.getElementById('results-panel').style.display = 'none'; }\/\/ One-tailed binomial p-value, H\u2080: p=0.5function pVal(k, n) { let p = 0; for (let i = k; i <= n; i++) p += binom(n,i) * Math.pow(0.5, n); return p;}function binom(n, k) { if (k < 0 || k > n) return 0; if (k === 0 || k === n) return 1; k = Math.min(k, n-k); let r = 1; for (let i = 0; i < k; i++) r = r * (n-i) \/ (i+1); return r;}\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 UI HELPERS\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/function refreshUI() { const both = !!(F.A.buffer && F.B.buffer); document.getElementById('btnA').disabled = !F.A.buffer; document.getElementById('btnB').disabled = !F.B.buffer; document.getElementById('startBtn').disabled= !both; if (both) { recomp(); refreshGainBadges(); }}function fmt(s) { const m = Math.floor(s\/60), sec = Math.floor(s%60); return m + ':' + String(sec).padStart(2,'0');}async function acResume() { if (AC.state === 'suspended') await AC.resume(); }\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 DRAG & DROP\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/['A','B'].forEach(slot => { const el = document.getElementById('slot' + slot); el.addEventListener('dragover', e => { e.preventDefault(); el.style.borderColor = 'var(--accent)'; }); el.addEventListener('dragleave', ()=> { el.style.borderColor = ''; }); el.addEventListener('drop', e => { e.preventDefault(); el.style.borderColor = ''; const f = e.dataTransfer.files[0]; if (f) loadFile(slot, { files: [f], value: '' }); });});document.addEventListener('click', acResume, { once: true });\/\/ InitrefreshUI();renderPlayer();<\/script><\/body><\/html>[\/et_pb_code][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=”1″ admin_label=”Hero Section” _builder_version=”4.27.5″ background_color=”#000000″ use_background_color_gradient=”on” background_color_gradient_stops=”#000000 0%|rgba(0,0,0,0) 20%|rgba(0,0,0,0) 80%|#000000 100%” background_color_gradient_overlays_image=”on” background_image=”https:\/\/smartdsp.pro\/wp-content\/uploads\/2022\/10\/streamer-79.png” custom_padding=”9px|||1px||” locked=”off” global_colors_info=”{}”][et_pb_row _builder_version=”4.16″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” module_alignment=”center” custom_width_px=”700px” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.16″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||”][et_pb_text _builder_version=”4.16″ text_font=”||||||||” text_font_size=”18px” text_line_height=”2em” header_font=”Titillium Web||||||||” header_font_size=”66px” header_line_height=”1.5em” header_2_font=”Titillium Web||||||||” header_2_font_size=”66px” header_2_line_height=”1.5em” header_3_font=”Titillium Web||||||||” header_3_font_size=”66px” header_3_line_height=”1.5em” header_4_font=”Titillium Web||||||||” header_4_font_size=”66px” header_4_line_height=”1.5em” header_5_font=”Titillium Web||||||||” header_5_font_size=”66px” header_5_line_height=”1.5em” header_6_font=”Titillium Web||||||||” header_6_font_size=”66px” header_6_line_height=”1.5em” text_orientation=”center” background_layout=”dark” max_width=”700px” module_alignment=”center” header_font_size_tablet=”40px” header_font_size_phone=”” header_font_size_last_edited=”on|phone” global_colors_info=”{}”]<h1>Frequently Asked<\/h1>[\/et_pb_text][et_pb_code _builder_version=”4.27.5″ _module_preset=”default” global_colors_info=”{}”][\/et_pb_code][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”1_2,1_2″ custom_padding_last_edited=”on|desktop” _builder_version=”4.27.4″ _module_preset=”default” background_color=”rgba(79,79,79,0.16)” overflow-x=”visible” overflow-y=”visible” custom_padding=”80px|75px|80px|75px|true|true” custom_padding_tablet=”30px|30px|30px|30px|true|true” custom_padding_phone=”20px|20px|20px|20px|true|true” border_radii=”on|20px|20px|20px|20px” box_shadow_style=”preset1″ box_shadow_horizontal=”-1px” box_shadow_vertical=”-1px” box_shadow_blur=”0px” box_shadow_color=”rgba(255,255,255,0.21)” global_colors_info=”{}”][et_pb_column type=”1_2″ _builder_version=”4.17.4″ _module_preset=”default” custom_padding_tablet=”||||false|false” custom_padding_phone=”||30px||false|false” custom_padding_last_edited=”off|phone” global_colors_info=”{}”][et_pb_blurb title=”How do I use this ABx Test?” use_icon=”on” font_icon=”u||divi||400″ icon_color=”#f3be29″ icon_placement=”left” _builder_version=”4.27.5″ header_font=”–et_global_heading_font|700||on|||||” header_font_size=”14px” header_letter_spacing=”2px” header_line_height=”1.8em” body_font=”–et_global_heading_font||||||||” body_text_color=”#FFFFFF” body_font_size=”16px” body_line_height=”1.8em” background_enable_color=”off” use_background_color_gradient=”on” background_color_gradient_direction=”164deg” background_color_gradient_stops=”rgba(243,190,41,0.17) 0%|rgba(205,59,167,0.17) 100%” background_layout=”dark” custom_margin=”||12%|” custom_margin_tablet=”70px|||” custom_margin_last_edited=”off|desktop” custom_padding=”30px|16px|30px|16px” animation_style=”fold” hover_enabled=”0″ border_radii=”on|20px|20px|20px|20px” box_shadow_style=”preset1″ locked=”off” global_colors_info=”{}” sticky_enabled=”0″]<div class=\"faq-item\">\n<ol class=\"[li_&]:mb-0 [li_&]:mt-1 [li_&]:gap-1 [&:not(:last-child)_ul]:pb-1 [&:not(:last-child)_ol]:pb-1 list-decimal flex flex-col gap-1 pl-8 mb-3\">\n<li class=\"whitespace-normal break-words pl-2\"><strong>Load your two files<\/strong> \u2014 click slot A and slot B, or drag and drop audio files directly onto each slot. Any browser-supported format works: WAV, FLAC, MP3, AAC, OGG, and more.<\/li>\n<li class=\"whitespace-normal break-words pl-2\"><strong>Preview and compare freely<\/strong> \u2014 use the Player section to listen to A and B back to back. The timeline scrubs both files; switching slots carries your playback position forward so you’re always comparing the same moment.<\/li>\n<li class=\"whitespace-normal break-words pl-2\"><strong>Start the Blind Test<\/strong> \u2014 click the “Start Blind Test” button.<br \/>Each trial plays a mystery file X (secretly either A or B). Listen to X, then use the A and B buttons to compare, then click <strong>A<\/strong> or <strong>B<\/strong> to cast your vote.<\/li>\n<li class=\"whitespace-normal break-words pl-2\"><strong>Repeat for all 16 trials<\/strong> \u2014 no right\/wrong feedback is shown during the test to keep it fully unbiased. You can stop before completing the 16 trials but we suggest doing at least 10, otherwise your results may not be accurate.<\/li>\n<li class=\"whitespace-normal break-words pl-2\"><strong>Review your results<\/strong> \u2014 accuracy percentage, p-value, per-trial breakdown, and a plain-language statistical interpretation are revealed at the end.<\/li>\n<\/ol>\n<p class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\"><strong>Tip:<\/strong> Unless if your studio, use headphones in a quiet environment. Listener fatigue is real \u2014 take a short break before starting the test if you’ve been mixing for hours!<\/p>\n<\/div>[\/et_pb_blurb][et_pb_blurb title=”Key features” use_icon=”on” font_icon=”u||divi||400″ icon_color=”#f3be29″ icon_placement=”left” _builder_version=”4.27.5″ header_font=”–et_global_heading_font|700||on|||||” header_font_size=”14px” header_letter_spacing=”2px” header_line_height=”1.8em” body_font=”–et_global_heading_font||||||||” body_text_color=”#FFFFFF” body_font_size=”16px” body_line_height=”1.8em” background_enable_color=”off” use_background_color_gradient=”on” background_color_gradient_direction=”164deg” background_color_gradient_stops=”rgba(243,190,41,0.17) 0%|rgba(205,59,167,0.17) 100%” background_layout=”dark” custom_margin=”||12%|” custom_margin_tablet=”70px|||” custom_margin_last_edited=”off|desktop” custom_padding=”30px|16px|30px|16px” animation_style=”fold” animation_delay=”100ms” hover_enabled=”0″ border_radii=”on|20px|20px|20px|20px” box_shadow_style=”preset1″ locked=”off” global_colors_info=”{}” sticky_enabled=”0″]<div class=\"faq-item\">\n<div class=\"faq-answer\">\n<p class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\"><strong>Gain Match<\/strong> is enabled by default and applies RMS-based gain compensation in real-time between the two files. This ensures that volume differences \u2014 one of the most common sources of bias in audio comparisons \u2014 don’t influence your judgment. The dB offset applied to each file is displayed as a badge. For the most rigorous results, consider LUFS-normalizing your files beforehand in your DAW (e.g. with a loudness normalization plugin or export option), then disabling Gain Match to confirm the compensation is minimal.<\/p>\n<p class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\"><strong>Easy ABx Test in your browser:\u00a0<\/strong>Simply click the “Start Blind Test” button after loading files A and B and guess which file you think is playing a few times before accessing the results.<br \/>ABx test allows you to tell via a less-biased test procedure if you can actually hear a difference between two files.<\/p>\n<p class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\"><strong>Statistical reporting<\/strong> \u2014 results include a one-tailed binomial p-value, which is the same statistical method used in peer-reviewed audio research and professional ABX software. A p-value below 0.05 is the standard threshold for claiming audible discrimination.<\/p>\n<p class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\"><strong>Drag and drop<\/strong> is supported on both file slots for fast workflow integration.<\/p>\n<\/div>\n<\/div>[\/et_pb_blurb][\/et_pb_column][et_pb_column type=”1_2″ _builder_version=”4.17.4″ _module_preset=”default” custom_padding_tablet=”|||0%|false|false” custom_padding_phone=”|||0%|false|false” custom_padding_last_edited=”off|desktop” global_colors_info=”{}”][et_pb_blurb title=”Are my audio files uploaded anywhere? How is data handled?” use_icon=”on” font_icon=”u||divi||400″ icon_color=”#f3be29″ icon_placement=”left” _builder_version=”4.27.5″ header_font=”–et_global_heading_font|700||on|||||” header_font_size=”14px” header_letter_spacing=”2px” header_line_height=”1.8em” body_font=”–et_global_heading_font||||||||” body_text_color=”#FFFFFF” body_font_size=”16px” body_line_height=”1.8em” background_enable_color=”off” use_background_color_gradient=”on” background_color_gradient_direction=”164deg” background_color_gradient_stops=”rgba(243,190,41,0.17) 0%|rgba(205,59,167,0.17) 100%” background_layout=”dark” custom_margin=”||12%|” custom_margin_tablet=”70px|||” custom_margin_last_edited=”off|desktop” custom_padding=”30px|16px|30px|16px” animation_style=”fold” animation_delay=”250ms” hover_enabled=”0″ border_radii=”on|20px|20px|20px|20px” box_shadow_style=”preset1″ locked=”off” global_colors_info=”{}” sticky_enabled=”0″]<div class=\"faq-item\">\n<div class=\"faq-answer\">\n<p class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\"><strong>No \u2014 nothing ever leaves your device.<\/strong> This tool runs entirely inside your browser using the Web Audio API. Your audio files are decoded locally in memory, never written to disk by the tool, never sent to a server, and never logged or stored anywhere.\u00a0<\/p>\n<\/div>\n<\/div>[\/et_pb_blurb][et_pb_blurb title=”Suggestions for best results” use_icon=”on” font_icon=”u||divi||400″ icon_color=”#f3be29″ icon_placement=”left” _builder_version=”4.27.5″ header_font=”–et_global_heading_font|700||on|||||” header_font_size=”14px” header_letter_spacing=”2px” header_line_height=”1.8em” body_font=”–et_global_heading_font||||||||” body_text_color=”#FFFFFF” body_font_size=”16px” body_line_height=”1.8em” background_enable_color=”off” use_background_color_gradient=”on” background_color_gradient_direction=”164deg” background_color_gradient_stops=”rgba(243,190,41,0.17) 0%|rgba(205,59,167,0.17) 100%” background_layout=”dark” custom_margin=”||12%|” custom_margin_tablet=”70px|||” custom_margin_last_edited=”off|desktop” custom_padding=”30px|16px|30px|16px” animation_style=”fold” animation_delay=”150ms” hover_enabled=”0″ border_radii=”on|20px|20px|20px|20px” box_shadow_style=”preset1″ locked=”off” global_colors_info=”{}” sticky_enabled=”0″]<ul>\n<li class=\"whitespace-normal break-words pl-2\"><strong>Gain-match carefully before hand.<\/strong> Even with Gain Match ON, RMS compensation is a broadband average. If your files have very different spectral or dynamic characteristics (e.g. one is heavily limited, one is unmastered), consider using an integrated LUFS meter in your DAW for pre-matching. Or something like the -neat- free plugin <a href=\"https:\/\/goodhertz.com\/loudness\/\" target=\"_blank\" rel=\"noopener\">Ghz Loudness by Goodhertz<\/a>, which let’s automatically gain match based on short term LUFs!<\/li>\n<li class=\"whitespace-normal break-words pl-2\"><strong>Run multiple sessions.<\/strong> A single 16-trial test has limited statistical power. Running the test twice on different days and combining results gives a much more reliable picture.<\/li>\n<\/ul>[\/et_pb_blurb][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.27.5″ _module_preset=”default” locked=”off” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.27.5″ _module_preset=”default” global_colors_info=”{}”][et_pb_heading title=”We’ve much more for you to explore:” _builder_version=”4.27.5″ _module_preset=”default” title_level=”h2″ title_font=”–et_global_heading_font||||||||” title_text_color=”#FFFFFF” global_colors_info=”{}”][\/et_pb_heading][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”1_4,1_4,1_4,1_4″ _builder_version=”4.18.0″ custom_margin=”1vw|auto||auto|false|false” animation_style=”flip” locked=”off” global_colors_info=”{}”][et_pb_column type=”1_4″ _builder_version=”4.18.0″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||”][et_pb_button button_url=”https:\/\/smartdsp.pro\/mastering-services” button_text=”Mastering” button_alignment=”center” _builder_version=”4.27.5″ _module_preset=”3117bc07-6a8a-4679-b3bb-b6ed74b48a2f” custom_button=”on” button_text_color=”#FFFFFF” button_bg_use_color_gradient=”on” button_bg_color_gradient_direction=”229deg” button_bg_color_gradient_stops=”rgba(189,22,179,0.8) 0%|rgba(253,202,65,0.8) 100%” button_border_width=”0px” button_border_radius=”15px” button_font=”Be Vietnam Pro|600|||||||” button_use_icon=”off” box_shadow_style=”preset1″ box_shadow_blur=”35px” box_shadow_spread=”-11px” box_shadow_color=”rgba(255,255,255,0.28)” global_colors_info=”{}” button_bg_color__hover_enabled=”on|desktop” button_bg_color__hover=”rgba(0,127,31,0.7)” button_bg_enable_color__hover=”on” button_border_width__hover=”0px” button_border_width__hover_enabled=”on|desktop” button_border_radius__hover=”15px” button_border_radius__hover_enabled=”on|desktop” box_shadow_color__hover=”rgba(255,255,255,0.49)” box_shadow_color__hover_enabled=”on|hover” button_text_size__hover_enabled=”on|desktop” button_border_color__hover=”rgba(255,255,255,0.02)” button_border_color__hover_enabled=”on|hover” button_icon_color__hover=”#FFFFFF” button_icon_color__hover_enabled=”on|hover”][\/et_pb_button][\/et_pb_column][et_pb_column type=”1_4″ _builder_version=”4.18.0″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||”][et_pb_button button_url=”https:\/\/smartdsp.pro\/smart-dsp-products\/” button_text=”Audio Effects” button_alignment=”center” _builder_version=”4.27.4″ _module_preset=”3117bc07-6a8a-4679-b3bb-b6ed74b48a2f” custom_button=”on” button_text_color=”#FFFFFF” button_bg_use_color_gradient=”on” button_bg_color_gradient_direction=”229deg” button_bg_color_gradient_stops=”rgba(189,22,179,0.8) 0%|rgba(253,202,65,0.8) 100%” button_border_width=”0px” button_border_radius=”15px” button_font=”Be Vietnam Pro|600|||||||” button_use_icon=”off” box_shadow_style=”preset1″ box_shadow_blur=”35px” box_shadow_spread=”-11px” box_shadow_color=”rgba(255,255,255,0.28)” global_colors_info=”{}” button_bg_color__hover_enabled=”on|desktop” button_bg_color__hover=”rgba(0,127,31,0.7)” button_bg_enable_color__hover=”on” button_border_width__hover=”0px” button_border_width__hover_enabled=”on|desktop” button_border_radius__hover=”15px” button_border_radius__hover_enabled=”on|desktop” box_shadow_color__hover=”rgba(255,255,255,0.49)” box_shadow_color__hover_enabled=”on|hover” button_text_size__hover_enabled=”on|desktop” button_border_color__hover=”rgba(255,255,255,0.02)” button_border_color__hover_enabled=”on|hover” button_icon_color__hover=”#FFFFFF” button_icon_color__hover_enabled=”on|hover”][\/et_pb_button][\/et_pb_column][et_pb_column type=”1_4″ _builder_version=”4.18.0″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||”][et_pb_button button_url=”https:\/\/www.patreon.com\/posts\/how-to-get-most-96445637″ url_new_window=”on” button_text=”Learning” button_alignment=”center” _builder_version=”4.27.5″ _module_preset=”3117bc07-6a8a-4679-b3bb-b6ed74b48a2f” custom_button=”on” button_text_color=”#FFFFFF” button_bg_use_color_gradient=”on” button_bg_color_gradient_direction=”229deg” button_bg_color_gradient_stops=”rgba(189,22,179,0.8) 0%|rgba(253,202,65,0.8) 100%” button_border_width=”0px” button_border_radius=”15px” button_font=”Be Vietnam Pro|600|||||||” button_use_icon=”off” box_shadow_style=”preset1″ box_shadow_blur=”35px” box_shadow_spread=”-11px” box_shadow_color=”rgba(255,255,255,0.28)” global_colors_info=”{}” button_bg_color__hover_enabled=”on|desktop” button_bg_color__hover=”rgba(0,127,31,0.7)” button_bg_enable_color__hover=”on” button_border_width__hover=”0px” button_border_width__hover_enabled=”on|desktop” button_border_radius__hover=”15px” button_border_radius__hover_enabled=”on|desktop” box_shadow_color__hover=”rgba(255,255,255,0.49)” box_shadow_color__hover_enabled=”on|hover” button_text_size__hover_enabled=”on|desktop” button_border_color__hover=”rgba(255,255,255,0.02)” button_border_color__hover_enabled=”on|hover” button_icon_color__hover=”#FFFFFF” button_icon_color__hover_enabled=”on|hover”][\/et_pb_button][\/et_pb_column][et_pb_column type=”1_4″ _builder_version=”4.18.0″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||”][et_pb_button button_url=”https:\/\/smartdsp.pro\/tools” button_text=”Online Tools” button_alignment=”center” _builder_version=”4.27.5″ _module_preset=”3117bc07-6a8a-4679-b3bb-b6ed74b48a2f” custom_button=”on” button_text_color=”#FFFFFF” button_bg_use_color_gradient=”on” button_bg_color_gradient_direction=”229deg” button_bg_color_gradient_stops=”rgba(189,22,179,0.8) 0%|rgba(253,202,65,0.8) 100%” button_border_width=”0px” button_border_radius=”15px” button_font=”Be Vietnam Pro|600|||||||” button_use_icon=”off” box_shadow_style=”preset1″ box_shadow_blur=”35px” box_shadow_spread=”-11px” box_shadow_color=”rgba(255,255,255,0.28)” global_colors_info=”{}” button_bg_color__hover_enabled=”on|desktop” button_bg_color__hover=”rgba(0,127,31,0.7)” button_bg_enable_color__hover=”on” button_border_width__hover=”0px” button_border_width__hover_enabled=”on|desktop” button_border_radius__hover=”15px” button_border_radius__hover_enabled=”on|desktop” box_shadow_color__hover=”rgba(255,255,255,0.49)” box_shadow_color__hover_enabled=”on|hover” button_text_size__hover_enabled=”on|desktop” button_border_color__hover=”rgba(255,255,255,0.02)” button_border_color__hover_enabled=”on|hover” button_icon_color__hover=”#FFFFFF” button_icon_color__hover_enabled=”on|hover”][\/et_pb_button][\/et_pb_column][\/et_pb_row][\/et_pb_section]\n","protected":false},"excerpt":{"rendered":"<p>Verify if you can actually hear a difference between 2 files. Free \u00b7 100% Local \u00b7 No Ads \u00b7 No Account Required.<\/p>","protected":false},"author":392,"featured_media":4648,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"class_list":["post-4642","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/smartdsp.pro\/fr\/wp-json\/wp\/v2\/pages\/4642","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/smartdsp.pro\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/smartdsp.pro\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/smartdsp.pro\/fr\/wp-json\/wp\/v2\/users\/392"}],"replies":[{"embeddable":true,"href":"https:\/\/smartdsp.pro\/fr\/wp-json\/wp\/v2\/comments?post=4642"}],"version-history":[{"count":5,"href":"https:\/\/smartdsp.pro\/fr\/wp-json\/wp\/v2\/pages\/4642\/revisions"}],"predecessor-version":[{"id":4650,"href":"https:\/\/smartdsp.pro\/fr\/wp-json\/wp\/v2\/pages\/4642\/revisions\/4650"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/smartdsp.pro\/fr\/wp-json\/wp\/v2\/media\/4648"}],"wp:attachment":[{"href":"https:\/\/smartdsp.pro\/fr\/wp-json\/wp\/v2\/media?parent=4642"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":4642,"date":"2026-02-18T16:52:09","date_gmt":"2026-02-18T21:52:09","guid":{"rendered":"https:\/\/smartdsp.pro\/?page_id=4642"},"modified":"2026-02-18T16:58:50","modified_gmt":"2026-02-18T21:58:50","slug":"abx-test","status":"publish","type":"page","link":"https:\/\/smartdsp.pro\/fr\/abx-test\/","title":{"rendered":"Test Comparaison Audio ABx"},"content":{"rendered":"\n[et_pb_section fb_built=”1″ _builder_version=”4.27.5″ _module_preset=”default” background_color=”#000000″ background_image=”https:\/\/smartdsp.pro\/wp-content\/uploads\/2022\/10\/streamer-79.png” locked=”off” global_colors_info=”{}”][et_pb_row _builder_version=”4.27.5″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.27.5″ _module_preset=”default” global_colors_info=”{}”][et_pb_code _builder_version=”4.27.5″ _module_preset=”default” hover_enabled=”0″ global_colors_info=”{}” sticky_enabled=”0″]ABX Audio Comparator<\/title><link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\"><link href=\"https:\/\/fonts.googleapis.com\/css2?family=Be+Vietnam+Pro:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\"><style>*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }:root { --accent: #f3be29; --accent-h: #f99c06; --gradient: linear-gradient(135deg, #f3be29 0%, #cd3ba7 100%); --gb: rgba(255,255,255,0.09); \/* glass border *\/ --gb-h: rgba(255,255,255,0.16); \/* glass border hover *\/ --text: #ffffff; --text-sub: rgba(255,255,255,0.58); --text-dim: rgba(255,255,255,0.32); --red: #ff4d6d; --green: #39d98a; --panel: rgba(8,8,10,0.60); --r: 16px; --r-sm: 10px; --ease: 0.17s cubic-bezier(0.4,0,0.2,1);}body { font-family: 'Be Vietnam Pro', sans-serif; color: var(--text); background: transparent; min-height: 100vh; padding: 32px 20px 56px; -webkit-font-smoothing: antialiased;}.app { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }\/* \u2500\u2500\u2500 Header \u2500\u2500\u2500 *\/.header { display: flex; align-items: center; gap: 18px; padding-bottom: 20px; border-bottom: 1px solid var(--gb);}.logo-badge { background: var(--gradient); border-radius: 11px; padding: 8px 15px; font-size: 13px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: #000; flex-shrink: 0;}.header-info h1 { font-size: 18px; font-weight: 700; letter-spacing: -.02em; color: var(--text); }.header-info p { font-size: 11.5px; color: var(--text); margin-top: 3px; }.la-badge { display: inline-flex; align-items: center; gap: 7px; padding: 5px 14px 5px 10px; border-radius: 100px; border: 1px solid rgba(8, 156, 4,0.22); background: rgba(28, 156, 4,0.06); margin-bottom: 10px; max-width:380px; } .la-badge-pip { width: 5px; height: 5px; border-radius: 50%; background: #089c04; box-shadow: 0 0 7px #089c04; animation: pip 2.5s ease infinite; } @keyframes pip { 0%,100%{ opacity:1; box-shadow:0 0 7px var(--accent); } 50% { opacity:0.35; box-shadow:0 0 2px var(--accent); } } .la-badge-text { font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #089c04; }\/* \u2500\u2500\u2500 Panel \u2500\u2500\u2500 *\/.panel { background: var(--panel); border: 1px solid var(--gb); border-radius: var(--r); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); padding: 24px; transition: border-color var(--ease);}.panel:hover { border-color: var(--gb-h); }.panel-title { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text); margin-bottom: 20px;}\/* \u2500\u2500\u2500 File Slots \u2500\u2500\u2500 *\/.files-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }.file-slot { border: 1.5px dashed rgba(255,255,255,0.12); border-radius: var(--r-sm); padding: 22px 16px; min-height: 116px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; cursor: pointer; position: relative; overflow: hidden; background: rgba(255,255,255,0.02); transition: all var(--ease);}.file-slot:hover { border-color: rgba(243,190,41,.40); background: rgba(243,190,41,.03); }.file-slot.loaded { border-style: solid; border-color: rgba(243,190,41,.32); background: rgba(243,190,41,.04); }.file-slot input[type=\"file\"] { display: none; }.slot-label { font-size: 22px; font-weight: 800; background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;}.slot-name { font-size: 11.5px; color: var(--text-sub); text-align: center; word-break: break-all; line-height: 1.45; }.slot-hint { font-size: 11px; color: var(--text-dim); }.slot-clear { position: absolute; top: 8px; right: 10px; font-size: 13px; color: var(--text-dim); cursor: pointer; background: none; border: none; transition: color var(--ease); display: none; line-height: 1; padding: 2px;}.file-slot.loaded .slot-clear { display: block; }.slot-clear:hover { color: var(--red); }\/* \u2500\u2500\u2500 Toggle \u2500\u2500\u2500 *\/.options-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 16px; }.toggle-group { display: flex; align-items: center; gap: 10px; cursor: pointer; }.toggle-label { font-size: 13px; font-weight: 500; color: var(--text-sub); user-select: none; }.toggle { position: relative; width: 40px; height: 22px; flex-shrink: 0; }.toggle input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }\/* track *\/.t-track { position: absolute; inset: 0; border-radius: 11px; background: rgba(255,255,255,0.10); border: 1.5px solid rgba(255,255,255,0.14); transition: background var(--ease), border-color var(--ease); cursor: pointer;}.toggle input:checked ~ .t-track { background: var(--accent); border-color: var(--accent); }\/* thumb \u2014 sibling to track inside .toggle, NOT inside track *\/.t-thumb { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.45); transition: transform var(--ease); pointer-events: none; z-index: 2;}.toggle input:checked ~ .t-thumb { transform: translateX(18px); }.gain-badges { display: flex; align-items: center; gap: 6px; margin-left: auto; }.gain-badge { padding: 3px 9px; border-radius: 6px; font-size: 11px; font-weight: 600; background: rgba(243,190,41,.10); color: var(--accent); border: 1px solid rgba(243,190,41,.22); display: none;}.info-note { margin-top: 12px; padding: 10px 14px; border-radius: 9px; border: 1px solid var(--gb); background: rgba(255,255,255,.025); font-size: 11.5px; color: var(--text-sub); line-height: 1.6;}.info-note strong { color: var(--text); }\/* \u2500\u2500\u2500 Buttons \u2500\u2500\u2500 *\/.btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border-radius: var(--r-sm); font-family: 'Be Vietnam Pro', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .01em; cursor: pointer; border: 1.5px solid transparent; transition: all var(--ease); white-space: nowrap; background: none;}.btn:disabled { opacity: .28; cursor: not-allowed; pointer-events: none; }\/* Track buttons \u2014 white idle, yellow active *\/.btn-track { color: var(--text); border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.05);}.btn-track:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.30);}.btn-track.playing { color: var(--accent); border-color: rgba(243,190,41,.55); background: rgba(243,190,41,.10); box-shadow: 0 0 18px rgba(243,190,41,.12);}\/* Ghost \/ secondary *\/.btn-ghost { color: var(--text-sub); border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.04);}.btn-ghost:hover { color: var(--text); background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.20);}\/* Primary CTA *\/.btn-primary { background: var(--gradient); color: #000; border: none; font-weight: 700; box-shadow: 0 4px 18px rgba(243,190,41,.18);}.btn-primary:hover { filter: brightness(1.07); box-shadow: 0 4px 26px rgba(243,190,41,.30); transform: translateY(-1px);}.btn-sm { padding: 7px 15px; font-size: 12px; border-radius: 8px; }\/* \u2500\u2500\u2500 Player \u2500\u2500\u2500 *\/.player-buttons { display: flex; gap: 10px; margin-bottom: 22px; flex-wrap: wrap; }.timeline-wrap { display: flex; flex-direction: column; gap: 9px; }.time-row { display: flex; justify-content: space-between; align-items: center; }.now-playing { font-size: 12px; font-weight: 600; color: var(--text-sub); display: flex; align-items: center; gap: 8px; }.np-slot { background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }.time-code { font-size: 11.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; font-weight: 500; }.status-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.14); flex-shrink: 0; transition: background var(--ease);}.status-dot.on { background: var(--green); box-shadow: 0 0 7px rgba(57,217,138,.65); animation: blink 1.4s ease-in-out infinite; }@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.5} }\/* \u2500\u2500\u2500 Range inputs \u2014 all unified \u2500\u2500\u2500 *\/input[type=\"range\"] { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 2px; background: rgba(255,255,255,.10); outline: none; cursor: pointer;}input[type=\"range\"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 15px; height: 15px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px rgba(243,190,41,.50); transition: transform var(--ease), box-shadow var(--ease); cursor: pointer;}input[type=\"range\"]:hover::-webkit-slider-thumb { transform: scale(1.25); box-shadow: 0 0 12px rgba(243,190,41,.65);}input[type=\"range\"]::-moz-range-thumb { width: 15px; height: 15px; border-radius: 50%; background: var(--accent); border: none; box-shadow: 0 0 6px rgba(243,190,41,.50);}\/* Seek: yellow fill *\/#seekBar { background: linear-gradient(to right, rgba(243,190,41,.65) var(--pct,0%), rgba(255,255,255,.10) var(--pct,0%)); }\/* Volume: yellow fill *\/#volumeBar { background: linear-gradient(to right, rgba(243,190,41,.70) var(--pct,80%), rgba(255,255,255,.10) var(--pct,80%)); max-width: 140px; }.controls-row { display: flex; align-items: center; gap: 14px; margin-top: 16px; flex-wrap: wrap; }.vol-group { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 160px; }.mute-btn { font-size: 14px; cursor: pointer; user-select: none; color: var(--text); transition: color var(--ease); flex-shrink: 0; background: none; border: none; padding: 0; font-family: inherit; }.mute-btn:hover { color: var(--text); }.vol-label { font-size: 11px; color: var(--text); font-variant-numeric: tabular-nums; min-width: 32px; }\/* \u2500\u2500\u2500 ABX \u2500\u2500\u2500 *\/.abx-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }.abx-meta { display: flex; align-items: center; gap: 14px; }.trial-counter { font-size: 13px; font-weight: 600; color: var(--text-sub); }.trial-counter strong { color: var(--text); font-size: 16px; }.progress-dots { display: flex; gap: 5px; }.dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.12); border: 1.5px solid transparent; transition: all .25s ease;}\/* During test \u2014 answered dots are just slightly brighter white, no colour hint *\/.dot.answered { background: rgba(255,255,255,.40); }\/* Current trial pulse *\/.dot.current { background: transparent; border-color: var(--accent); box-shadow: 0 0 7px rgba(243,190,41,.55); animation: blink 1.2s ease-in-out infinite; }\/* Revealed after test *\/.dot.correct { background: var(--green); border-color: transparent; box-shadow: none; animation: none; }.dot.wrong { background: var(--red); border-color: transparent; box-shadow: none; animation: none; }.stop-abx-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }.stop-abx-sub { font-size: 10.5px; color: var(--text-dim); }.abx-player-row { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }.btn-x-wide { flex: 1; justify-content: center; }.answer-row { display: flex; gap: 12px; }.btn-answer { flex: 1; justify-content: center; font-size: 15px; font-weight: 700; padding: 18px; border-radius: 12px; letter-spacing: .04em; color: var(--text); border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.04);}.btn-answer:hover { color: var(--accent); border-color: rgba(243,190,41,.50); background: rgba(243,190,41,.08); box-shadow: 0 4px 22px rgba(243,190,41,.12); transform: translateY(-2px);}.abx-hint { font-size: 11.5px; color: var(--text-dim); text-align: center; margin-top: 14px; line-height: 1.6; }\/* \u2500\u2500\u2500 Results \u2500\u2500\u2500 *\/#results-panel { display: none; }.results-hero { display: flex; align-items: center; gap: 24px; padding: 24px; border-radius: var(--r-sm); background: rgba(255,255,255,.025); border: 1px solid var(--gb); margin-bottom: 18px;}.score-pct { font-size: 54px; font-weight: 800; line-height: 1; flex-shrink: 0; background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;}.score-detail { flex: 1; }.score-label { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 4px; }.score-sub { font-size: 12px; color: var(--text-sub); line-height: 1.6; }.score-bar-wrap { height: 5px; background: rgba(255,255,255,.08); border-radius: 3px; margin-top: 14px; overflow: hidden; }.score-bar { height: 100%; border-radius: 3px; background: var(--gradient); transition: width .7s cubic-bezier(.4,0,.2,1); }.stat-badges { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }.stat-badge { padding: 9px 14px; border-radius: 9px; background: rgba(255,255,255,.04); border: 1px solid var(--gb); display: flex; flex-direction: column; gap: 3px;}.sb-val { font-size: 18px; font-weight: 800; color: var(--text); }.sb-lbl { font-size: 11px; color: var(--text-dim); }.trials-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px,1fr)); gap: 8px; margin-bottom: 16px; }.trial-card { padding: 10px 6px; border-radius: 10px; text-align: center; font-size: 11px; font-weight: 600; border: 1.5px solid transparent;}.trial-card.correct { background: rgba(57,217,138,.10); border-color: rgba(57,217,138,.30); color: var(--green); }.trial-card.wrong { background: rgba(255,77,109,.10); border-color: rgba(255,77,109,.30); color: var(--red); }.tc-num { font-size: 16px; font-weight: 800; display: block; margin-bottom: 3px; }.tc-answer { opacity: .72; }.interpretation { padding: 14px 18px; border-radius: var(--r-sm); font-size: 13px; line-height: 1.65; color: var(--text-sub); border: 1px solid var(--gb); background: rgba(255,255,255,.025);}.interpretation strong { color: var(--text); }.results-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }\/* \u2500\u2500\u2500 Feedback flash \u2500\u2500\u2500 *\/.feedback-flash { position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: 0; transition: opacity .12s ease; background: rgba(243,190,41,.06);}.feedback-flash.show { opacity: 1; }\/* \u2500\u2500\u2500 Mobile \u2500\u2500\u2500 *\/@media (max-width: 560px) { .files-grid { grid-template-columns: 1fr; } .answer-row { flex-direction: column; } .score-pct { font-size: 38px; }}::-webkit-scrollbar { width: 5px; }::-webkit-scrollbar-track { background: transparent; }::-webkit-scrollbar-thumb { background: rgba(255,255,255,.10); border-radius: 3px; }<\/style><\/head><body><div class=\"feedback-flash\" id=\"feedbackFlash\"><\/div><div class=\"app\">  <div class=\"la-badge\"> <span class=\"la-badge-pip\"><\/span> <span class=\"la-badge-text\">Free \u00b7 100% Local \u00b7 No Ads \u00b7 No Account Required<\/span> <\/div> <div class=\"header\"> <div class=\"logo-badge\">ABX<\/div> <div class=\"header-info\"> <h1>Audio Blind Test Comparator<\/h1> <pee><b>Verify if you can actually hear a difference between 2 files.<\/b><\/br>Load files A\/B > Start Blind Test > Guess multiple times which file is playing > Reveal Results.> <\/pee> <\/div> <\/div>  <div class=\"panel\"> <div class=\"panel-title\">Load Files<\/div> <div class=\"files-grid\"> <div class=\"file-slot\" id=\"slotA\" onclick=\"triggerFile('A')\"> <input type=\"file\" id=\"fileA\" accept=\"audio\/*\" onchange=\"loadFile('A',this)\"> <div class=\"slot-label\">A<\/div> <div class=\"slot-name\" id=\"nameA\">Click or drop file A<\/div> <div class=\"slot-hint\" id=\"hintA\">WAV \u00b7 FLAC \u00b7 MP3 \u00b7 AAC \u00b7 OGG<\/div> <button class=\"slot-clear\" id=\"clearA\" onclick=\"clearFile(event,'A')\" title=\"Remove\">\u2715<\/button> <\/div> <div class=\"file-slot\" id=\"slotB\" onclick=\"triggerFile('B')\"> <input type=\"file\" id=\"fileB\" accept=\"audio\/*\" onchange=\"loadFile('B',this)\"> <div class=\"slot-label\">B<\/div> <div class=\"slot-name\" id=\"nameB\">Click or drop file B<\/div> <div class=\"slot-hint\" id=\"hintB\">WAV \u00b7 FLAC \u00b7 MP3 \u00b7 AAC \u00b7 OGG<\/div> <button class=\"slot-clear\" id=\"clearB\" onclick=\"clearFile(event,'B')\" title=\"Remove\">\u2715<\/button> <\/div> <\/div> <div class=\"options-row\"> <label class=\"toggle-group\" for=\"gainToggle\"> <div class=\"toggle\"> <input type=\"checkbox\" id=\"gainToggle\" checked onchange=\"onGainToggle()\"> <div class=\"t-track\"><\/div> <div class=\"t-thumb\"><\/div> <\/div> <span class=\"toggle-label\">Gain Match<\/span> <\/label> <div class=\"gain-badges\"> <span class=\"gain-badge\" id=\"gainBadgeA\"><\/span> <span class=\"gain-badge\" id=\"gainBadgeB\"><\/span> <\/div> <\/div> <div class=\"info-note\" id=\"gainNote\"> \u26a1 <strong>Gain Match ON<\/strong> \u2014 RMS-based compensation applied in real-time so volume differences don’t bias your test. For gold-standard results, LUFS-normalize your files in a DAW beforehand. <\/div> <\/div> <div class=\"panel\"> <div class=\"panel-title\">Blind Test<\/div> <div id=\"abxReady\"> <pee style=\"font-size:13px;color:var(--text-sub);line-height:1.75;margin-bottom:18px;\"> Load both files above to begin. Each trial randomly assigns A or B as the mystery file <strong style=\"color:var(--text);\">X<\/strong>. Listen freely, then vote. Results and statistics reveal only at the end \u2014 no bias during the test. <\/pee> <button class=\"btn btn-primary\" id=\"startBtn\" onclick=\"abxStart()\" disabled>\u25b6 Start Blind Test<\/button> <\/div> <div id=\"abxRun\" style=\"display:none\"> <div class=\"abx-header\"> <div class=\"abx-meta\"> <div class=\"progress-dots\" id=\"progressDots\"><\/div> <div class=\"trial-counter\">Trial <strong id=\"trialNum\">1<\/strong> \/ 16<\/div> <\/div> <div class=\"stop-abx-wrap\"> <button class=\"btn btn-ghost btn-sm\" onclick=\"abxStop()\">\u25a0 Stop Early<\/button> <span class=\"stop-abx-sub\">Reveals results<\/span> <\/div> <\/div> <div class=\"abx-player-row\"> <button class=\"btn btn-track btn-x-wide\" id=\"btnX\" onclick=\"abxToggle('X')\"> <span id=\"iconX\">\u25b6<\/span> Play X <\/button> <button class=\"btn btn-track btn-sm\" id=\"btnAbxA\" onclick=\"abxToggle('A')\"> <span id=\"iconAbxA\">\u25b6<\/span> A <\/button> <button class=\"btn btn-track btn-sm\" id=\"btnAbxB\" onclick=\"abxToggle('B')\"> <span id=\"iconAbxB\">\u25b6<\/span> B <\/button> <\/div> <div class=\"answer-row\"> <button class=\"btn btn-answer\" onclick=\"abxAnswer('A')\">A<\/button> <button class=\"btn btn-answer\" onclick=\"abxAnswer('B')\">B<\/button> <\/div> <pee class=\"abx-hint\">Play X, then compare with A and B. <strong style=\"color:var(--text-sub);\">Click A or B when ready to answer.<\/strong><\/pee> <\/div> <\/div>  <div class=\"panel\" id=\"results-panel\"> <div class=\"panel-title\">Results<\/div> <div class=\"results-hero\"> <div class=\"score-pct\" id=\"scorePct\">\u2014<\/div> <div class=\"score-detail\"> <div class=\"score-label\" id=\"scoreLabel\">\u2014<\/div> <div class=\"score-sub\" id=\"scoreSub\">\u2014<\/div> <div class=\"score-bar-wrap\"><div class=\"score-bar\" id=\"scoreBar\" style=\"width:0%\"><\/div><\/div> <\/div> <\/div> <div class=\"stat-badges\" id=\"statBadges\"><\/div> <div class=\"trials-grid\" id=\"trialsGrid\"><\/div> <div class=\"interpretation\" id=\"interp\"><\/div> <div class=\"results-actions\"> <button class=\"btn btn-primary\" onclick=\"abxStart()\">\u25b6 Run Again<\/button> <button class=\"btn btn-ghost\" onclick=\"hideResults()\">\u2715 Dismiss<\/button> <\/div> <\/div>  <div class=\"panel\"> <div class=\"panel-title\">Simple Player<\/div> <div class=\"player-buttons\"> <button class=\"btn btn-track\" id=\"btnA\" onclick=\"playerToggle('A')\" disabled> <span id=\"iconA\">\u25b6<\/span> Play A <\/button> <button class=\"btn btn-track\" id=\"btnB\" onclick=\"playerToggle('B')\" disabled> <span id=\"iconB\">\u25b6<\/span> Play B <\/button> <button class=\"btn btn-ghost\" id=\"btnStop\" onclick=\"playerStop()\" disabled>\u25a0 Stop<\/button> <\/div> <div class=\"timeline-wrap\"> <div class=\"time-row\"> <div class=\"now-playing\"> <div class=\"status-dot\" id=\"playerDot\"><\/div> <span id=\"npLabel\">Stopped<\/span> <\/div> <span class=\"time-code\" id=\"timeCode\">0:00 \/ 0:00<\/span> <\/div> <input type=\"range\" id=\"seekBar\" min=\"0\" max=\"10000\" value=\"0\" oninput=”seekInput(this)” onchange=”seekCommit(this)”> <\/div> <div class=\"controls-row\"> <div class=\"vol-group\"> <button class=\"mute-btn\" id=\"muteBtn\" onclick=\"toggleMute()\">\ud83d\udd0a<\/button> <input type=\"range\" id=\"volumeBar\" min=\"0\" max=\"100\" value=\"80\" oninput=\"setVolume(this.value)\"> <span class=\"vol-label\" id=\"volLabel\">80%<\/span> <\/div> <\/div> <\/div> <\/div><script>'use strict';\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 AUDIO CONTEXT\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/const AC = new (window.AudioContext || window.webkitAudioContext)();const masterGain = AC.createGain();masterGain.gain.value = 0.8;masterGain.connect(AC.destination);\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 APP STATE\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\/\/ File dataconst F = { A: { buffer: null, name: '', rms: 0, comp: 1 }, B: { buffer: null, name: '', rms: 0, comp: 1 },};\/\/ Normal playerconst P = { slot: null, \/\/ 'A'|'B'|null src: null, \/\/ AudioBufferSourceNode gn: null, \/\/ GainNode startAt: 0, \/\/ AC.currentTime - offset when play began duration: 0, offset: 0, \/\/ paused-at seconds playing: false, seeking: false, raf: null,};\/\/ ABX playerconst X = { active: false, trials: [], currentX: null, \/\/ 'A'|'B' which: null, \/\/ 'X'|'A'|'B'|null (which button is active) src: null, gn: null, startAt: 0, duration: 0, offset: 0, playing: false,};let gainMatch = true;let muted = false;let volume = 0.8;\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 FILE LOADING\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/function triggerFile(slot) { document.getElementById('file' + slot).click();}async function loadFile(slot, inp) { const file = inp.files[0]; if (!file) return; inp.value = ''; const nameEl = document.getElementById('name' + slot); const hintEl = document.getElementById('hint' + slot); nameEl.textContent = '\u23f3 Decoding\u2026'; hintEl.textContent = ''; try { await acResume(); const buf = await AC.decodeAudioData(await file.arrayBuffer()); F[slot].buffer = buf; F[slot].name = file.name; F[slot].rms = calcRMS(buf); nameEl.textContent = file.name; hintEl.textContent = fmt(buf.duration) + ' \u00b7 ' + (file.size\/1048576).toFixed(1) + ' MB'; document.getElementById('slot' + slot).classList.add('loaded'); recomp(); refreshGainBadges(); refreshUI(); } catch(e) { nameEl.textContent = '\u26a0 Could not decode this file'; hintEl.textContent = 'Try WAV, FLAC, or MP3'; console.error(e); }}function clearFile(e, slot) { e.stopPropagation(); if (P.slot === slot && P.playing) playerStop(); F[slot] = { buffer: null, name: '', rms: 0, comp: 1 }; document.getElementById('slot' + slot).classList.remove('loaded'); document.getElementById('name' + slot).textContent = 'Click or drop file ' + slot; document.getElementById('hint' + slot).textContent = 'WAV \u00b7 FLAC \u00b7 MP3 \u00b7 AAC \u00b7 OGG'; document.getElementById('gainBadge' + slot).style.display = 'none'; refreshUI();}\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 GAIN MATCHING\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/function calcRMS(buf) { let s = 0, n = 0; for (let c = 0; c < buf.numberOfChannels; c++) { const d = buf.getChannelData(c); for (let i = 0; i < d.length; i++) { s += d[i]*d[i]; n++; } } return n > 0 ? Math.sqrt(s\/n) : 0;}function recomp() { if (!F.A.buffer || !F.B.buffer) return; const ra = F.A.rms, rb = F.B.rms; if (!ra || !rb) return; const t = Math.min(ra, rb); F.A.comp = t \/ ra; F.B.comp = t \/ rb;}function getComp(slot) { return gainMatch ? (F[slot].comp || 1) : 1; }function onGainToggle() { gainMatch = document.getElementById('gainToggle').checked; \/\/ update live gain nodes if (P.playing && P.gn) P.gn.gain.setTargetAtTime(getComp(P.slot), AC.currentTime, 0.02); if (X.playing && X.gn) { const sl = X.which === 'X' ? X.currentX : X.which; if(sl) X.gn.gain.setTargetAtTime(getComp(sl), AC.currentTime, 0.02); } refreshGainBadges(); document.getElementById('gainNote').innerHTML = gainMatch ? '\u26a1 <strong>Gain Match ON<\/strong> \u2014 RMS-based compensation applied in real-time so volume differences don\\'t bias your test. For gold-standard results, LUFS-normalize your files in a DAW beforehand.' : '\u26a0 <strong>Gain Match OFF<\/strong> \u2014 Volume differences are not compensated. Ensure your files are pre-matched (same integrated LUFS) for a truly unbiased comparison.';}function refreshGainBadges() { ['A','B'].forEach(s => { const el = document.getElementById('gainBadge' + s); if (gainMatch && F.A.buffer && F.B.buffer) { const db = 20 * Math.log10(F[s].comp || 1); el.textContent = s + ': ' + (db >= 0 ? '+' : '') + db.toFixed(1) + ' dB'; el.style.display = 'inline-block'; } else { el.style.display = 'none'; } });}\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 AUDIO LOW-LEVEL HELPERS\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/function _startSrc(buf, comp, offset, onEnded) { const gn = AC.createGain(); gn.gain.value = comp; gn.connect(masterGain); const src = AC.createBufferSource(); src.buffer = buf; src.connect(gn); src.start(0, Math.max(0, Math.min(offset, buf.duration - 0.01))); src.onended = onEnded; return { src, gn, startAt: AC.currentTime - offset };}function _killSrc(src) { if (!src) return; src.onended = null; try { src.stop(); } catch(e) {}}\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 NORMAL PLAYER\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/function playerToggle(slot) { acResume(); if (P.playing && P.slot === slot) { \/\/ Pause current slot const pos = _pPos(); _killSrc(P.src); cancelAnimationFrame(P.raf); P.src = P.gn = null; P.playing = false; P.offset = pos; renderPlayer(); return; } \/\/ Switch slot or start fresh \u2014 carry offset regardless of slot \/\/ (same-position start when switching: user naturally synced in time) const offset = P.offset; \/\/ preserved across slot switches _killSrc(P.src); cancelAnimationFrame(P.raf); if (!F[slot].buffer) return; const { src, gn, startAt } = _startSrc(F[slot].buffer, getComp(slot), offset, () => { if (P.src === src) _onPlayerEnd(); }); P.slot = slot; P.src = src; P.gn = gn; P.startAt = startAt; P.duration = F[slot].buffer.duration; P.offset = 0; P.playing = true; renderPlayer(); _seekLoop();}function playerStop() { P.offset = _pPos(); _killSrc(P.src); cancelAnimationFrame(P.raf); P.src = P.gn = null; P.playing = false; renderPlayer();}function _onPlayerEnd() { cancelAnimationFrame(P.raf); P.src = P.gn = null; P.playing = false; P.offset = 0; setSeek(0); document.getElementById('timeCode').textContent = '0:00 \/ ' + fmt(P.duration); renderPlayer();}function _pPos() { if (!P.playing) return P.offset; return Math.min(AC.currentTime - P.startAt, P.duration);}function seekInput(el) { P.seeking = true; const t = (el.value \/ 10000) * P.duration; document.getElementById('timeCode').textContent = fmt(t) + ' \/ ' + fmt(P.duration); setSeek(el.value \/ 10000);}function seekCommit(el) { P.seeking = false; const t = (el.value \/ 10000) * P.duration; if (P.playing) { const slot = P.slot; _killSrc(P.src); cancelAnimationFrame(P.raf); const { src, gn, startAt } = _startSrc(F[slot].buffer, getComp(slot), t, () => { if (P.src === src) _onPlayerEnd(); }); P.src = src; P.gn = gn; P.startAt = startAt; P.offset = 0; _seekLoop(); } else { P.offset = t; }}function _seekLoop() { cancelAnimationFrame(P.raf); function tick() { if (!P.playing) return; if (!P.seeking) { const pos = _pPos(); const pct = P.duration > 0 ? pos \/ P.duration : 0; setSeek(pct); document.getElementById('timeCode').textContent = fmt(pos) + ' \/ ' + fmt(P.duration); } P.raf = requestAnimationFrame(tick); } P.raf = requestAnimationFrame(tick);}function setSeek(pct) { const bar = document.getElementById('seekBar'); bar.value = Math.round(pct * 10000); bar.style.setProperty('--pct', (pct * 100).toFixed(3) + '%');}function setVolume(val) { volume = val \/ 100; if (!muted) masterGain.gain.value = volume; document.getElementById('volLabel').textContent = val + '%'; document.getElementById('volumeBar').style.setProperty('--pct', val + '%');}function toggleMute() { muted = !muted; masterGain.gain.value = muted ? 0 : volume; document.getElementById('muteBtn').textContent = muted ? '\ud83d\udd07' : '\ud83d\udd0a';}function renderPlayer() { const btnA = document.getElementById('btnA'); const btnB = document.getElementById('btnB'); btnA.classList.toggle('playing', P.playing && P.slot === 'A'); btnB.classList.toggle('playing', P.playing && P.slot === 'B'); document.getElementById('iconA').textContent = (P.playing && P.slot === 'A') ? '\u23f8' : '\u25b6'; document.getElementById('iconB').textContent = (P.playing && P.slot === 'B') ? '\u23f8' : '\u25b6'; document.getElementById('btnStop').disabled = !P.playing; const dot = document.getElementById('playerDot'); const lbl = document.getElementById('npLabel'); if (P.playing) { dot.classList.add('on'); lbl.innerHTML = 'Playing <span class=\"np-slot\">' + P.slot + ' \u2014 ' + (F[P.slot].name||'') + '<\/span>'; } else { dot.classList.remove('on'); lbl.textContent = 'Stopped'; }}\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 ABX ENGINE\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/function abxStart() { if (!F.A.buffer || !F.B.buffer) return; playerStop(); _xKill(); X.active = true; X.trials = []; X.currentX = null; X.which = null; X.playing = false; X.offset = 0; document.getElementById('abxReady').style.display = 'none'; document.getElementById('abxRun').style.display = 'block'; document.getElementById('results-panel').style.display = 'none'; buildDots(); nextTrial();}function nextTrial() { const n = X.trials.length; if (n >= 16) { finishABX(); return; } X.currentX = Math.random() < 0.5 ? 'A' : 'B'; X.offset = 0; X.which = null; X.playing = false; _xKill(); document.getElementById('trialNum').textContent = n + 1; buildDots(); xRenderBtns(null); setTimeout(() => xPlay('X'), 220);}function abxToggle(which) { acResume(); if (X.which === which && X.playing) { \/\/ pause const pos = _xPos(); _xKill(); X.offset = pos; X.which = which; X.playing = false; xRenderBtns(null); } else { xPlay(which); }}function xPlay(which) { acResume(); const slot = which === 'X' ? X.currentX : which; const buf = F[slot] && F[slot].buffer; if (!buf) return; \/\/ carry position when switching sources within same trial const offset = X.playing ? _xPos() : X.offset; _xKill(); const { src, gn, startAt } = _startSrc(buf, getComp(slot), offset, () => { if (X.src === src) { X.playing = false; X.which = null; xRenderBtns(null); } }); X.src = src; X.gn = gn; X.startAt = startAt; X.duration= buf.duration; X.offset = 0; X.which = which; X.playing = true; xRenderBtns(which);}function _xPos() { if (!X.playing) return X.offset; return Math.min(AC.currentTime - X.startAt, X.duration);}function _xKill() { _killSrc(X.src); X.src = X.gn = null;}function xRenderBtns(which) { ['X','A','B'].forEach(w => { const btnId = w === 'X' ? 'btnX' : 'btnAbx' + w; const icoId = w === 'X' ? 'iconX' : 'iconAbx' + w; const act = (which === w && X.playing); document.getElementById(btnId).classList.toggle('playing', act); document.getElementById(icoId).textContent = act ? '\u23f8' : '\u25b6'; });}function abxAnswer(answer) { _xKill(); X.playing = false; X.which = null; xRenderBtns(null); const correct = X.currentX; X.trials.push({ correct, answer, right: answer === correct }); \/\/ Neutral flash \u2014 no colour hint const fl = document.getElementById('feedbackFlash'); fl.classList.add('show'); setTimeout(() => fl.classList.remove('show'), 280); buildDots(); if (X.trials.length >= 10) { setTimeout(finishABX, 380); } else { setTimeout(nextTrial, 380); }}function abxStop() { _xKill(); X.active = false; X.playing = false; document.getElementById('abxRun').style.display = 'none'; document.getElementById('abxReady').style.display = 'block'; if (X.trials.length > 0) showResults();}function finishABX() { _xKill(); X.active = false; X.playing = false; document.getElementById('abxRun').style.display = 'none'; document.getElementById('abxReady').style.display = 'block'; buildDots(); \/\/ now reveal correct\/wrong colours showResults();}\/* Dots: neutral (answered) during test, coloured only after *\/function buildDots() { const c = document.getElementById('progressDots'); c.innerHTML = ''; for (let i = 0; i < 10; i++) { const d = document.createElement('div'); d.className = 'dot'; if (i < X.trials.length) { d.classList.add(X.active ? 'answered' : (X.trials[i].right ? 'correct' : 'wrong')); } else if (i === X.trials.length && X.active) { d.classList.add('current'); } c.appendChild(d); }}\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 RESULTS\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/function showResults() { const t = X.trials, n = t.length; if (!n) return; const correct = t.filter(x => x.right).length; const pct = Math.round(correct\/n*100); const p = pVal(correct, n); document.getElementById('results-panel').style.display = 'block'; document.getElementById('scorePct').textContent = pct + '%'; setTimeout(() => document.getElementById('scoreBar').style.width = pct + '%', 60); let label, sub; if (pct === 100) { label = '\ud83c\udfaf Perfect score'; sub = 'Every trial correct \u2014 statistically significant discrimination.'; } else if (pct >= 80) { label = '\u2726 Excellent discrimination'; sub = 'Strong evidence you can reliably hear a difference.'; } else if (pct >= 70) { label = '\u2726 Good performance'; sub = 'You likely perceive a real difference. Consider a second run to confirm.'; } else if (pct >= 60) { label = '\u25b3 Marginal result'; sub = 'Slightly above chance. The difference may be very subtle.'; } else { label = '\u25cb Chance level'; sub = 'Consistent with random guessing. Files may be perceptually identical.'; } document.getElementById('scoreLabel').textContent = label; document.getElementById('scoreSub').textContent = sub; document.getElementById('statBadges').innerHTML = badge(correct+'\/'+n,'Correct') + badge(pct+'%','Accuracy') + badge(p.toFixed(3),'p-value') + badge(p < 0.05 ? 'Yes' : 'No','Significant?'); const grid = document.getElementById('trialsGrid'); grid.innerHTML = ''; t.forEach((r,i) => { const c = document.createElement('div'); c.className = 'trial-card ' + (r.right ? 'correct' : 'wrong'); c.innerHTML = `<span class=\"tc-num\">${i+1}<\/span><span class=\"tc-answer\">X=${r.correct}<!\u2013- [et_pb_br_holder] -\u2013>\u2192${r.answer}<\/span>`; grid.appendChild(c); }); document.getElementById('interp').innerHTML = p < 0.05 ? `<strong>Statistically significant<\/strong> (p = ${p.toFixed(3)}) \u2014 With ${correct} correct out of ${n}, there is strong statistical evidence that you can perceptually distinguish the two files. Tonal balance, transient handling, stereo image, or encoding artefacts may all be contributing.` : `<strong>Not statistically significant<\/strong> (p = ${p.toFixed(3)}) \u2014 With ${correct} correct out of ${n}, results are consistent with chance-level performance. You cannot reliably distinguish the two files under these conditions. Verify gain match, listening environment, and monitoring chain quality.`; document.getElementById('results-panel').scrollIntoView({ behavior: 'smooth', block: 'nearest' });}function badge(v, l) { return `<div class=\"stat-badge\"><span class=\"sb-val\">${v}<\/span><span class=\"sb-lbl\">${l}<\/span><\/div>`; }function hideResults() { document.getElementById('results-panel').style.display = 'none'; }\/\/ One-tailed binomial p-value, H\u2080: p=0.5function pVal(k, n) { let p = 0; for (let i = k; i <= n; i++) p += binom(n,i) * Math.pow(0.5, n); return p;}function binom(n, k) { if (k < 0 || k > n) return 0; if (k === 0 || k === n) return 1; k = Math.min(k, n-k); let r = 1; for (let i = 0; i < k; i++) r = r * (n-i) \/ (i+1); return r;}\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 UI HELPERS\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/function refreshUI() { const both = !!(F.A.buffer && F.B.buffer); document.getElementById('btnA').disabled = !F.A.buffer; document.getElementById('btnB').disabled = !F.B.buffer; document.getElementById('startBtn').disabled= !both; if (both) { recomp(); refreshGainBadges(); }}function fmt(s) { const m = Math.floor(s\/60), sec = Math.floor(s%60); return m + ':' + String(sec).padStart(2,'0');}async function acResume() { if (AC.state === 'suspended') await AC.resume(); }\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 DRAG & DROP\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/['A','B'].forEach(slot => { const el = document.getElementById('slot' + slot); el.addEventListener('dragover', e => { e.preventDefault(); el.style.borderColor = 'var(--accent)'; }); el.addEventListener('dragleave', ()=> { el.style.borderColor = ''; }); el.addEventListener('drop', e => { e.preventDefault(); el.style.borderColor = ''; const f = e.dataTransfer.files[0]; if (f) loadFile(slot, { files: [f], value: '' }); });});document.addEventListener('click', acResume, { once: true });\/\/ InitrefreshUI();renderPlayer();<\/script><\/body><\/html>[\/et_pb_code][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=”1″ admin_label=”Hero Section” _builder_version=”4.27.5″ background_color=”#000000″ use_background_color_gradient=”on” background_color_gradient_stops=”#000000 0%|rgba(0,0,0,0) 20%|rgba(0,0,0,0) 80%|#000000 100%” background_color_gradient_overlays_image=”on” background_image=”https:\/\/smartdsp.pro\/wp-content\/uploads\/2022\/10\/streamer-79.png” custom_padding=”9px|||1px||” locked=”off” global_colors_info=”{}”][et_pb_row _builder_version=”4.16″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” module_alignment=”center” custom_width_px=”700px” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.16″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||”][et_pb_text _builder_version=”4.16″ text_font=”||||||||” text_font_size=”18px” text_line_height=”2em” header_font=”Titillium Web||||||||” header_font_size=”66px” header_line_height=”1.5em” header_2_font=”Titillium Web||||||||” header_2_font_size=”66px” header_2_line_height=”1.5em” header_3_font=”Titillium Web||||||||” header_3_font_size=”66px” header_3_line_height=”1.5em” header_4_font=”Titillium Web||||||||” header_4_font_size=”66px” header_4_line_height=”1.5em” header_5_font=”Titillium Web||||||||” header_5_font_size=”66px” header_5_line_height=”1.5em” header_6_font=”Titillium Web||||||||” header_6_font_size=”66px” header_6_line_height=”1.5em” text_orientation=”center” background_layout=”dark” max_width=”700px” module_alignment=”center” header_font_size_tablet=”40px” header_font_size_phone=”” header_font_size_last_edited=”on|phone” global_colors_info=”{}”]<h1>Frequently Asked<\/h1>[\/et_pb_text][et_pb_code _builder_version=”4.27.5″ _module_preset=”default” global_colors_info=”{}”][\/et_pb_code][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”1_2,1_2″ custom_padding_last_edited=”on|desktop” _builder_version=”4.27.4″ _module_preset=”default” background_color=”rgba(79,79,79,0.16)” overflow-x=”visible” overflow-y=”visible” custom_padding=”80px|75px|80px|75px|true|true” custom_padding_tablet=”30px|30px|30px|30px|true|true” custom_padding_phone=”20px|20px|20px|20px|true|true” border_radii=”on|20px|20px|20px|20px” box_shadow_style=”preset1″ box_shadow_horizontal=”-1px” box_shadow_vertical=”-1px” box_shadow_blur=”0px” box_shadow_color=”rgba(255,255,255,0.21)” global_colors_info=”{}”][et_pb_column type=”1_2″ _builder_version=”4.17.4″ _module_preset=”default” custom_padding_tablet=”||||false|false” custom_padding_phone=”||30px||false|false” custom_padding_last_edited=”off|phone” global_colors_info=”{}”][et_pb_blurb title=”How do I use this ABx Test?” use_icon=”on” font_icon=”u||divi||400″ icon_color=”#f3be29″ icon_placement=”left” _builder_version=”4.27.5″ header_font=”–et_global_heading_font|700||on|||||” header_font_size=”14px” header_letter_spacing=”2px” header_line_height=”1.8em” body_font=”–et_global_heading_font||||||||” body_text_color=”#FFFFFF” body_font_size=”16px” body_line_height=”1.8em” background_enable_color=”off” use_background_color_gradient=”on” background_color_gradient_direction=”164deg” background_color_gradient_stops=”rgba(243,190,41,0.17) 0%|rgba(205,59,167,0.17) 100%” background_layout=”dark” custom_margin=”||12%|” custom_margin_tablet=”70px|||” custom_margin_last_edited=”off|desktop” custom_padding=”30px|16px|30px|16px” animation_style=”fold” hover_enabled=”0″ border_radii=”on|20px|20px|20px|20px” box_shadow_style=”preset1″ locked=”off” global_colors_info=”{}” sticky_enabled=”0″]<div class=\"faq-item\">\n<ol class=\"[li_&]:mb-0 [li_&]:mt-1 [li_&]:gap-1 [&:not(:last-child)_ul]:pb-1 [&:not(:last-child)_ol]:pb-1 list-decimal flex flex-col gap-1 pl-8 mb-3\">\n<li class=\"whitespace-normal break-words pl-2\"><strong>Load your two files<\/strong> \u2014 click slot A and slot B, or drag and drop audio files directly onto each slot. Any browser-supported format works: WAV, FLAC, MP3, AAC, OGG, and more.<\/li>\n<li class=\"whitespace-normal break-words pl-2\"><strong>Preview and compare freely<\/strong> \u2014 use the Player section to listen to A and B back to back. The timeline scrubs both files; switching slots carries your playback position forward so you’re always comparing the same moment.<\/li>\n<li class=\"whitespace-normal break-words pl-2\"><strong>Start the Blind Test<\/strong> \u2014 click the “Start Blind Test” button.<br \/>Each trial plays a mystery file X (secretly either A or B). Listen to X, then use the A and B buttons to compare, then click <strong>A<\/strong> or <strong>B<\/strong> to cast your vote.<\/li>\n<li class=\"whitespace-normal break-words pl-2\"><strong>Repeat for all 16 trials<\/strong> \u2014 no right\/wrong feedback is shown during the test to keep it fully unbiased. You can stop before completing the 16 trials but we suggest doing at least 10, otherwise your results may not be accurate.<\/li>\n<li class=\"whitespace-normal break-words pl-2\"><strong>Review your results<\/strong> \u2014 accuracy percentage, p-value, per-trial breakdown, and a plain-language statistical interpretation are revealed at the end.<\/li>\n<\/ol>\n<p class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\"><strong>Tip:<\/strong> Unless if your studio, use headphones in a quiet environment. Listener fatigue is real \u2014 take a short break before starting the test if you’ve been mixing for hours!<\/p>\n<\/div>[\/et_pb_blurb][et_pb_blurb title=”Key features” use_icon=”on” font_icon=”u||divi||400″ icon_color=”#f3be29″ icon_placement=”left” _builder_version=”4.27.5″ header_font=”–et_global_heading_font|700||on|||||” header_font_size=”14px” header_letter_spacing=”2px” header_line_height=”1.8em” body_font=”–et_global_heading_font||||||||” body_text_color=”#FFFFFF” body_font_size=”16px” body_line_height=”1.8em” background_enable_color=”off” use_background_color_gradient=”on” background_color_gradient_direction=”164deg” background_color_gradient_stops=”rgba(243,190,41,0.17) 0%|rgba(205,59,167,0.17) 100%” background_layout=”dark” custom_margin=”||12%|” custom_margin_tablet=”70px|||” custom_margin_last_edited=”off|desktop” custom_padding=”30px|16px|30px|16px” animation_style=”fold” animation_delay=”100ms” hover_enabled=”0″ border_radii=”on|20px|20px|20px|20px” box_shadow_style=”preset1″ locked=”off” global_colors_info=”{}” sticky_enabled=”0″]<div class=\"faq-item\">\n<div class=\"faq-answer\">\n<p class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\"><strong>Gain Match<\/strong> is enabled by default and applies RMS-based gain compensation in real-time between the two files. This ensures that volume differences \u2014 one of the most common sources of bias in audio comparisons \u2014 don’t influence your judgment. The dB offset applied to each file is displayed as a badge. For the most rigorous results, consider LUFS-normalizing your files beforehand in your DAW (e.g. with a loudness normalization plugin or export option), then disabling Gain Match to confirm the compensation is minimal.<\/p>\n<p class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\"><strong>Easy ABx Test in your browser:\u00a0<\/strong>Simply click the “Start Blind Test” button after loading files A and B and guess which file you think is playing a few times before accessing the results.<br \/>ABx test allows you to tell via a less-biased test procedure if you can actually hear a difference between two files.<\/p>\n<p class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\"><strong>Statistical reporting<\/strong> \u2014 results include a one-tailed binomial p-value, which is the same statistical method used in peer-reviewed audio research and professional ABX software. A p-value below 0.05 is the standard threshold for claiming audible discrimination.<\/p>\n<p class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\"><strong>Drag and drop<\/strong> is supported on both file slots for fast workflow integration.<\/p>\n<\/div>\n<\/div>[\/et_pb_blurb][\/et_pb_column][et_pb_column type=”1_2″ _builder_version=”4.17.4″ _module_preset=”default” custom_padding_tablet=”|||0%|false|false” custom_padding_phone=”|||0%|false|false” custom_padding_last_edited=”off|desktop” global_colors_info=”{}”][et_pb_blurb title=”Are my audio files uploaded anywhere? How is data handled?” use_icon=”on” font_icon=”u||divi||400″ icon_color=”#f3be29″ icon_placement=”left” _builder_version=”4.27.5″ header_font=”–et_global_heading_font|700||on|||||” header_font_size=”14px” header_letter_spacing=”2px” header_line_height=”1.8em” body_font=”–et_global_heading_font||||||||” body_text_color=”#FFFFFF” body_font_size=”16px” body_line_height=”1.8em” background_enable_color=”off” use_background_color_gradient=”on” background_color_gradient_direction=”164deg” background_color_gradient_stops=”rgba(243,190,41,0.17) 0%|rgba(205,59,167,0.17) 100%” background_layout=”dark” custom_margin=”||12%|” custom_margin_tablet=”70px|||” custom_margin_last_edited=”off|desktop” custom_padding=”30px|16px|30px|16px” animation_style=”fold” animation_delay=”250ms” hover_enabled=”0″ border_radii=”on|20px|20px|20px|20px” box_shadow_style=”preset1″ locked=”off” global_colors_info=”{}” sticky_enabled=”0″]<div class=\"faq-item\">\n<div class=\"faq-answer\">\n<p class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\"><strong>No \u2014 nothing ever leaves your device.<\/strong> This tool runs entirely inside your browser using the Web Audio API. Your audio files are decoded locally in memory, never written to disk by the tool, never sent to a server, and never logged or stored anywhere.\u00a0<\/p>\n<\/div>\n<\/div>[\/et_pb_blurb][et_pb_blurb title=”Suggestions for best results” use_icon=”on” font_icon=”u||divi||400″ icon_color=”#f3be29″ icon_placement=”left” _builder_version=”4.27.5″ header_font=”–et_global_heading_font|700||on|||||” header_font_size=”14px” header_letter_spacing=”2px” header_line_height=”1.8em” body_font=”–et_global_heading_font||||||||” body_text_color=”#FFFFFF” body_font_size=”16px” body_line_height=”1.8em” background_enable_color=”off” use_background_color_gradient=”on” background_color_gradient_direction=”164deg” background_color_gradient_stops=”rgba(243,190,41,0.17) 0%|rgba(205,59,167,0.17) 100%” background_layout=”dark” custom_margin=”||12%|” custom_margin_tablet=”70px|||” custom_margin_last_edited=”off|desktop” custom_padding=”30px|16px|30px|16px” animation_style=”fold” animation_delay=”150ms” hover_enabled=”0″ border_radii=”on|20px|20px|20px|20px” box_shadow_style=”preset1″ locked=”off” global_colors_info=”{}” sticky_enabled=”0″]<ul>\n<li class=\"whitespace-normal break-words pl-2\"><strong>Gain-match carefully before hand.<\/strong> Even with Gain Match ON, RMS compensation is a broadband average. If your files have very different spectral or dynamic characteristics (e.g. one is heavily limited, one is unmastered), consider using an integrated LUFS meter in your DAW for pre-matching. Or something like the -neat- free plugin <a href=\"https:\/\/goodhertz.com\/loudness\/\" target=\"_blank\" rel=\"noopener\">Ghz Loudness by Goodhertz<\/a>, which let’s automatically gain match based on short term LUFs!<\/li>\n<li class=\"whitespace-normal break-words pl-2\"><strong>Run multiple sessions.<\/strong> A single 16-trial test has limited statistical power. Running the test twice on different days and combining results gives a much more reliable picture.<\/li>\n<\/ul>[\/et_pb_blurb][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.27.5″ _module_preset=”default” locked=”off” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.27.5″ _module_preset=”default” global_colors_info=”{}”][et_pb_heading title=”We’ve much more for you to explore:” _builder_version=”4.27.5″ _module_preset=”default” title_level=”h2″ title_font=”–et_global_heading_font||||||||” title_text_color=”#FFFFFF” global_colors_info=”{}”][\/et_pb_heading][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”1_4,1_4,1_4,1_4″ _builder_version=”4.18.0″ custom_margin=”1vw|auto||auto|false|false” animation_style=”flip” locked=”off” global_colors_info=”{}”][et_pb_column type=”1_4″ _builder_version=”4.18.0″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||”][et_pb_button button_url=”https:\/\/smartdsp.pro\/mastering-services” button_text=”Mastering” button_alignment=”center” _builder_version=”4.27.5″ _module_preset=”3117bc07-6a8a-4679-b3bb-b6ed74b48a2f” custom_button=”on” button_text_color=”#FFFFFF” button_bg_use_color_gradient=”on” button_bg_color_gradient_direction=”229deg” button_bg_color_gradient_stops=”rgba(189,22,179,0.8) 0%|rgba(253,202,65,0.8) 100%” button_border_width=”0px” button_border_radius=”15px” button_font=”Be Vietnam Pro|600|||||||” button_use_icon=”off” box_shadow_style=”preset1″ box_shadow_blur=”35px” box_shadow_spread=”-11px” box_shadow_color=”rgba(255,255,255,0.28)” global_colors_info=”{}” button_bg_color__hover_enabled=”on|desktop” button_bg_color__hover=”rgba(0,127,31,0.7)” button_bg_enable_color__hover=”on” button_border_width__hover=”0px” button_border_width__hover_enabled=”on|desktop” button_border_radius__hover=”15px” button_border_radius__hover_enabled=”on|desktop” box_shadow_color__hover=”rgba(255,255,255,0.49)” box_shadow_color__hover_enabled=”on|hover” button_text_size__hover_enabled=”on|desktop” button_border_color__hover=”rgba(255,255,255,0.02)” button_border_color__hover_enabled=”on|hover” button_icon_color__hover=”#FFFFFF” button_icon_color__hover_enabled=”on|hover”][\/et_pb_button][\/et_pb_column][et_pb_column type=”1_4″ _builder_version=”4.18.0″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||”][et_pb_button button_url=”https:\/\/smartdsp.pro\/smart-dsp-products\/” button_text=”Audio Effects” button_alignment=”center” _builder_version=”4.27.4″ _module_preset=”3117bc07-6a8a-4679-b3bb-b6ed74b48a2f” custom_button=”on” button_text_color=”#FFFFFF” button_bg_use_color_gradient=”on” button_bg_color_gradient_direction=”229deg” button_bg_color_gradient_stops=”rgba(189,22,179,0.8) 0%|rgba(253,202,65,0.8) 100%” button_border_width=”0px” button_border_radius=”15px” button_font=”Be Vietnam Pro|600|||||||” button_use_icon=”off” box_shadow_style=”preset1″ box_shadow_blur=”35px” box_shadow_spread=”-11px” box_shadow_color=”rgba(255,255,255,0.28)” global_colors_info=”{}” button_bg_color__hover_enabled=”on|desktop” button_bg_color__hover=”rgba(0,127,31,0.7)” button_bg_enable_color__hover=”on” button_border_width__hover=”0px” button_border_width__hover_enabled=”on|desktop” button_border_radius__hover=”15px” button_border_radius__hover_enabled=”on|desktop” box_shadow_color__hover=”rgba(255,255,255,0.49)” box_shadow_color__hover_enabled=”on|hover” button_text_size__hover_enabled=”on|desktop” button_border_color__hover=”rgba(255,255,255,0.02)” button_border_color__hover_enabled=”on|hover” button_icon_color__hover=”#FFFFFF” button_icon_color__hover_enabled=”on|hover”][\/et_pb_button][\/et_pb_column][et_pb_column type=”1_4″ _builder_version=”4.18.0″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||”][et_pb_button button_url=”https:\/\/www.patreon.com\/posts\/how-to-get-most-96445637″ url_new_window=”on” button_text=”Learning” button_alignment=”center” _builder_version=”4.27.5″ _module_preset=”3117bc07-6a8a-4679-b3bb-b6ed74b48a2f” custom_button=”on” button_text_color=”#FFFFFF” button_bg_use_color_gradient=”on” button_bg_color_gradient_direction=”229deg” button_bg_color_gradient_stops=”rgba(189,22,179,0.8) 0%|rgba(253,202,65,0.8) 100%” button_border_width=”0px” button_border_radius=”15px” button_font=”Be Vietnam Pro|600|||||||” button_use_icon=”off” box_shadow_style=”preset1″ box_shadow_blur=”35px” box_shadow_spread=”-11px” box_shadow_color=”rgba(255,255,255,0.28)” global_colors_info=”{}” button_bg_color__hover_enabled=”on|desktop” button_bg_color__hover=”rgba(0,127,31,0.7)” button_bg_enable_color__hover=”on” button_border_width__hover=”0px” button_border_width__hover_enabled=”on|desktop” button_border_radius__hover=”15px” button_border_radius__hover_enabled=”on|desktop” box_shadow_color__hover=”rgba(255,255,255,0.49)” box_shadow_color__hover_enabled=”on|hover” button_text_size__hover_enabled=”on|desktop” button_border_color__hover=”rgba(255,255,255,0.02)” button_border_color__hover_enabled=”on|hover” button_icon_color__hover=”#FFFFFF” button_icon_color__hover_enabled=”on|hover”][\/et_pb_button][\/et_pb_column][et_pb_column type=”1_4″ _builder_version=”4.18.0″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||”][et_pb_button button_url=”https:\/\/smartdsp.pro\/tools” button_text=”Online Tools” button_alignment=”center” _builder_version=”4.27.5″ _module_preset=”3117bc07-6a8a-4679-b3bb-b6ed74b48a2f” custom_button=”on” button_text_color=”#FFFFFF” button_bg_use_color_gradient=”on” button_bg_color_gradient_direction=”229deg” button_bg_color_gradient_stops=”rgba(189,22,179,0.8) 0%|rgba(253,202,65,0.8) 100%” button_border_width=”0px” button_border_radius=”15px” button_font=”Be Vietnam Pro|600|||||||” button_use_icon=”off” box_shadow_style=”preset1″ box_shadow_blur=”35px” box_shadow_spread=”-11px” box_shadow_color=”rgba(255,255,255,0.28)” global_colors_info=”{}” button_bg_color__hover_enabled=”on|desktop” button_bg_color__hover=”rgba(0,127,31,0.7)” button_bg_enable_color__hover=”on” button_border_width__hover=”0px” button_border_width__hover_enabled=”on|desktop” button_border_radius__hover=”15px” button_border_radius__hover_enabled=”on|desktop” box_shadow_color__hover=”rgba(255,255,255,0.49)” box_shadow_color__hover_enabled=”on|hover” button_text_size__hover_enabled=”on|desktop” button_border_color__hover=”rgba(255,255,255,0.02)” button_border_color__hover_enabled=”on|hover” button_icon_color__hover=”#FFFFFF” button_icon_color__hover_enabled=”on|hover”][\/et_pb_button][\/et_pb_column][\/et_pb_row][\/et_pb_section]\n","protected":false},"excerpt":{"rendered":"<p>Verify if you can actually hear a difference between 2 files. Free \u00b7 100% Local \u00b7 No Ads \u00b7 No Account Required.<\/p>","protected":false},"author":392,"featured_media":4648,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"class_list":["post-4642","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/smartdsp.pro\/fr\/wp-json\/wp\/v2\/pages\/4642","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/smartdsp.pro\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/smartdsp.pro\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/smartdsp.pro\/fr\/wp-json\/wp\/v2\/users\/392"}],"replies":[{"embeddable":true,"href":"https:\/\/smartdsp.pro\/fr\/wp-json\/wp\/v2\/comments?post=4642"}],"version-history":[{"count":5,"href":"https:\/\/smartdsp.pro\/fr\/wp-json\/wp\/v2\/pages\/4642\/revisions"}],"predecessor-version":[{"id":4650,"href":"https:\/\/smartdsp.pro\/fr\/wp-json\/wp\/v2\/pages\/4642\/revisions\/4650"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/smartdsp.pro\/fr\/wp-json\/wp\/v2\/media\/4648"}],"wp:attachment":[{"href":"https:\/\/smartdsp.pro\/fr\/wp-json\/wp\/v2\/media?parent=4642"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}