https://xenreference.com/wiki/index.php?action=history&feed=atom&title=User%3AInthar%2Fcommon.js
User:Inthar/common.js - Revision history
2026-06-10T21:56:02Z
Revision history for this page on the wiki
MediaWiki 1.44.2
https://xenreference.com/wiki/index.php?title=User:Inthar/common.js&diff=7349&oldid=prev
Inthar at 23:33, 26 May 2026
2026-05-26T23:33:39Z
<p></p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 23:33, 26 May 2026</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l8">Line 8:</td>
<td colspan="2" class="diff-lineno">Line 8:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> var TIMBRES = ['triangle', 'sawtooth', 'square', 'sine'];</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> var TIMBRES = ['triangle', 'sawtooth', 'square', 'sine'];</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> var TIMBRE_LABELS = { triangle: 'Triangle', sawtooth: 'Sawtooth', square: 'Square', sine: 'Sine' };</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> var TIMBRE_LABELS = { triangle: 'Triangle', sawtooth: 'Sawtooth', square: 'Square', sine: 'Sine' };</div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div> var LOOK_AHEAD = <del style="font-weight: bold; text-decoration: none;">50</del>.00; // 50ms buffer so the audio thread can schedule</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div> var LOOK_AHEAD = <ins style="font-weight: bold; text-decoration: none;">0</ins>.00; // 50ms buffer so the audio thread can schedule</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> var BASE_FREQ = 261.63; // middle C; pitch is set via detune (cents) on top</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> var BASE_FREQ = 261.63; // middle C; pitch is set via detune (cents) on top</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
</table>
Inthar
https://xenreference.com/wiki/index.php?title=User:Inthar/common.js&diff=7346&oldid=prev
Inthar at 22:34, 26 May 2026
2026-05-26T22:34:09Z
<p></p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 22:34, 26 May 2026</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l8">Line 8:</td>
<td colspan="2" class="diff-lineno">Line 8:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> var TIMBRES = ['triangle', 'sawtooth', 'square', 'sine'];</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> var TIMBRES = ['triangle', 'sawtooth', 'square', 'sine'];</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> var TIMBRE_LABELS = { triangle: 'Triangle', sawtooth: 'Sawtooth', square: 'Square', sine: 'Sine' };</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> var TIMBRE_LABELS = { triangle: 'Triangle', sawtooth: 'Sawtooth', square: 'Square', sine: 'Sine' };</div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div> var LOOK_AHEAD = <del style="font-weight: bold; text-decoration: none;">0</del>.00; // 50ms buffer so the audio thread can schedule</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div> var LOOK_AHEAD = <ins style="font-weight: bold; text-decoration: none;">50</ins>.00; // 50ms buffer so the audio thread can schedule</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> var BASE_FREQ = 261.63; // middle C; pitch is set via detune (cents) on top</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> var BASE_FREQ = 261.63; // middle C; pitch is set via detune (cents) on top</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
</table>
Inthar
https://xenreference.com/wiki/index.php?title=User:Inthar/common.js&diff=7338&oldid=prev
Inthar: Created page with "(function () { 'use strict'; var ctx = null; var activeNodes = []; var activeBtn = null; var STORAGE_KEY = 'edoChordPlayTimbre'; var TIMBRES = ['triangle', 'sawtooth', 'square', 'sine']; var TIMBRE_LABELS = { triangle: 'Triangle', sawtooth: 'Sawtooth', square: 'Square', sine: 'Sine' }; var LOOK_AHEAD = 0.00; // 50ms buffer so the audio thread can schedule var BASE_FREQ = 261.63; // middle C; pitch is set via detune (cents) on top..."
2026-05-26T20:28:09Z
<p>Created page with "(function () { 'use strict'; var ctx = null; var activeNodes = []; var activeBtn = null; var STORAGE_KEY = 'edoChordPlayTimbre'; var TIMBRES = ['triangle', 'sawtooth', 'square', 'sine']; var TIMBRE_LABELS = { triangle: 'Triangle', sawtooth: 'Sawtooth', square: 'Square', sine: 'Sine' }; var LOOK_AHEAD = 0.00; // 50ms buffer so the audio thread can schedule var BASE_FREQ = 261.63; // middle C; pitch is set via detune (cents) on top..."</p>
<p><b>New page</b></p><div>(function () {<br />
'use strict';<br />
<br />
var ctx = null;<br />
var activeNodes = [];<br />
var activeBtn = null;<br />
var STORAGE_KEY = 'edoChordPlayTimbre';<br />
var TIMBRES = ['triangle', 'sawtooth', 'square', 'sine'];<br />
var TIMBRE_LABELS = { triangle: 'Triangle', sawtooth: 'Sawtooth', square: 'Square', sine: 'Sine' };<br />
var LOOK_AHEAD = 0.00; // 50ms buffer so the audio thread can schedule<br />
var BASE_FREQ = 261.63; // middle C; pitch is set via detune (cents) on top<br />
<br />
var timbre = (function () {<br />
try {<br />
var saved = localStorage.getItem(STORAGE_KEY);<br />
return TIMBRES.indexOf(saved) >= 0 ? saved : 'triangle';<br />
} catch (e) { return 'triangle'; }<br />
})();<br />
<br />
function setTimbre(t) {<br />
if (TIMBRES.indexOf(t) < 0) return;<br />
timbre = t;<br />
try { localStorage.setItem(STORAGE_KEY, t); } catch (e) {}<br />
document.querySelectorAll('.edo-chord-timbre').forEach(function (sel) {<br />
sel.value = t;<br />
});<br />
}<br />
<br />
function getCtx() {<br />
if (!ctx) ctx = new (window.AudioContext || window.webkitAudioContext)();<br />
return ctx;<br />
}<br />
<br />
function disposeNode(node) {<br />
try { node.osc.disconnect(); } catch (e) {}<br />
try { node.gain.disconnect(); } catch (e) {}<br />
var idx = activeNodes.indexOf(node);<br />
if (idx >= 0) activeNodes.splice(idx, 1);<br />
}<br />
<br />
function stopAll() {<br />
if (!ctx) return;<br />
var now = ctx.currentTime + LOOK_AHEAD;<br />
// Snapshot and clear before stopping, so onended handlers find no matches and just dispose<br />
var toStop = activeNodes;<br />
activeNodes = [];<br />
toStop.forEach(function (n) {<br />
try {<br />
n.gain.gain.cancelScheduledValues(now);<br />
n.gain.gain.setValueAtTime(n.gain.gain.value, now);<br />
n.gain.gain.exponentialRampToValueAtTime(0.0001, now + 0.05);<br />
n.osc.stop(now + 0.06);<br />
} catch (e) {}<br />
});<br />
if (activeBtn) { activeBtn.classList.remove('playing'); activeBtn = null; }<br />
}<br />
<br />
function playChord(centsArr, btn) {<br />
stopAll();<br />
var c = getCtx();<br />
if (c.state === 'suspended') c.resume();<br />
var now = c.currentTime + LOOK_AHEAD;<br />
var attack = 0.02, sustain = 0.2, release = 5;<br />
var totalDur = attack + sustain + release;<br />
var peak = 0.18 / Math.sqrt(centsArr.length);<br />
<br />
centsArr.forEach(function (cents) {<br />
var osc = c.createOscillator();<br />
var gain = c.createGain();<br />
osc.type = timbre;<br />
osc.frequency.value = BASE_FREQ;<br />
osc.detune.value = cents;<br />
gain.gain.setValueAtTime(0, now);<br />
gain.gain.linearRampToValueAtTime(peak, now + attack);<br />
gain.gain.setValueAtTime(peak, now + attack + sustain);<br />
gain.gain.exponentialRampToValueAtTime(0.0001, now + totalDur);<br />
osc.connect(gain).connect(c.destination);<br />
osc.start(now);<br />
osc.stop(now + totalDur + 0.1);<br />
<br />
var node = { osc: osc, gain: gain };<br />
activeNodes.push(node);<br />
osc.onended = function () { disposeNode(node); };<br />
});<br />
<br />
if (btn) {<br />
btn.classList.add('playing');<br />
activeBtn = btn;<br />
setTimeout(function () {<br />
if (activeBtn === btn) { btn.classList.remove('playing'); activeBtn = null; }<br />
}, totalDur * 1000);<br />
}<br />
}<br />
<br />
function injectSelectors() {<br />
var tables = new Set();<br />
document.querySelectorAll('.edo-chord-play').forEach(function (btn) {<br />
var table = btn.closest('table');<br />
if (table) tables.add(table);<br />
});<br />
tables.forEach(function (table) {<br />
var firstTh = table.querySelector('th');<br />
if (!firstTh || firstTh.querySelector('.edo-chord-timbre')) return;<br />
var sel = document.createElement('select');<br />
sel.className = 'edo-chord-timbre';<br />
sel.title = 'Synth timbre';<br />
TIMBRES.forEach(function (t) {<br />
var opt = document.createElement('option');<br />
opt.value = t;<br />
opt.textContent = TIMBRE_LABELS[t];<br />
if (t === timbre) opt.selected = true;<br />
sel.appendChild(opt);<br />
});<br />
sel.addEventListener('change', function () { setTimbre(sel.value); });<br />
sel.addEventListener('click', function (e) { e.stopPropagation(); });<br />
firstTh.innerHTML = '';<br />
firstTh.appendChild(sel);<br />
});<br />
}<br />
<br />
function handle(e) {<br />
var btn = e.target.closest && e.target.closest('.edo-chord-play');<br />
if (!btn) return;<br />
e.preventDefault();<br />
if (btn === activeBtn) { stopAll(); return; }<br />
<br />
var cents;<br />
if (btn.dataset.cents) {<br />
cents = btn.dataset.cents.split(',').map(Number);<br />
} else {<br />
var edo = parseInt(btn.dataset.edo, 10);<br />
var steps = (btn.dataset.steps || '').split(',').map(Number);<br />
if (!edo || !steps.length) return;<br />
var stepSize = 1200 / edo;<br />
cents = steps.map(function (s) { return s * stepSize; });<br />
}<br />
if (!cents.length || cents.some(isNaN)) return;<br />
playChord(cents, btn);<br />
}<br />
<br />
document.addEventListener('click', handle);<br />
document.addEventListener('keydown', function (e) {<br />
if ((e.key === 'Enter' || e.key === ' ') && e.target.classList && e.target.classList.contains('edo-chord-play')) {<br />
handle(e);<br />
}<br />
});<br />
<br />
if (document.readyState === 'loading') {<br />
document.addEventListener('DOMContentLoaded', injectSelectors);<br />
} else {<br />
injectSelectors();<br />
}<br />
}());</div>
Inthar