Xenharmonic Wiki

User:Pailiaq/common.js: Difference between revisions

← Older editNewer edit →
Pailiaq (talk | contribs)
421 edits
No edit summary
Pailiaq (talk | contribs)
421 edits
Undo revision 230983 by Pailiaq (talk)
Tag: Undo
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' };


    // 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) {}
 
        // Keep every selector on the page in sync
    function setTimbre(id) {
         document.querySelectorAll('.edo-chord-timbre').forEach(function (sel) {
        timbreId = id;
            sel.value = t;
         try { localStorage.setItem(STORAGE_KEY, id); } catch (e) {}
        });
         document.querySelectorAll('.edo-chord-timbre').forEach(function (s) { s.value = id; });
     }
     }


Line 50: Line 31:
     }
     }


    // ── Soundfont loading ───────────────────────────────────────────────
    var soundfontLibPromise = null;
    function loadSoundfontLib() {
        if (window.Soundfont) return Promise.resolve();
        if (soundfontLibPromise) return soundfontLibPromise;
        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;
         activeOscNodes.forEach(function (n) {
         activeNodes.forEach(function (n) {
             try {
             try {
                 n.gain.gain.cancelScheduledValues(now);
                 n.gain.gain.cancelScheduledValues(now);
Line 86: Line 42:
             } catch (e) {}
             } catch (e) {}
         });
         });
         activeOscNodes = [];
         activeNodes = [];
        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();
        if (c.state === 'suspended') c.resume();
         var now = c.currentTime;
         var now = c.currentTime;
         var base = 261.63;
         var base = 261.63;
         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 59:
             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 * Math.pow(2, cents / 1200);
             gain.gain.setValueAtTime(0, now);
             gain.gain.setValueAtTime(0, now);
Line 113: Line 68:
             osc.start(now);
             osc.start(now);
             osc.stop(now + totalDur + 0.1);
             osc.stop(now + totalDur + 0.1);
             activeOscNodes.push({ osc: osc, gain: gain });
             activeNodes.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) {
            if (loading && btn) btn.classList.remove('loading');
            if (btn && btn !== activeBtn) return;        // user clicked something else
            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 76:
             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 91:
             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); });
Retrieved from "https://en.xen.wiki/w/User:Pailiaq/common.js"