806 lines
33 KiB
JavaScript
806 lines
33 KiB
JavaScript
import {
|
|
mapValue,
|
|
mix,
|
|
} from './utils.js';
|
|
|
|
window.mapValue = mapValue;
|
|
|
|
|
|
const AudioMappingOptions = function() {
|
|
this.freq_min = 0.0;
|
|
this.freq_max = config.audio.fftBandsUsed;
|
|
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 = [];
|
|
const canvasCtxs = [];
|
|
|
|
const isMapped = (layer, propTitle) => {
|
|
if (!mapping.hasOwnProperty(layer.id())) {
|
|
return false;
|
|
}
|
|
if (!mapping[layer.id()].hasOwnProperty(propTitle)) {
|
|
return false;
|
|
}
|
|
return true;
|
|
};
|
|
|
|
const addAudioMapping = (layer, propTitle, options = new AudioMappingOptions()) => {
|
|
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
|
|
return false;
|
|
}
|
|
delete mapping[layer.id()][propTitle];
|
|
if (Object.keys(mapping[layer.id()]).length === 0) {
|
|
delete mapping[layer.id()];
|
|
}
|
|
return true;
|
|
}
|
|
|
|
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(`.audioOptions${propTitle}`) !== null) {
|
|
//console.log('Audio::addAudioOptions::error',`audioOptions already exist for "${propTitle}"`);
|
|
return;
|
|
}
|
|
const container = tp.getPanelPropContainer(panelPropTitle);
|
|
const mappingOptions = mapping[layer.id()][propTitle];
|
|
const panel = tp.getPanel();
|
|
const audioOptions = document.createElement('div');
|
|
audioOptions.classList.add('audioOptions');
|
|
audioOptions.classList.add('audioOptionsTypeDefault');
|
|
audioOptions.classList.add(`audioOptions${propTitle}`);
|
|
audioOptions.style.position = 'relative';
|
|
audioOptions.style.width = '100%';
|
|
audioOptions.style.background = 'rgba(0,255,255,0.2)';
|
|
audioOptions.style.order = parseInt(container.style.order) + 1;
|
|
|
|
const updateMappingOptions = () => {
|
|
mappingOptions.min_out = parseFloat(panel.querySelector(`#audio_min${propTitle}`).value);
|
|
mappingOptions.max_out = parseFloat(panel.querySelector(`#audio_max${propTitle}`).value);
|
|
mappingOptions.sync =
|
|
panel.querySelector(`input[name="audio_sync${propTitle}"]:checked`).value;
|
|
const s = panel.querySelector(`#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_inputDom_label = document.createElement('label');
|
|
min_inputDom_label.for = 'audio_min';
|
|
min_inputDom_label.innerHTML = 'audio_min';
|
|
const min_inputDom = document.createElement('input');
|
|
min_inputDom.type = 'number';
|
|
min_inputDom.name = `audio_min${propTitle}`;
|
|
min_inputDom.id = `audio_min${propTitle}`;
|
|
min_inputDom.value = `${mappingOptions.min_out}`;
|
|
const max_inputDom_label = document.createElement('label');
|
|
max_inputDom_label.for = 'audio_max';
|
|
max_inputDom_label.innerHTML = 'audio_max';
|
|
const max_inputDom = document.createElement('input');
|
|
max_inputDom.type = 'number';
|
|
max_inputDom.name = `audio_max${propTitle}`;
|
|
max_inputDom.id = `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 = `audio_smoothing${propTitle}`;
|
|
smoothing_inputDom.id = `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_inputDom_label);
|
|
min_max_Dom.append(min_inputDom);
|
|
min_max_Dom.append(max_inputDom_label);
|
|
min_max_Dom.append(max_inputDom);
|
|
audioOptions.append(min_max_Dom);
|
|
|
|
const sync_Dom = document.createElement('div');
|
|
const sync_titleDom = document.createElement('p');
|
|
sync_titleDom.innerHTML = 'sync with:';
|
|
sync_Dom.append(sync_titleDom);
|
|
|
|
audio_sync_options.forEach((o, oi) => {
|
|
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 = `audio_sync${propTitle}`;
|
|
sync_inputDom.id = `audio_sync${propTitle}${o}`;
|
|
sync_inputDom.value = o;
|
|
// default select first option
|
|
if (o === mappingOptions.sync) {
|
|
sync_inputDom.checked = '1';
|
|
}
|
|
sync_Dom.append(sync_inputDom_label);
|
|
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.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(0,255,0,0.2)';
|
|
fft_selectDom.style.border = '1px solid rgba(0,255,0,1.0)';
|
|
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;
|
|
fft_Dom.addEventListener('mousedown', (e) => {
|
|
setFrequency = true;
|
|
const bb = fft_Dom.getBoundingClientRect();
|
|
const x = e.clientX - bb.x;
|
|
freq_down = mapValue(e.clientX, bb.x, bb.x + bb.width, 0, config.audio.fftBandsUsed, true);
|
|
});
|
|
fft_Dom.addEventListener('mouseup', (e) => {
|
|
setFrequency = false;
|
|
const bb = fft_Dom.getBoundingClientRect();
|
|
const x = e.clientX - bb.x;
|
|
freq_down = mapValue(e.clientX, bb.x, bb.x + bb.width, 0, config.audio.fftBandsUsed, true);
|
|
});
|
|
|
|
//removeAudioOptions();
|
|
container.after(audioOptions);
|
|
|
|
const audioButton = container.querySelector('.audioButton');
|
|
audioButton.classList.add('active');
|
|
|
|
canvass.push(fft_imgDom);
|
|
canvasCtxs.push(fft_imgDom.getContext("2d"));
|
|
|
|
updateMappingOptions();
|
|
};
|
|
|
|
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();
|
|
}
|
|
}
|
|
panel.querySelectorAll('.audioButton').forEach((button) => {
|
|
button.classList.remove('active');
|
|
});
|
|
} else {
|
|
// only selected layers have options
|
|
// otherwise the ui is not there
|
|
if (layer.isSelected()) {
|
|
const audioOptions = panel.querySelector(`.audioOptions${propTitle}`);
|
|
if (audioOptions !== null) {
|
|
audioOptions.remove();
|
|
}
|
|
const audioButton = panel.querySelector(`.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);
|
|
|
|
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(`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 props = Object.keys(layer.theatreObject.value);
|
|
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
|
|
function 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();
|
|
convolver.buffer = buffer;
|
|
},
|
|
function(e) {
|
|
console.log("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(distortion);
|
|
distortion.connect(biquadFilter);
|
|
biquadFilter.connect(gainNode);
|
|
convolver.connect(gainNode);
|
|
echoDelay.placeBetween(gainNode, analyser);
|
|
analyser.connect(audioCtx.destination);
|
|
|
|
visualize();
|
|
voiceChange();
|
|
})
|
|
.catch(function(err) {
|
|
console.log("The following gUM error occured: " + err);
|
|
});
|
|
} else {
|
|
console.log("getUserMedia not supported on your browser!");
|
|
}
|
|
|
|
function 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 bufferLengthAlt = analyser.frequencyBinCount / 2;
|
|
|
|
// See comment above for Float32Array()
|
|
const dataArrayAlt = new Uint8Array(bufferLengthAlt);
|
|
|
|
for (let i = 0; i < canvasCtxs.length; i++) {
|
|
canvasCtxs[i].clearRect(0, 0, w, h);
|
|
}
|
|
|
|
let frameCount = 0;
|
|
const drawAlt = function() {
|
|
drawVisual = requestAnimationFrame(drawAlt);
|
|
|
|
analyser.getByteFrequencyData(dataArrayAlt);
|
|
|
|
for (let i = 0; i < canvasCtxs.length; i++) {
|
|
canvasCtxs[i].fillStyle = "rgb(0, 0, 0)";
|
|
canvasCtxs[i].fillRect(0, 0, w, h);
|
|
}
|
|
|
|
const barWidth = (w / bufferLengthAlt) * 2.5;
|
|
let barHeight;
|
|
let x = 0;
|
|
|
|
let max_i = 0;
|
|
let max_v = 0;
|
|
for (let i = 0; i < bufferLengthAlt; i++) {
|
|
barHeight = dataArrayAlt[i];
|
|
|
|
if (barHeight > max_v) {
|
|
max_v = barHeight;
|
|
max_i = i;
|
|
}
|
|
for (let i = 0; i < canvasCtxs.length; i++) {
|
|
canvasCtxs[i].fillStyle = "rgb(" + (barHeight + 100) + ",50,50)";
|
|
canvasCtxs[i].fillRect(
|
|
x,
|
|
h - barHeight / 2,
|
|
barWidth,
|
|
barHeight / 2
|
|
);
|
|
}
|
|
|
|
x += barWidth + 1;
|
|
}
|
|
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(max_v, 0, 255, 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': {
|
|
let a = mapValue(max_i, 0, bufferLengthAlt - 1, 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 (m.sync === 'volume') {}
|
|
});
|
|
}
|
|
});
|
|
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)) {
|
|
if (typeof window.immediateUpdate !== 'function') {
|
|
window.immediateUpdate = (layer, values) => {
|
|
const v = {
|
|
...layer.theatreObject.value,
|
|
...values
|
|
};
|
|
const p = layer.values2cppProps(v);
|
|
if (p !== false) {
|
|
const id = layer.id();
|
|
if (id !== 'artboard') {
|
|
Module.setProps(p, layer.id());
|
|
} else {
|
|
Module.setArtboardProps(p, layer.id());
|
|
}
|
|
}
|
|
};
|
|
}
|
|
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) => {
|
|
immediateUpdate(getLayer(layerID), values[layerID]);
|
|
});
|
|
}
|
|
} else {
|
|
propsToSet.forEach((p) => {
|
|
const title = tp
|
|
.getPanelPropContainer(p.title);
|
|
|
|
if (title !== null) {
|
|
const inputElement = title
|
|
.querySelector('input.recording');
|
|
|
|
if (inputElement !== null) {
|
|
inputElement.value = p.value;
|
|
inputElement.dispatchEvent(new Event('change'));
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
//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);
|
|
}
|
|
}
|
|
|
|
function 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;
|
|
};
|
|
|
|
export {
|
|
Audio
|
|
}
|