Xenharmonic Wiki

User:Pailiaq/common.js: Difference between revisions

← Older edit
Pailiaq (talk | contribs)
421 edits
No edit summary
Pailiaq (talk | contribs)
421 edits
No edit summary
 
(3 intermediate revisions by the same user not shown)
Line 3: Line 3:


     var ctx = null;
     var ctx = null;
     var activeOscNodes = [];
     var activeNodes = [];
    var activeSfHandles = [];
     var activeBtn = null;
     var activeBtn = null;
     var STORAGE_KEY = 'edoChordPlayTimbre';
     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


    // Two categories: oscillators (built-in Web Audio) and soundfonts (lazy-loaded from CDN)
     var timbre = (function () {
     var TIMBRES = [
        { id: 'triangle', label: 'Triangle',        group: 'Synth',    type: 'osc', value: 'triangle' },
        { id: 'sawtooth', label: 'Sawtooth',        group: 'Synth',    type: 'osc', value: 'sawtooth' },
        { id: 'square',  label: 'Square',          group: 'Synth',    type: 'osc', value: 'square' },
        { id: 'sine',    label: 'Sine',            group: 'Synth',    type: 'osc', value: 'sine' },
        { id: 'piano',    label: 'Grand piano',    group: 'Acoustic',  type: 'sf',  value: 'acoustic_grand_piano' },
        { id: 'epiano',  label: 'Electric piano',  group: 'Acoustic',  type: 'sf',  value: 'electric_piano_1' },
        { id: 'organ',    label: 'Organ',          group: 'Acoustic',  type: 'sf',  value: 'church_organ' },
        { id: 'flute',    label: 'Flute',          group: 'Winds',    type: 'sf',  value: 'flute' },
        { id: 'clarinet', label: 'Clarinet',        group: 'Winds',    type: 'sf',  value: 'clarinet' },
        { id: 'oboe',    label: 'Oboe',            group: 'Winds',    type: 'sf',  value: 'oboe' },
        { id: 'violin',  label: 'Violin',          group: 'Strings',  type: 'sf',  value: 'violin' },
        { id: 'cello',    label: 'Cello',          group: 'Strings',  type: 'sf',  value: 'cello' },
        { id: 'strings',  label: 'String ensemble', group: 'Strings',  type: 'sf',  value: 'string_ensemble_1' },
        { id: 'choir',    label: 'Choir',          group: 'Voice',    type: 'sf',  value: 'choir_aahs' }
    ];
 
    var timbreId = (function () {
         try {
         try {
             var saved = localStorage.getItem(STORAGE_KEY);
             var saved = localStorage.getItem(STORAGE_KEY);
             for (var i = 0; i < TIMBRES.length; i++) if (TIMBRES[i].id === saved) return saved;
             return TIMBRES.indexOf(saved) >= 0 ? saved : 'triangle';
         } catch (e) {}
         } catch (e) { return 'triangle'; }
        return 'triangle';
     })();
     })();


     function getTimbre() {
     function setTimbre(t) {
         for (var i = 0; i < TIMBRES.length; i++) if (TIMBRES[i].id === timbreId) return TIMBRES[i];
         if (TIMBRES.indexOf(t) < 0) return;
         return TIMBRES[0];
         timbre = t;
    }
         try { localStorage.setItem(STORAGE_KEY, t); } catch (e) {}
 
         document.querySelectorAll('.edo-chord-timbre').forEach(function (sel) {
    function setTimbre(id) {
            sel.value = t;
        timbreId = id;
        });
         try { localStorage.setItem(STORAGE_KEY, id); } catch (e) {}
         document.querySelectorAll('.edo-chord-timbre').forEach(function (s) { s.value = id; });
     }
     }


