1107 lines
48 KiB
JavaScript
1107 lines
48 KiB
JavaScript
import {
|
|
mapValue,
|
|
mix,
|
|
toCssClass,
|
|
flattenObject,
|
|
deFlattenObject,
|
|
clone,
|
|
} from './utils.js';
|
|
|
|
window.mapValue = mapValue;
|
|
|
|
|
|
const AudioMappingOptions = function() {
|
|
this.min_freq = 0.0;
|
|
this.max_freq = config.audio.fftBandsUsed;
|
|
this.min_in = 0.0;
|
|
this.max_in = 255.0 / 2;
|
|
this.min_out = 0.0;
|
|
this.max_out = 1.0;
|
|
this.smoothing = config.audio.defaultSmoothing;
|
|
this.sync = 'volume';
|
|
this.value = 0.0;
|
|
};
|
|
|
|
const Audio = function(tp, record) {
|
|
|
|
const audioDom = document.querySelector('.audioWrapper');
|
|
let audioCtx = false;
|
|
const heading = audioDom.querySelector("h1");
|
|
heading.textContent = "CLICK HERE TO START";
|
|
|
|
// an array of possible sync options.
|
|
const audio_sync_options = ['volume', 'pitch', 'frequency'];
|
|
// could also be an enum
|
|
// like that
|
|
//const AudioSyncOptions = Object.freeze({
|
|
//RED: Symbol("volume"),
|
|
//BLUE: Symbol("pitch"),
|
|
//GREEN: Symbol("frequency"),
|
|
//toString: (e) => {
|
|
//return e.toString.match(/\(([\S\s]*)\)/)[1]
|
|
//},
|
|
//});
|
|
//document.body.addEventListener("click", init);
|
|
let started = false;
|
|
|
|
const mapping = {};
|
|
//const canvass = [];
|
|
let canvasCombos = {};
|
|
const mutationObserver = new MutationObserver(function(e) {
|
|
if (e[0].removedNodes) {
|
|
e[0].removedNodes.forEach((n) => {
|
|
if (typeof n === 'object' &&
|
|
n.hasOwnProperty('hasAttribute') &&
|
|
n.hasOwnProperty('querySelectorAll')) {
|
|
if (n.hasAttribute('data-propTitle')) {
|
|
const propTitle = n.getAttribute('data-propTitle');
|
|
delete canvasCombos[propTitle];
|
|
} else {
|
|
const subProps = n.querySelectorAll('[data-propTitle]');
|
|
if (subProps.length > 0) {
|
|
subProps.forEach((sp) => {
|
|
const propTitle = sp.getAttribute('data-propTitle');
|
|
delete canvasCombos[propTitle];
|
|
});
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
});
|
|
let areMutationsObserved = false;
|
|
|
|
const isMapped = (layer, propTitle) => {
|
|
if (!mapping.hasOwnProperty(layer.id())) {
|
|
return false;
|
|
}
|
|
if (!mapping[layer.id()].hasOwnProperty(propTitle)) {
|
|
if (propTitle === 'color' &&
|
|
config.audio.colorSeparateRGBA &&
|
|
mapping[layer.id()].hasOwnProperty('color.r') &&
|
|
mapping[layer.id()].hasOwnProperty('color.g') &&
|
|
mapping[layer.id()].hasOwnProperty('color.b') &&
|
|
mapping[layer.id()].hasOwnProperty('color.a')) {
|
|
return true;
|
|
}
|
|
return false;
|
|
}
|
|
return true;
|
|
};
|
|
|
|
const getDefaultRange = (layer, propTitle) => {
|
|
if (config.audio.defaultRange.hasOwnProperty(propTitle)) {
|
|
return config.audio.defaultRange[propTitle];
|
|
} else if (propTitle.indexOf('width') === 0) {
|
|
return [
|
|
getArtboard().theatreObject.value.width / 2,
|
|
getArtboard().theatreObject.value.width
|
|
];
|
|
} else if (propTitle.indexOf('y') === 0) {
|
|
return [
|
|
0,
|
|
getArtboard().theatreObject.value.height / 2
|
|
];
|
|
} else if (propTitle.indexOf('x') === 0) {
|
|
return [
|
|
0,
|
|
getArtboard().theatreObject.value.width / 2
|
|
];
|
|
} else if (propTitle.indexOf('y') === 0) {
|
|
return [
|
|
0,
|
|
getArtboard().theatreObject.value.height / 2
|
|
];
|
|
} else if (propTitle.indexOf('letterDelay') === 0) {
|
|
return [
|
|
config.audio.defaultRange.letterDelay[0],
|
|
config.audio.defaultRange.letterDelay[1]
|
|
];
|
|
} else if (propTitle.split('.')[0] === 'fontVariationAxes') {
|
|
return layer.props.fontVariationAxes
|
|
.props[propTitle.split('.')[1]].range;
|
|
}
|
|
};
|
|
|
|
const getAudioMappingOptions = (layer, propTitle) => {
|
|
if (propTitle === 'color') {
|
|
const mm = getDefaultRange(layer, 'color');
|
|
if (config.audio.colorSeparateRGBA) {
|
|
const r = new AudioMappingOptions();
|
|
r.min_out = mm[0];
|
|
r.max_out = mm[1];
|
|
const g = new AudioMappingOptions();
|
|
g.min_out = mm[0];
|
|
g.max_out = mm[1];
|
|
const b = new AudioMappingOptions();
|
|
b.min_out = mm[0];
|
|
b.max_out = mm[1];
|
|
const a = new AudioMappingOptions();
|
|
a.min_out = mm[0];
|
|
a.max_out = mm[1];
|
|
return [{r}, {g}, {b}, {a}];
|
|
} else {
|
|
const o = new AudioMappingOptions();
|
|
o.min_out = {r: mm[0], b: mm[0], g: mm[0], a: mm[0]};
|
|
o.max_out = {r: mm[1], b: mm[1], g: mm[1], a: mm[1]};
|
|
return o;
|
|
}
|
|
} else {
|
|
const o = new AudioMappingOptions();
|
|
const mm = getDefaultRange(layer, propTitle);
|
|
o.min_out = mm[0];
|
|
o.max_out = mm[1];
|
|
return o;
|
|
}
|
|
};
|
|
|
|
// potentially recursive
|
|
const addAudioMapping = (layer, propTitle, options = false) => {
|
|
if (!options) {
|
|
options = getAudioMappingOptions(layer, propTitle);
|
|
if (Array.isArray(options)) {
|
|
let isGood = true;
|
|
options.forEach((o) => {
|
|
const subPropKey = Object.keys(o)[0];
|
|
const subPropTitle = `${propTitle}.${subPropKey}`;
|
|
isGood = addAudioMapping(layer, subPropTitle, o[subPropKey]) ? isGood : false;
|
|
});
|
|
return isGood;
|
|
}
|
|
}
|
|
if (!mapping.hasOwnProperty(layer.id())) {
|
|
mapping[layer.id()] = {};
|
|
}
|
|
if (!mapping[layer.id()].hasOwnProperty(propTitle)) {
|
|
mapping[layer.id()][propTitle] = options;
|
|
return true;
|
|
} else {
|
|
// already there
|
|
return false;
|
|
}
|
|
};
|
|
|
|
const removeAudioMapping = (layer = false, propTitle = false) => {
|
|
if (!layer && !propTitle) {
|
|
Object.keys(mapping).forEach((layerID) => {
|
|
Object.keys(mapping[layerID]).forEach((propTitle) => {
|
|
delete mapping[layerID][propTitle];
|
|
});
|
|
delete mapping[layerID];
|
|
});
|
|
return true;
|
|
}
|
|
if (!mapping.hasOwnProperty(layer.id())) {
|
|
// no layer
|
|
return false;
|
|
}
|
|
if (!mapping[layer.id()].hasOwnProperty(propTitle)) {
|
|
// no propTitle
|
|
// perhaps color?
|
|
if (config.audio.colorSeparateRGBA && propTitle === 'color') {
|
|
let isGood = true;
|
|
isGood = removeAudioMapping(layer, 'color.r');
|
|
isGood = removeAudioMapping(layer, 'color.g');
|
|
isGood = removeAudioMapping(layer, 'color.b');
|
|
isGood = removeAudioMapping(layer, 'color.a');
|
|
return isGood;
|
|
}
|
|
return false;
|
|
}
|
|
delete mapping[layer.id()][propTitle];
|
|
if (Object.keys(mapping[layer.id()]).length === 0) {
|
|
delete mapping[layer.id()];
|
|
}
|
|
return true;
|
|
}
|
|
|
|
const createAudioOptions = (layer, propTitle, container) => {
|
|
const mappingOptions = mapping[layer.id()][propTitle];
|
|
const panel = tp.getPanel();
|
|
if (!areMutationsObserved) {
|
|
mutationObserver.observe(panel, { childList: true, subtree: true });
|
|
areMutationsObserved = true;
|
|
}
|
|
const audioOptions = document.createElement('div');
|
|
audioOptions.setAttribute('data-propTitle',propTitle);
|
|
audioOptions.classList.add('audioOptions');
|
|
audioOptions.classList.add('audioOptionsTypeDefault');
|
|
audioOptions.classList.add(toCssClass(`audioOptions${propTitle}`));
|
|
audioOptions.style.position = 'relative';
|
|
audioOptions.style.width = '100%';
|
|
if (propTitle.split('.')[0] === 'color' && propTitle.split('.').length > 1) {
|
|
audioOptions.classList.add(toCssClass('audioOptionscolor'));
|
|
switch(propTitle.split('.')[1]) {
|
|
case 'r': {
|
|
audioOptions.style.background = 'rgba(255,0,0,0.2)'; // AUDIO COLOR
|
|
break;
|
|
}
|
|
case 'g': {
|
|
audioOptions.style.background = 'rgba(0,255,0,0.2)'; // AUDIO COLOR
|
|
break;
|
|
}
|
|
case 'b': {
|
|
audioOptions.style.background = 'rgba(0,0,255,0.2)'; // AUDIO COLOR
|
|
break;
|
|
}
|
|
case 'a': {
|
|
audioOptions.style.background = 'rgba(255,255,255,0.2)'; // AUDIO COLOR
|
|
break;
|
|
}
|
|
}
|
|
} else {
|
|
audioOptions.style.background = 'rgba(163, 163, 163, 0.2)'; // AUDIO COLOR
|
|
|
|
}
|
|
audioOptions.style.order = parseInt(container.style.order) + 1;
|
|
|
|
const updateMappingOptions = () => {
|
|
mappingOptions.min_out = parseFloat(panel.querySelector(toCssClass(`audio_min${propTitle}`,'#')).value);
|
|
mappingOptions.max_out = parseFloat(panel.querySelector(toCssClass(`audio_max${propTitle}`,'#')).value);
|
|
mappingOptions.sync =
|
|
panel.querySelector(`input[name="${toCssClass('audio_sync' + propTitle)}"]:checked`).value;
|
|
const s = panel.querySelector(toCssClass(`audio_smoothing${propTitle}`,'#')).value;
|
|
mappingOptions.smoothing = parseFloat(s);
|
|
};
|
|
|
|
const min_max_Dom = document.createElement('div');
|
|
min_max_Dom.classList.add('audio_min_max');
|
|
const min_Cont = document.createElement('div');
|
|
min_Cont.classList.add('audio_min_Cont');
|
|
const min_inputDom_label = document.createElement('label');
|
|
min_inputDom_label.for = 'audio_min';
|
|
min_inputDom_label.innerHTML = 'min ';
|
|
const min_inputDom = document.createElement('input');
|
|
min_inputDom.type = 'number';
|
|
min_inputDom.name = toCssClass(`audio_min${propTitle}`);
|
|
min_inputDom.id = toCssClass(`audio_min${propTitle}`);
|
|
min_inputDom.value = `${mappingOptions.min_out}`;
|
|
const max_Cont = document.createElement('div');
|
|
max_Cont.classList.add('audio_max_Cont');
|
|
const max_inputDom_label = document.createElement('label');
|
|
max_inputDom_label.for = 'audio_max';
|
|
max_inputDom_label.innerHTML = 'max ';
|
|
const max_inputDom = document.createElement('input');
|
|
max_inputDom.type = 'number';
|
|
max_inputDom.name = toCssClass(`audio_max${propTitle}`);
|
|
max_inputDom.id = toCssClass(`audio_max${propTitle}`);
|
|
max_inputDom.value = `${mappingOptions.max_out}`;
|
|
const smoothing_inputDom_label = document.createElement('label');
|
|
smoothing_inputDom_label.for = 'audio_smoothing';
|
|
smoothing_inputDom_label.innerHTML = 'audio smoothing ';
|
|
const smoothing_inputDom = document.createElement('input');
|
|
smoothing_inputDom.type = 'number';
|
|
smoothing_inputDom.name = toCssClass(`audio_smoothing${propTitle}`);
|
|
smoothing_inputDom.id = toCssClass(`audio_smoothing${propTitle}`);
|
|
smoothing_inputDom.value = mappingOptions.smoothing;
|
|
smoothing_inputDom.min = 0;
|
|
smoothing_inputDom.max = 1;
|
|
smoothing_inputDom.step = 0.01;
|
|
min_max_Dom.append(smoothing_inputDom_label);
|
|
min_max_Dom.append(smoothing_inputDom);
|
|
min_max_Dom.append(min_Cont);
|
|
min_Cont.append(min_inputDom_label);
|
|
min_Cont.append(min_inputDom);
|
|
min_max_Dom.append(max_Cont);
|
|
max_Cont.append(max_inputDom_label);
|
|
max_Cont.append(max_inputDom);
|
|
audioOptions.append(min_max_Dom);
|
|
|
|
const sync_Dom = document.createElement('div');
|
|
sync_Dom.classList.add('sync_Dom');
|
|
const sync_titleDom = document.createElement('p');
|
|
const sync_titleDom_Cont = document.createElement('div');
|
|
sync_titleDom_Cont.classList.add('sync_titleDom_Cont');
|
|
sync_titleDom.innerHTML = 'sync with:';
|
|
sync_Dom.append(sync_titleDom);
|
|
|
|
|
|
audio_sync_options.forEach((o) => {
|
|
const sync_inputDom_Cont = document.createElement('div');
|
|
sync_inputDom_Cont.classList.add('sync_inputDom_Cont');
|
|
const sync_inputDom_label = document.createElement('label');
|
|
sync_inputDom_label.for = `audio_sync${o}`;
|
|
sync_inputDom_label.innerHTML = o;
|
|
const sync_inputDom = document.createElement('input');
|
|
sync_inputDom.type = 'radio';
|
|
sync_inputDom.name = toCssClass(`audio_sync${propTitle}`);
|
|
sync_inputDom.id = toCssClass(`audio_sync${propTitle}${o}`);
|
|
sync_inputDom.value = o;
|
|
// default select first option
|
|
if (o === mappingOptions.sync) {
|
|
sync_inputDom.checked = '1';
|
|
}
|
|
sync_inputDom_Cont.append(sync_inputDom_label);
|
|
sync_inputDom_Cont.append(sync_inputDom);
|
|
sync_titleDom_Cont.append(sync_inputDom_Cont);
|
|
sync_Dom.append(sync_titleDom_Cont);
|
|
// sync_Dom.append(sync_inputDom);
|
|
sync_inputDom.addEventListener('change', updateMappingOptions);
|
|
});
|
|
|
|
audioOptions.append(sync_Dom);
|
|
|
|
const fft_Dom = document.createElement('div');
|
|
const fft_imgDom = document.createElement('canvas');
|
|
const fft_selectDom = document.createElement('div');
|
|
fft_Dom.style.position = 'relative';
|
|
fft_Dom.style.top = '0px';
|
|
fft_Dom.style.left = '0px';
|
|
fft_imgDom.classList.add('audio_fft');
|
|
fft_imgDom.classList.add(toCssClass(`audio_fft${propTitle}`));
|
|
fft_imgDom.style.width = '100%';
|
|
fft_imgDom.style.userDrag = 'none';
|
|
fft_imgDom.style.userSelect = 'none';
|
|
fft_imgDom.style.pointerEvents = 'none';
|
|
fft_imgDom.setAttribute('width', config.audio.fftBandsUsed);
|
|
fft_imgDom.setAttribute('height', config.audio.fftHeight);
|
|
fft_selectDom.style.position = 'absolute';
|
|
fft_selectDom.style.top = '0px';
|
|
fft_selectDom.style.left = '0px';
|
|
fft_selectDom.style.width = '100%';
|
|
fft_selectDom.style.height = '100%';
|
|
fft_selectDom.style.pointerEvents = 'none';
|
|
fft_selectDom.style.backgroundColor = 'rgba(28, 186, 148,0.4)'; // AUDIO COLOR
|
|
fft_selectDom.style.border = 'none'; // AUDIO COLOR
|
|
|
|
fft_Dom.append(fft_imgDom);
|
|
fft_Dom.append(fft_selectDom);
|
|
audioOptions.append(fft_Dom);
|
|
min_inputDom.addEventListener('change', updateMappingOptions);
|
|
max_inputDom.addEventListener('change', updateMappingOptions);
|
|
smoothing_inputDom.addEventListener('change', updateMappingOptions);
|
|
let setFrequency = false;
|
|
let freq_down = 0;
|
|
let freq_up = 0;
|
|
let xy_start;
|
|
fft_Dom.addEventListener('mousedown', (e) => {
|
|
setFrequency = true;
|
|
const bb = fft_imgDom.getBoundingClientRect();
|
|
const x = e.clientX - bb.x;
|
|
const y = e.clientY - bb.y;
|
|
xy_start = {x, y};
|
|
});
|
|
fft_Dom.addEventListener('mousemove', (e) => {
|
|
if (setFrequency) {
|
|
const bb = fft_imgDom.getBoundingClientRect();
|
|
const x_factor = config.audio.fftBandsUsed / bb.width;
|
|
const y_factor = 256.0 / bb.height;
|
|
const x = e.clientX - bb.x;
|
|
const y = e.clientY - bb.y;
|
|
let min_x, max_x, min_y, max_y;
|
|
if (x > xy_start.x) {
|
|
min_x = xy_start.x;
|
|
max_x = x;
|
|
} else {
|
|
min_x = x;
|
|
max_x = xy_start.x;
|
|
}
|
|
if (y > xy_start.y) {
|
|
min_y = xy_start.y;
|
|
max_y = y;
|
|
} else {
|
|
min_y = y;
|
|
max_y = xy_start.y;
|
|
}
|
|
mappingOptions.min_freq = min_x * x_factor;
|
|
mappingOptions.max_freq = max_x * x_factor;
|
|
mappingOptions.min_in = (bb.height - max_y) * y_factor;
|
|
mappingOptions.max_in = (bb.height - min_y) * y_factor;
|
|
}
|
|
});
|
|
const unset = (e) => {
|
|
setFrequency = false;
|
|
};
|
|
const unsetFromOutside = (e) => {
|
|
document.removeEventListener('mouseup', unsetFromOutside);
|
|
unset(e);
|
|
};
|
|
fft_Dom.addEventListener('mouseup', unset);
|
|
fft_Dom.addEventListener('mouseleave', (e) => {
|
|
if (setFrequency) {
|
|
document.addEventListener('mouseup', unsetFromOutside);
|
|
}
|
|
});
|
|
fft_Dom.addEventListener('mouseenter', (e) => {
|
|
if (setFrequency) {
|
|
document.removeEventListener('mouseup', unsetFromOutside);
|
|
}
|
|
});
|
|
|
|
container.after(audioOptions);
|
|
|
|
//canvass.push(fft_imgDom);
|
|
canvasCombos[propTitle] = [fft_imgDom, fft_imgDom.getContext("2d"), layer.id()];
|
|
updateMappingOptions();
|
|
return audioOptions;
|
|
};
|
|
|
|
const addAudioOptions = (layer, propTitle) => {
|
|
if (!started) {
|
|
// audioOptions need a started init
|
|
init();
|
|
}
|
|
const panelPropTitle = tp.getPanelPropTitle(propTitle);
|
|
if (panelPropTitle === null) {
|
|
console.log('Audio::addAudioOptions::error',`cannot find panelPropTitle "${propTitle}"`);
|
|
return;
|
|
}
|
|
if (tp.getPanel().querySelector(toCssClass(`audioOptions${propTitle}`, '.')) !== null) {
|
|
//console.log('Audio::addAudioOptions::error',`audioOptions already exist for "${propTitle}"`);
|
|
return;
|
|
}
|
|
const container = panelPropTitle.parentNode.parentNode;
|
|
|
|
if (propTitle === 'color' && config.audio.colorSeparateRGBA) {
|
|
// NOTE: attach reversed, because container.after(audioOptions)
|
|
createAudioOptions(layer, `${propTitle}.a`, container).classList.add(toCssClass(`audioOptions${propTitle}`));
|
|
createAudioOptions(layer, `${propTitle}.b`, container).classList.add(toCssClass(`audioOptions${propTitle}`));
|
|
createAudioOptions(layer, `${propTitle}.g`, container).classList.add(toCssClass(`audioOptions${propTitle}`));
|
|
createAudioOptions(layer, `${propTitle}.r`, container).classList.add(toCssClass(`audioOptions${propTitle}`));
|
|
} else {
|
|
createAudioOptions(layer, propTitle, container);
|
|
}
|
|
|
|
const audioButton = container.querySelector('.audioButton');
|
|
audioButton.classList.add('active');
|
|
};
|
|
|
|
const removeAudioOptions = (layer = false, propTitle = false) => {
|
|
const panel = tp.getPanel();
|
|
if (!layer && !propTitle) {
|
|
const allAudioOptions = panel.querySelectorAll('.audioOptions');
|
|
if (allAudioOptions !== null) {
|
|
for (let i = 0; i < allAudioOptions.length; i++) {
|
|
allAudioOptions[i].remove();
|
|
}
|
|
}
|
|
canvasCombos = {};
|
|
panel.querySelectorAll('.audioButton').forEach((button) => {
|
|
button.classList.remove('active');
|
|
});
|
|
} else {
|
|
// only selected layers have options
|
|
// otherwise the ui is not there
|
|
if (layer.isSelected()) {
|
|
if (config.audio.colorSeparateRGBA && propTitle === 'color') {
|
|
delete canvasCombos['color.r'];
|
|
delete canvasCombos['color.g'];
|
|
delete canvasCombos['color.b'];
|
|
delete canvasCombos['color.a'];
|
|
} else {
|
|
delete canvasCombos[propTitle];
|
|
}
|
|
const audioOptions = panel.querySelectorAll(toCssClass(`audioOptions${propTitle}`,'.'));
|
|
if (audioOptions.length > 0) {
|
|
audioOptions.forEach((e) => { e.remove(); });
|
|
}
|
|
const audioButton = panel.querySelector(toCssClass(`audioButton${propTitle}`,'.'));
|
|
if (audioButton !== null) {
|
|
audioButton.classList.remove('active');
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
const addAudioButton = (layer, propTitle, isActive) => {
|
|
const panel = tp.getPanel();
|
|
const panelPropTitle = tp.getPanelPropTitle(propTitle);
|
|
if (panelPropTitle !== null) {
|
|
//const container = tp.getPanelPropContainer(panelPropTitle);
|
|
const container = panelPropTitle.parentNode.parentNode;
|
|
|
|
if (container === null) {
|
|
console.log("Audio::addAudioButton",
|
|
`impossible! cannot find panelPropContainer for ${propTitle}`);
|
|
} else if (container.querySelector('.audioButton') !== null) {
|
|
// this is super verbose, let's not log by default
|
|
//console.log("Audio::addAudioButton",
|
|
//`already added an audio button for ${propTitle}`);
|
|
} else {
|
|
const button = document.createElement('div');
|
|
button.classList.add('audioButton');
|
|
button.classList.add(toCssClass(`audioButton${propTitle}`));
|
|
button.innerHTML = `<img src="/web/assets/sound.svg" alt="audio" />`;
|
|
container.append(button);
|
|
button.addEventListener('click', () => {
|
|
if (!started) {
|
|
init();
|
|
}
|
|
if (!isMapped(layer, propTitle)) {
|
|
addAudioMapping(layer, propTitle);
|
|
addAudioOptions(layer, propTitle);
|
|
} else {
|
|
removeAudioMapping(layer, propTitle);
|
|
removeAudioOptions(layer, propTitle);
|
|
}
|
|
});
|
|
if (isActive) {
|
|
addAudioMapping(layer, propTitle);
|
|
addAudioOptions(layer, propTitle);
|
|
}
|
|
}
|
|
} else {
|
|
console.log("Audio::addAudioButton",
|
|
`cannot find panelPropTitle for ${propTitle}`);
|
|
}
|
|
};
|
|
|
|
const injectPanel = (layer) => {
|
|
const flatValues = clone(layer.theatreObject.value);
|
|
flattenObject(flatValues, ['color']);
|
|
const props = Object.keys(flatValues);
|
|
props.forEach((propTitle) => {
|
|
if (config.audio.ignoreProps.indexOf(propTitle) < 0) {
|
|
let isActive = false;
|
|
if (mapping.hasOwnProperty(layer.id())) {
|
|
if (mapping[layer.id()].hasOwnProperty(propTitle)) {
|
|
isActive = true;
|
|
}
|
|
}
|
|
addAudioButton(layer, propTitle, isActive);
|
|
}
|
|
});
|
|
};
|
|
|
|
const init = () => {
|
|
if (!started) {
|
|
started = true;
|
|
if (audioCtx !== false && audioCtx.state === 'suspended') {
|
|
audioCtx.resume();
|
|
return;
|
|
}
|
|
heading.textContent = "Voice-change-O-matic";
|
|
//document.body.removeEventListener("click", init);
|
|
|
|
// Older browsers might not implement mediaDevices at all, so we set an empty object first
|
|
if (navigator.mediaDevices === undefined) {
|
|
navigator.mediaDevices = {};
|
|
}
|
|
|
|
// Some browsers partially implement mediaDevices. We can't assign an object
|
|
// with getUserMedia as it would overwrite existing properties.
|
|
// Add the getUserMedia property if it's missing.
|
|
if (navigator.mediaDevices.getUserMedia === undefined) {
|
|
navigator.mediaDevices.getUserMedia = function(constraints) {
|
|
// First get ahold of the legacy getUserMedia, if present
|
|
const getUserMedia =
|
|
navigator.webkitGetUserMedia ||
|
|
navigator.mozGetUserMedia ||
|
|
navigator.msGetUserMedia;
|
|
|
|
// Some browsers just don't implement it - return a rejected promise with an error
|
|
// to keep a consistent interface
|
|
if (!getUserMedia) {
|
|
return Promise.reject(
|
|
new Error("getUserMedia is not implemented in this browser")
|
|
);
|
|
}
|
|
|
|
// Otherwise, wrap the call to the old navigator.getUserMedia with a Promise
|
|
return new Promise(function(resolve, reject) {
|
|
getUserMedia.call(navigator, constraints, resolve, reject);
|
|
});
|
|
};
|
|
}
|
|
|
|
// Set up forked web audio context, for multiple browsers
|
|
// window. is needed otherwise Safari explodes
|
|
audioCtx = new(window.AudioContext || window.webkitAudioContext)();
|
|
const voiceSelect = audioDom.querySelector("#voice");
|
|
let source;
|
|
let stream;
|
|
|
|
// Grab the mute button to use below
|
|
const mute = audioDom.querySelector(".mute");
|
|
|
|
// Set up the different audio nodes we will use for the app
|
|
const analyser = audioCtx.createAnalyser();
|
|
analyser.minDecibels = -90;
|
|
analyser.maxDecibels = -10;
|
|
analyser.smoothingTimeConstant = 0.85;
|
|
window.analyser = analyser;
|
|
|
|
//const distortion = audioCtx.createWaveShaper();
|
|
//const gainNode = audioCtx.createGain();
|
|
//const biquadFilter = audioCtx.createBiquadFilter();
|
|
//const convolver = audioCtx.createConvolver();
|
|
|
|
//const echoDelay = createEchoDelayEffect(audioCtx);
|
|
|
|
// Distortion curve for the waveshaper, thanks to Kevin Ennis
|
|
// http://stackoverflow.com/questions/22312841/waveshaper-node-in-webaudio-how-to-emulate-distortion
|
|
const makeDistortionCurve = (amount) => {
|
|
let k = typeof amount === "number" ? amount : 50,
|
|
n_samples = 44100,
|
|
curve = new Float32Array(n_samples),
|
|
deg = Math.PI / 180,
|
|
i = 0,
|
|
x;
|
|
for (; i < n_samples; ++i) {
|
|
x = (i * 2) / n_samples - 1;
|
|
curve[i] = ((3 + k) * x * 20 * deg) / (Math.PI + k * Math.abs(x));
|
|
}
|
|
return curve;
|
|
}
|
|
|
|
// Grab audio track via XHR for convolver node
|
|
let soundSource;
|
|
const ajaxRequest = new XMLHttpRequest();
|
|
|
|
ajaxRequest.open(
|
|
"GET",
|
|
"https://mdn.github.io/voice-change-o-matic/audio/concert-crowd.ogg",
|
|
true
|
|
);
|
|
|
|
ajaxRequest.responseType = "arraybuffer";
|
|
|
|
ajaxRequest.onload = function() {
|
|
const audioData = ajaxRequest.response;
|
|
|
|
audioCtx.decodeAudioData(
|
|
audioData,
|
|
function(buffer) {
|
|
soundSource = audioCtx.createBufferSource();
|
|
},
|
|
function(e) {
|
|
console.log("Audio::audioCtx.decodeAudioData", "Error with decoding audio data" + e.err);
|
|
}
|
|
);
|
|
};
|
|
|
|
ajaxRequest.send();
|
|
|
|
// Set up canvas context for visualizer
|
|
const canvas = audioDom.querySelector(".visualizer");
|
|
const canvasCtx = canvas.getContext("2d");
|
|
|
|
const intendedWidth = audioDom.clientWidth;
|
|
canvas.setAttribute("width", config.audio.fftBandsUsed);
|
|
const visualSelect = audioDom.querySelector("#visual");
|
|
let drawVisual;
|
|
|
|
// Main block for doing the audio recording
|
|
if (navigator.mediaDevices.getUserMedia) {
|
|
console.log("getUserMedia supported.");
|
|
const constraints = {
|
|
audio: true
|
|
};
|
|
navigator.mediaDevices
|
|
.getUserMedia(constraints)
|
|
.then(function(stream) {
|
|
source = audioCtx.createMediaStreamSource(stream);
|
|
source.connect(analyser);
|
|
|
|
visualize();
|
|
voiceChange();
|
|
})
|
|
.catch(function(err) {
|
|
console.log("The following gUM error occured: " + err);
|
|
});
|
|
} else {
|
|
console.log("getUserMedia not supported on your browser!");
|
|
}
|
|
|
|
const visualize = () => {
|
|
const WIDTH = canvas.width;
|
|
const HEIGHT = canvas.height;
|
|
|
|
const visualSetting = visualSelect.value;
|
|
|
|
if (visualSetting === "sinewave") {
|
|
//analyser.fftSize = 2048;
|
|
//const bufferLength = analyser.fftSize;
|
|
|
|
//// We can use Float32Array instead of Uint8Array if we want higher precision
|
|
//// const dataArray = new Float32Array(bufferLength);
|
|
//const dataArray = new Uint8Array(bufferLength);
|
|
|
|
//canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
|
|
|
|
//const draw = function() {
|
|
//drawVisual = requestAnimationFrame(draw);
|
|
|
|
//analyser.getByteTimeDomainData(dataArray);
|
|
|
|
//canvasCtx.fillStyle = "rgb(200, 200, 200)";
|
|
//canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
|
|
|
|
//canvasCtx.lineWidth = 2;
|
|
//canvasCtx.strokeStyle = "rgb(0, 0, 0)";
|
|
|
|
//canvasCtx.beginPath();
|
|
|
|
//const sliceWidth = (WIDTH * 1.0) / bufferLength;
|
|
//let x = 0;
|
|
|
|
//for (let i = 0; i < bufferLength; i++) {
|
|
//let v = dataArray[i] / 128.0;
|
|
//let y = (v * HEIGHT) / 2;
|
|
|
|
//if (i === 0) {
|
|
//canvasCtx.moveTo(x, y);
|
|
//} else {
|
|
//canvasCtx.lineTo(x, y);
|
|
//}
|
|
|
|
//x += sliceWidth;
|
|
//}
|
|
|
|
//canvasCtx.lineTo(canvas.width, canvas.height / 2);
|
|
//canvasCtx.stroke();
|
|
//};
|
|
|
|
//draw();
|
|
} else if (visualSetting == "frequencybars") {
|
|
analyser.fftSize = config.audio.fftBandsAnalysed;
|
|
const w = config.audio.fftBandsUsed;
|
|
const h = config.audio.fftHeight;
|
|
const verticalFactor = h / 256.0;
|
|
const bufferLengthAlt = analyser.frequencyBinCount / 2;
|
|
|
|
// See comment above for Float32Array()
|
|
const dataArrayAlt = new Uint8Array(bufferLengthAlt);
|
|
|
|
let canvasKeys = Object.keys(canvasCombos);
|
|
|
|
for (let i = 0; i < canvasKeys.length; i++) {
|
|
canvasCombos[canvasKeys[i]][1].clearRect(0, 0, w, h);
|
|
}
|
|
|
|
let frameCount = 0;
|
|
const drawAlt = function() {
|
|
canvasKeys = Object.keys(canvasCombos);
|
|
drawVisual = requestAnimationFrame(drawAlt);
|
|
|
|
analyser.getByteFrequencyData(dataArrayAlt);
|
|
|
|
for (let i = 0; i < canvasKeys.length; i++) {
|
|
canvasCombos[canvasKeys[i]][1].fillStyle = "rgb(0, 0, 0)"; // AUDIO COLOR
|
|
canvasCombos[canvasKeys[i]][1].fillRect(0, 0, w, h);
|
|
const layerID = canvasCombos[canvasKeys[i]][2];
|
|
const m = mapping[layerID][canvasKeys[i]];
|
|
if (m.sync === 'volume') {
|
|
const sx = m.min_freq;
|
|
const sw = m.max_freq - m.min_freq;
|
|
const sy = h - (m.max_in * verticalFactor);
|
|
const sh = (m.max_in - m.min_in) * verticalFactor;
|
|
canvasCombos[canvasKeys[i]][1].fillStyle = "rgb(80, 80, 80)"; // AUDIO COLOR
|
|
canvasCombos[canvasKeys[i]][1].fillRect(sx, sy, sw, sh);
|
|
} else if (m.sync === 'pitch') {
|
|
const sx = m.min_freq;
|
|
const sw = m.max_freq - m.min_freq;
|
|
const sy = 0;
|
|
const sh = h;
|
|
canvasCombos[canvasKeys[i]][1].fillStyle = "rgb(80, 80, 80)"; // AUDIO COLOR
|
|
canvasCombos[canvasKeys[i]][1].fillRect(sx, sy, sw, sh);
|
|
}
|
|
}
|
|
|
|
const barWidth = 1;//(w / bufferLengthAlt) * 2.5;
|
|
let barHeight;
|
|
let x = 0;
|
|
|
|
let max_i = 0;
|
|
let max_ri = 0;
|
|
let total_v = 0;
|
|
let max_v = 0;
|
|
for (let k = 0; k < canvasKeys.length; k++) {
|
|
const layerID = canvasCombos[canvasKeys[k]][2];
|
|
const m = mapping[layerID][canvasKeys[k]];
|
|
m.max_v = max_v;
|
|
m.max_i = max_i;
|
|
m.max_ri = max_ri;
|
|
m.total_v = total_v;
|
|
}
|
|
for (let i = 0; i < w; i++) {
|
|
barHeight = dataArrayAlt[i];
|
|
total_v += barHeight;
|
|
max_ri = barHeight * i;
|
|
|
|
if (barHeight > max_v) {
|
|
max_v = barHeight;
|
|
max_i = i;
|
|
}
|
|
for (let k = 0; k < canvasKeys.length; k++) {
|
|
const layerID = canvasCombos[canvasKeys[k]][2];
|
|
const m = mapping[layerID][canvasKeys[k]];
|
|
let fillStyle = "rgb(200,200,200)"; // AUDIO COLOR
|
|
if (m.min_freq <= i && m.max_freq >= i) {
|
|
m.total_v += barHeight;
|
|
if (barHeight > m.max_v) {
|
|
m.max_v = barHeight;
|
|
m.max_i = i;
|
|
m.max_ri = barHeight * i;
|
|
}
|
|
fillStyle = "rgb(255,255,255)"; // AUDIO COLOR
|
|
}
|
|
canvasCombos[canvasKeys[k]][1].fillStyle = fillStyle;
|
|
canvasCombos[canvasKeys[k]][1].fillRect(
|
|
x,
|
|
h - (barHeight * verticalFactor),
|
|
barWidth,
|
|
(barHeight * verticalFactor)
|
|
);
|
|
}
|
|
|
|
x += barWidth;
|
|
}
|
|
max_ri /= total_v;
|
|
for (let k = 0; k < canvasKeys.length; k++) {
|
|
const layerID = canvasCombos[canvasKeys[k]][2];
|
|
const m = mapping[layerID][canvasKeys[k]];
|
|
m.max_ri /= m.total_v;
|
|
if (m.sync === 'volume') {
|
|
const sx = m.min_freq;
|
|
const sw = m.max_freq - m.min_freq;
|
|
const sy = h - (m.max_in * verticalFactor);
|
|
const sh = (m.max_in - m.min_in) * verticalFactor;
|
|
canvasCombos[canvasKeys[k]][1].lineWidth = 1; // AUDIO COLOR
|
|
canvasCombos[canvasKeys[k]][1].strokeStyle = "rgb(255,255,255)"; // AUDIO COLOR
|
|
canvasCombos[canvasKeys[k]][1].strokeRect(sx, sy, sw, sh);
|
|
} else if (m.sync === 'pitch') {
|
|
const m = mapping[layerID][canvasKeys[k]];
|
|
const sx = m.min_freq;
|
|
const sw = m.max_freq - m.min_freq;
|
|
const sy = 0;
|
|
const sh = h;
|
|
canvasCombos[canvasKeys[k]][1].lineWidth = 1; // AUDIO COLOR
|
|
canvasCombos[canvasKeys[k]][1].strokeStyle = "rgb(255,255,255)"; // AUDIO COLOR
|
|
canvasCombos[canvasKeys[k]][1].strokeRect(sx, sy, sw, sh);
|
|
}
|
|
}
|
|
const propsToSet = [];
|
|
getLayers().forEach((layer) => {
|
|
if (mapping.hasOwnProperty(layer.id())) {
|
|
Object.keys(mapping[layer.id()]).forEach((propTitle) => {
|
|
const m = mapping[layer.id()][propTitle];
|
|
switch (m.sync) {
|
|
case 'volume': {
|
|
let a = mapValue(m.max_v, m.min_in, m.max_in, m.min_out, m.max_out, true);
|
|
m.value = m.value * m.smoothing + (1.0 - m.smoothing) * a;
|
|
propsToSet.push({
|
|
layer,
|
|
id: layer.id(),
|
|
title: propTitle,
|
|
prop: layer.theatreObject.props[propTitle],
|
|
value: m.value,
|
|
});
|
|
break;
|
|
}
|
|
case 'pitch': {
|
|
const mi = config.audio.ignoreOutboundFrequencies ? m.max_i : max_i;
|
|
const ri = config.audio.ignoreOutboundFrequencies ? m.max_ri : max_ri;
|
|
const fi = config.audio.pitchCombineFrequencies ? ri : mi;
|
|
let a = mapValue(fi, m.min_freq, m.max_freq, m.min_out, m.max_out, true);
|
|
m.value = m.value * m.smoothing + (1.0 - m.smoothing) * a;
|
|
propsToSet.push({
|
|
layer,
|
|
id: layer.id(),
|
|
title: propTitle,
|
|
prop: layer.theatreObject.props[propTitle],
|
|
value: m.value,
|
|
});
|
|
break;
|
|
}
|
|
default:
|
|
break;
|
|
}
|
|
});
|
|
}
|
|
});
|
|
if (propsToSet.length > 0 && frameCount % 2 === 0) {
|
|
// this is when to monitor live
|
|
if (!record.isRecording()) {
|
|
if (!tp.core.val(tp.sheet.sequence.pointer.playing)) {
|
|
let values = {};
|
|
propsToSet.forEach((p) => {
|
|
const newValues = {
|
|
[p.title]: p.value
|
|
};
|
|
if (!values.hasOwnProperty(p.id)) {
|
|
values[p.id] = {};
|
|
}
|
|
values[p.id] = {
|
|
...values[p.id],
|
|
...newValues,
|
|
};
|
|
});
|
|
Object.keys(values).forEach((layerID) => {
|
|
window.debugPreValues = clone(values[layerID]);
|
|
deFlattenObject(values[layerID]);
|
|
window.debugValues = clone(values[layerID]);
|
|
record.liveUpdater.immediateUpdate(getLayer(layerID), values[layerID]);
|
|
});
|
|
}
|
|
} else {
|
|
const position = tp.sheet.sequence.position;
|
|
propsToSet.forEach((p) => {
|
|
const title = tp
|
|
.getPanelPropTitle(p.title);
|
|
|
|
if (title !== null) {
|
|
const inputElement = title
|
|
.parentNode.parentNode
|
|
.querySelector('input.recording');
|
|
|
|
if (inputElement !== null) {
|
|
inputElement.value = p.value;
|
|
inputElement.dispatchEvent(new Event('change'));
|
|
}
|
|
}
|
|
record.addValue(p.id, p.title, p.value, position);
|
|
if (p.title.indexOf('color') === 0) {
|
|
if (!config.audio.colorSeparateRGBA || p.title === 'color.a') {
|
|
record.liveUpdate(p.layer, position);
|
|
}
|
|
} else {
|
|
record.liveUpdate(p.layer, position);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
//const panel = tp.getPanel();
|
|
//const fft_images = panel.querySelectorAll('.audio_fft');
|
|
//if (fft_images !== null) {
|
|
//const src = canvas.toDataURL();
|
|
//fft_images.forEach((e) => {
|
|
//e.src = src;
|
|
//});
|
|
//}
|
|
frameCount++;
|
|
};
|
|
drawAlt();
|
|
} else if (visualSetting == "off") {
|
|
canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
|
|
canvasCtx.fillStyle = "red";
|
|
canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
|
|
}
|
|
}
|
|
|
|
const voiceChange = () => {
|
|
distortion.oversample = "4x";
|
|
biquadFilter.gain.setTargetAtTime(0, audioCtx.currentTime, 0);
|
|
|
|
const voiceSetting = voiceSelect.value;
|
|
|
|
if (echoDelay.isApplied()) {
|
|
echoDelay.discard();
|
|
}
|
|
|
|
// When convolver is selected it is connected back into the audio path
|
|
if (voiceSetting == "convolver") {
|
|
biquadFilter.disconnect(0);
|
|
biquadFilter.connect(convolver);
|
|
} else {
|
|
biquadFilter.disconnect(0);
|
|
biquadFilter.connect(gainNode);
|
|
|
|
if (voiceSetting == "distortion") {
|
|
distortion.curve = makeDistortionCurve(400);
|
|
} else if (voiceSetting == "biquad") {
|
|
biquadFilter.type = "lowshelf";
|
|
biquadFilter.frequency.setTargetAtTime(1000, audioCtx.currentTime, 0);
|
|
biquadFilter.gain.setTargetAtTime(25, audioCtx.currentTime, 0);
|
|
} else if (voiceSetting == "delay") {
|
|
echoDelay.apply();
|
|
} else if (voiceSetting == "off") {
|
|
console.log("Voice settings turned off");
|
|
}
|
|
}
|
|
}
|
|
|
|
function createEchoDelayEffect(audioContext) {
|
|
const delay = audioContext.createDelay(1);
|
|
const dryNode = audioContext.createGain();
|
|
const wetNode = audioContext.createGain();
|
|
const mixer = audioContext.createGain();
|
|
const filter = audioContext.createBiquadFilter();
|
|
|
|
delay.delayTime.value = 0.75;
|
|
dryNode.gain.value = 1;
|
|
wetNode.gain.value = 0;
|
|
filter.frequency.value = 1100;
|
|
filter.type = "highpass";
|
|
|
|
return {
|
|
apply: function() {
|
|
wetNode.gain.setValueAtTime(0.75, audioContext.currentTime);
|
|
},
|
|
discard: function() {
|
|
wetNode.gain.setValueAtTime(0, audioContext.currentTime);
|
|
},
|
|
isApplied: function() {
|
|
return wetNode.gain.value > 0;
|
|
},
|
|
placeBetween: function(inputNode, outputNode) {
|
|
inputNode.connect(delay);
|
|
delay.connect(wetNode);
|
|
wetNode.connect(filter);
|
|
filter.connect(delay);
|
|
|
|
inputNode.connect(dryNode);
|
|
dryNode.connect(mixer);
|
|
wetNode.connect(mixer);
|
|
mixer.connect(outputNode);
|
|
},
|
|
};
|
|
}
|
|
|
|
// Event listeners to change visualize and voice settings
|
|
visualSelect.onchange = function() {
|
|
window.cancelAnimationFrame(drawVisual);
|
|
visualize();
|
|
};
|
|
|
|
voiceSelect.onchange = function() {
|
|
voiceChange();
|
|
};
|
|
|
|
mute.onclick = voiceMute;
|
|
|
|
let previousGain;
|
|
|
|
function voiceMute() {
|
|
if (mute.id === "") {
|
|
previousGain = gainNode.gain.value;
|
|
gainNode.gain.value = 0;
|
|
mute.id = "activated";
|
|
mute.innerHTML = "Unmute";
|
|
} else {
|
|
gainNode.gain.value = previousGain;
|
|
mute.id = "";
|
|
mute.innerHTML = "Mute";
|
|
}
|
|
}
|
|
}
|
|
}
|
|
const deinit = () => {
|
|
if (started) {
|
|
if (audioCtx !== false) {
|
|
audioCtx.suspend();
|
|
}
|
|
started = false;
|
|
}
|
|
};
|
|
|
|
this.getContext = () => {
|
|
return audioCtx;
|
|
};
|
|
this.init = init;
|
|
this.deinit = deinit;
|
|
this.injectPanel = injectPanel;
|
|
this.mapping = mapping;
|
|
this.addAudioMapping = addAudioMapping;
|
|
this.removeAudioMapping = removeAudioMapping;
|
|
this.addAudioOptions = addAudioOptions;
|
|
this.removeAudioOptions = removeAudioOptions;
|
|
this.AudioMappingOptions = AudioMappingOptions;
|
|
|
|
// debug
|
|
this.canvasCombos = canvasCombos;
|
|
};
|
|
|
|
export {
|
|
Audio
|
|
}
|