https://en.xen.wiki/index.php?action=history&feed=atom&title=User%3AXenwolf%2Fcommon.js
User:Xenwolf/common.js - Revision history
2026-07-21T04:36:59Z
Revision history for this page on the wiki
MediaWiki 1.43.6
https://en.xen.wiki/index.php?title=User:Xenwolf/common.js&diff=98877&oldid=prev
Xenwolf: copy from User:Plumtree/common.js
2022-11-07T08:20:10Z
<p>copy from <a href="/w/User:Plumtree/common.js" title="User:Plumtree/common.js">User:Plumtree/common.js</a></p>
<a href="https://en.xen.wiki/index.php?title=User:Xenwolf/common.js&diff=98877&oldid=98508">Show changes</a>
Xenwolf
https://en.xen.wiki/index.php?title=User:Xenwolf/common.js&diff=98508&oldid=prev
Xenwolf: test in-browser sound generation
2022-10-26T18:28:15Z
<p>test in-browser sound generation</p>
<p><b>New page</b></p><div>const AudioContext = window.AudioContext || window.webkitAudioContext;<br />
const audio = new AudioContext();<br />
<br />
// the first element should be 0<br />
const builtin_spectra = {<br />
sine: [0, 1],<br />
semisine: [0],<br />
flute: [0, 1, 0.55, 0.2, 0.2, 0.05],<br />
violin: [0, 1, 0.5, 0.45, 0.5, 0.7, 0.6, 0.75, 0.6, 0.45, 0.35, 0.25, 0.05, 0.2, 0.15],<br />
};<br />
for (var i = 1; i <= 100; i++)<br />
builtin_spectra.semisine.push(1 / (i * i));<br />
<br />
function construct_wave(harmonic_spectrum){<br />
var zeros = new Array(harmonic_spectrum.length).fill(0);<br />
return audio.createPeriodicWave(harmonic_spectrum, zeros);<br />
}<br />
<br />
// delay `node` by `duration` ms<br />
function delay(node, duration){<br />
var delay = audio.createDelay(120);<br />
delay.delayTime.value = duration / 1000;<br />
node.connect(delay);<br />
return delay;<br />
}<br />
<br />
// connect `nodes` to audio destination and schedule a disconnect after `duration` ms<br />
function connect_all(nodes, duration){<br />
for (var i = 0; i < nodes.length; i++)<br />
nodes[i].connect(audio.destination);<br />
<br />
setTimeout(function(){<br />
for (var i = 0; i < nodes.length; i++)<br />
nodes[i].disconnect();<br />
}, duration);<br />
}<br />
<br />
// limit `node` to ~`duration` ms, also filtering out frequencies >= 20000Hz<br />
function limit(node, duration){<br />
var gain = audio.createGain();<br />
gain.gain.value = 0;<br />
gain.gain.linearRampToValueAtTime(1, audio.currentTime + 0.05);<br />
gain.gain.linearRampToValueAtTime(1, audio.currentTime + duration / 1000);<br />
gain.gain.exponentialRampToValueAtTime(0.00001, audio.currentTime + duration / 1000 + 0.05);<br />
node.connect(gain);<br />
node = gain;<br />
<br />
var filter = audio.createBiquadFilter();<br />
filter.type = 'lowpass';<br />
filter.frequency.value = 20000;<br />
node.connect(filter);<br />
return filter;<br />
}<br />
<br />
// set gain of the `node` to `value`<br />
function set_gain(node, value){<br />
var gain = audio.createGain();<br />
gain.gain.value = value;<br />
node.connect(gain);<br />
return gain;<br />
}<br />
<br />
// construct an oscillator sound active for `duration` ms after `shift` ms<br />
function play_frequency(frequency, duration, shift, gain, wave){<br />
var node = audio.createOscillator();<br />
node.frequency.value = frequency;<br />
node.setPeriodicWave(wave);<br />
node.start();<br />
node.stop(audio.currentTime + duration / 1000 + 0.1);<br />
<br />
node = limit(node, duration);<br />
node = set_gain(node, gain);<br />
node = delay(node, shift);<br />
<br />
return node;<br />
}<br />
<br />
// whitespace-separated tokens which are either:<br />
// * wait:DURATION - increase global time shift by DURATION ms.<br />
// * FREQUENCY:DURATION:GAIN[:SHIFT[:INSTRUMENT]] - see play_frequency().<br />
// SHIFT here is local time shift, global time shift will remain intact. Default: 0.<br />
// INSTRUMENT is the name of the corresponding instrument. Default: sine.<br />
function parse_sequence(s){<br />
var output = [];<br />
var notes = s.split(/\s+/);<br />
for (var i = 0; i < notes.length; i++){<br />
var values = notes[i].split(':');<br />
var note_data = {};<br />
if (values[0] == 'wait'){<br />
note_data.wait = true;<br />
note_data.dur = parseInt(values[1]); // duration in ms<br />
} else {<br />
note_data.freq = parseFloat(values[0]); // frequency<br />
note_data.dur = parseInt(values[1]); // duration in ms<br />
note_data.gain = parseFloat(values[2]); // gain<br />
note_data.shift = parseInt(values[3] || '0'); // shift in ms<br />
note_data.instrument = values[4] || 'sine';<br />
}<br />
output.push(note_data);<br />
}<br />
return output;<br />
}<br />
<br />
// parse and play a sequence<br />
function demonstrate_sequence(s, custom_spectra){<br />
var seq = parse_sequence(s);<br />
<br />
var waves = {};<br />
for (var i = 0; i < seq.length; i++){<br />
if (seq[i].instrument && waves[seq[i].instrument] === undefined){<br />
waves[seq[i].instrument] = construct_wave(<br />
builtin_spectra[seq[i].instrument] || custom_spectra[seq[i].instrument]<br />
);<br />
}<br />
}<br />
<br />
var notes = [];<br />
var total_duration = 0;<br />
var total_shift = 0;<br />
for (var i = 0; i < seq.length; i++){<br />
if (seq[i].wait){<br />
total_shift += seq[i].dur;<br />
} else {<br />
notes.push(play_frequency(<br />
seq[i].freq,<br />
seq[i].dur,<br />
total_shift + seq[i].shift,<br />
seq[i].gain,<br />
waves[seq[i].instrument]<br />
));<br />
if (total_shift + seq[i].shift + seq[i].dur > total_duration)<br />
total_duration = total_shift + seq[i].shift + seq[i].dur;<br />
}<br />
}<br />
total_duration += 100;<br />
<br />
connect_all(notes, total_duration);<br />
<br />
return total_duration;<br />
}<br />
<br />
document.querySelectorAll('.sequence-audio').forEach(function(button){<br />
// error handling<br />
if (!button.hasAttribute('data-sequence')){<br />
console.error('Audio element requires "data-sequence" attribute to be set!');<br />
console.log(button);<br />
button.classList.add('sequence-audio-invalid');<br />
return;<br />
}<br />
if (button.hasAttribute('data-playing')){<br />
console.error('Audio element should not have "data-playing" attribute set!');<br />
console.log(button);<br />
button.classList.add('sequence-audio-invalid');<br />
return;<br />
}<br />
var seq = parse_sequence(button.getAttribute('data-sequence'));<br />
for (var i = 0; i < seq.length; i++){<br />
if (seq[i].instrument && builtin_spectra[seq[i].instrument] === undefined){<br />
if (!button.hasAttribute('data-timbre-' + seq[i].instrument)){<br />
console.error('Audio element requires "data-timbre-' + seq[i].instrument + '" attribute to be set!');<br />
console.log(button);<br />
button.classList.add('sequence-audio-invalid');<br />
return;<br />
}<br />
}<br />
}<br />
// indicate that audio JS has been loaded<br />
button.classList.add('sequence-audio-valid')<br />
<br />
button.addEventListener('click', function(){<br />
// should the button lock while the sequence is playing?<br />
var lock = button.hasAttribute('data-lock');<br />
if (lock && button.hasAttribute('data-playing')){<br />
// do nothing<br />
} else {<br />
if (lock){<br />
button.setAttribute('data-playing', 'true');<br />
button.classList.add('sequence-audio-playing');<br />
}<br />
var s = button.getAttribute('data-sequence');<br />
<br />
var custom_spectra = {};<br />
for (var i = 0; i < button.attributes.length; i++){<br />
if (button.attributes[i].name.startsWith('data-timbre-')){<br />
var key = button.attributes[i].name.substring(12);<br />
var val = button.attributes[i].value.split(/\s+/);<br />
for (var j = 0; j < val.length; j++)<br />
val[j] = parseFloat(val[j]);<br />
custom_spectra[key] = val;<br />
}<br />
}<br />
console.log('Custom spectra:', custom_spectra);<br />
console.log('Playing sequence: ' + s);<br />
var duration = demonstrate_sequence(s, custom_spectra);<br />
<br />
if (lock){<br />
setTimeout(function(){<br />
button.classList.remove('sequence-audio-playing');<br />
button.removeAttribute('data-playing');<br />
}, duration);<br />
}<br />
}<br />
});<br />
});</div>
Xenwolf