Line 50: Line 32:
     }
     }


    // ── Soundfont loading ───────────────────────────────────────────────
     function disposeNode(node) {
    var soundfontLibPromise = null;
         try { node.osc.disconnect(); } catch (e) {}
     function loadSoundfontLib() {
         try { node.gain.disconnect(); } catch (e) {}
         if (window.Soundfont) return Promise.resolve();
        var idx = activeNodes.indexOf(node);
        if (soundfontLibPromise) return soundfontLibPromise;
         if (idx >= 0) activeNodes.splice(idx, 1);
         soundfontLibPromise = new Promise(function (resolve, reject) {
            var s = document.createElement('script');
            s.src = 'https://cdn.jsdelivr.net/npm/[email protected]/dist/soundfont-player.min.js';
            s.onload = function () { resolve(); };
            s.onerror = function () { reject(new Error('Failed to load soundfont-player')); };
            document.head.appendChild(s);
         });
        return soundfontLibPromise;
     }
     }


    var instrumentCache = {};
    function loadInstrument(name) {
        if (instrumentCache[name]) return instrumentCache[name];
        instrumentCache[name] = loadSoundfontLib().then(function () {
            return window.Soundfont.instrument(getCtx(), name);
        });
        return instrumentCache[name];
    }
    // ── Stopping ────────────────────────────────────────────────────────
     function stopAll() {
     function stopAll() {
         if (!ctx) return;
         if (!ctx) return;
         var now = ctx.currentTime;
         var now = ctx.currentTime + LOOK_AHEAD;
         activeOscNodes.forEach(function (n) {
         // Snapshot and clear before stopping, so onended handlers find no matches and just dispose
        var toStop = activeNodes;
        activeNodes = [];
        toStop.forEach(function (n) {
             try {
             try {
                 n.gain.gain.cancelScheduledValues(now);
                 n.gain.gain.cancelScheduledValues(now);
Line 86: Line 53:
             } catch (e) {}
             } catch (e) {}
         });
         });
        activeOscNodes = [];
        activeSfHandles.forEach(function (h) { try { h.stop(now); } catch (e) {} });
        activeSfHandles = [];
         if (activeBtn) { activeBtn.classList.remove('playing'); activeBtn = null; }
         if (activeBtn) { activeBtn.classList.remove('playing'); activeBtn = null; }
     }
     }


    // ── Oscillator playback ─────────────────────────────────────────────
     function playChord(centsArr, btn) {
     function playOscillator(centsArr, waveform) {
        stopAll();
         var c = getCtx();
         var c = getCtx();
         var now = c.currentTime;
         if (c.state === 'suspended') c.resume();
         var base = 261.63;
         var now = c.currentTime + LOOK_AHEAD;
         var attack = 0.02, sustain = 0.2, release = 4;
         var attack = 0.02, sustain = 0.2, release = 5;
         var totalDur = attack + sustain + release;
         var totalDur = attack + sustain + release;
         var peak = 0.18 / Math.sqrt(centsArr.length);
         var peak = 0.18 / Math.sqrt(centsArr.length);
Line 104: Line 68:
             var osc = c.createOscillator();
             var osc = c.createOscillator();
             var gain = c.createGain();
             var gain = c.createGain();
             osc.type = waveform;
             osc.type = timbre;
             osc.frequency.value = base * Math.pow(2, cents / 1200);
             osc.frequency.value = BASE_FREQ;
            osc.detune.value = cents;
             gain.gain.setValueAtTime(0, now);
             gain.gain.setValueAtTime(0, now);
             gain.gain.linearRampToValueAtTime(peak, now + attack);
             gain.gain.linearRampToValueAtTime(peak, now + attack);
Line 113: Line 78:
             osc.start(now);
             osc.start(now);
             osc.stop(now + totalDur + 0.1);
             osc.stop(now + totalDur + 0.1);
            activeOscNodes.push({ osc: osc, gain: gain });
        });
        return totalDur;
    }
    // ── Soundfont playback ──────────────────────────────────────────────
    function playSoundfont(centsArr, instrumentName, btn) {
        var dur = 3.5;
        var loading = !instrumentCache[instrumentName];
        if (loading && btn) btn.classList.add('loading');


        loadInstrument(instrumentName).then(function (inst) {
             var node = { osc: osc, gain: gain };
            if (loading && btn) btn.classList.remove('loading');
            activeNodes.push(node);
            if (btn && btn !== activeBtn) return;        // user clicked something else
             osc.onended = function () { disposeNode(node); };
            var c = getCtx();
            var now = c.currentTime;
            var gain = 0.7 / Math.sqrt(centsArr.length);
            // fractional MIDI: middle C (60) + cents/100
             centsArr.forEach(function (cents) {
                var midi = 60 + cents / 100;
                var handle = inst.play(midi, now, { duration: dur, gain: gain });
                activeSfHandles.push(handle);
             });
        }).catch(function (err) {
            if (loading && btn) btn.classList.remove('loading');
            console.error('Soundfont failed, falling back to triangle:', err);
            playOscillator(centsArr, 'triangle');
         });
         });
        return dur;
    }


    // ── Top-level dispatch ──────────────────────────────────────────────
    function playChord(centsArr, btn) {
        stopAll();
        var c = getCtx();
        if (c.state === 'suspended') c.resume();
        var t = getTimbre();
        var dur = (t.type === 'osc')
            ? playOscillator(centsArr, t.value)
            : playSoundfont(centsArr, t.value, btn);
         if (btn) {
         if (btn) {
             btn.classList.add('playing');
             btn.classList.add('playing');
Line 158: Line 89:
             setTimeout(function () {
             setTimeout(function () {
                 if (activeBtn === btn) { btn.classList.remove('playing'); activeBtn = null; }
                 if (activeBtn === btn) { btn.classList.remove('playing'); activeBtn = null; }
             }, dur * 1000);
             }, totalDur * 1000);
         }
         }
     }
     }


    // ── Selector injection ──────────────────────────────────────────────
     function injectSelectors() {
     function injectSelectors() {
         var tables = new Set();
         var tables = new Set();
Line 174: Line 104:
             var sel = document.createElement('select');
             var sel = document.createElement('select');
             sel.className = 'edo-chord-timbre';
             sel.className = 'edo-chord-timbre';
             sel.title = 'Synth / instrument';
             sel.title = 'Synth timbre';
            var groups = {};
             TIMBRES.forEach(function (t) {
             TIMBRES.forEach(function (t) {
                if (!groups[t.group]) {
                    var og = document.createElement('optgroup');
                    og.label = t.group;
                    groups[t.group] = og;
                    sel.appendChild(og);
                }
                 var opt = document.createElement('option');
                 var opt = document.createElement('option');
                 opt.value = t.id;
                 opt.value = t;
                 opt.textContent = t.label;
                 opt.textContent = TIMBRE_LABELS[t];
                 if (t.id === timbreId) opt.selected = true;
                 if (t === timbre) opt.selected = true;
                 groups[t.group].appendChild(opt);
                 sel.appendChild(opt);
             });
             });
             sel.addEventListener('change', function () { setTimbre(sel.value); });
             sel.addEventListener('change', function () { setTimbre(sel.value); });
Line 201: Line 124:
         e.preventDefault();
         e.preventDefault();
         if (btn === activeBtn) { stopAll(); return; }
         if (btn === activeBtn) { stopAll(); return; }
         var edo = parseInt(btn.dataset.edo, 10);
 
        var steps = (btn.dataset.steps || '').split(',').map(Number);
         var cents;
        if (!edo || !steps.length) return;
        if (btn.dataset.cents) {
        var stepSize = 1200 / edo;
            cents = btn.dataset.cents.split(',').map(Number);
        playChord(steps.map(function (s) { return s * stepSize; }), btn);
        } else {
            var edo = parseInt(btn.dataset.edo, 10);
            var steps = (btn.dataset.steps || '').split(',').map(Number);
            if (!edo || !steps.length) return;
            var stepSize = 1200 / edo;
            cents = steps.map(function (s) { return s * stepSize; });
        }
        if (!cents.length || cents.some(isNaN)) return;
        playChord(cents, btn);
     }
     }


Retrieved from "https://en.xen.wiki/w/User:Pailiaq/common.js"