From e6e705f86f186a99c429ad7e08cc9c5bcc419efd Mon Sep 17 00:00:00 2001 From: themancalledjakob Date: Thu, 12 Oct 2023 18:04:48 +0200 Subject: [PATCH] add letterDelay audio, fix audio update when playing, misc --- bin/web/js/audio.js | 49 ++++++++++++++++++++++++++++++++++++--------- 1 file changed, 40 insertions(+), 9 deletions(-) diff --git a/bin/web/js/audio.js b/bin/web/js/audio.js index 57cdec0..036856f 100644 --- a/bin/web/js/audio.js +++ b/bin/web/js/audio.js @@ -14,7 +14,7 @@ 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.max_in = 255.0; this.min_out = 0.0; this.max_out = 1.0; this.smoothing = config.audio.defaultSmoothing; @@ -217,6 +217,10 @@ const Audio = function(tp, record) { const createAudioOptions = (layer, propTitle, container) => { const mappingOptions = mapping[layer.id()][propTitle]; + let hasLetterDelay = config + .layer.letterDelayProps + .indexOf(propTitle.split('.')[0]) >= 0 + && tp.isSequenced([...[layer.id()], ...propTitle.split('.')]); const panel = tp.getPanel(); if (!areMutationsObserved) { mutationObserver.observe(panel, { childList: true, subtree: true }); @@ -262,6 +266,10 @@ const Audio = function(tp, record) { panel.querySelector(`input[name="${toCssClass('audio_sync' + propTitle)}"]:checked`).value; const s = panel.querySelector(toCssClass(`audio_smoothing${propTitle}`,'#')).value; mappingOptions.smoothing = parseFloat(s); + if (hasLetterDelay) { + const ld = panel.querySelector(toCssClass(`audio_letterDelay${propTitle}`,'#')); + mappingOptions.letterDelay = typeof ld.value === 'number' ? ld.value : parseInt(ld.value); + } }; const min_max_Dom = document.createElement('div'); @@ -288,7 +296,7 @@ const Audio = function(tp, record) { 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 '; + smoothing_inputDom_label.innerHTML = 'audio smoothing'; const smoothing_inputDom = document.createElement('input'); smoothing_inputDom.type = 'number'; smoothing_inputDom.name = toCssClass(`audio_smoothing${propTitle}`); @@ -305,6 +313,23 @@ const Audio = function(tp, record) { min_max_Dom.append(max_Cont); max_Cont.append(max_inputDom_label); max_Cont.append(max_inputDom); + if (hasLetterDelay) { + const letterDelayCont = document.createElement('div'); + const letterDelay_inputDom_label = document.createElement('label'); + letterDelay_inputDom_label.for = 'audio_letterDelay'; + letterDelay_inputDom_label.innerHTML = 'letterDelay'; + const letterDelay_inputDom = document.createElement('input'); + letterDelay_inputDom.type = 'number'; + letterDelay_inputDom.name = toCssClass(`audio_letterDelay${propTitle}`); + letterDelay_inputDom.id = toCssClass(`audio_letterDelay${propTitle}`); + letterDelay_inputDom.value = 0; + letterDelay_inputDom.min = 0; + letterDelay_inputDom.step = 1; + letterDelayCont.append(letterDelay_inputDom_label); + letterDelayCont.append(letterDelay_inputDom); + min_max_Dom.append(letterDelayCont); + letterDelay_inputDom.addEventListener('change', updateMappingOptions); + } audioOptions.append(min_max_Dom); const sync_Dom = document.createElement('div'); @@ -314,7 +339,6 @@ const Audio = function(tp, record) { 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'); @@ -530,9 +554,11 @@ const Audio = function(tp, record) { if (!isMapped(layer, propTitle)) { addAudioMapping(layer, propTitle); addAudioOptions(layer, propTitle); + layer.updateValuesViaTheatre(false); } else { removeAudioMapping(layer, propTitle); removeAudioOptions(layer, propTitle); + layer.updateValuesViaTheatre(true); } }); if (isActive) { @@ -884,7 +910,6 @@ const Audio = function(tp, record) { layer, id: layer.id(), title: propTitle, - prop: layer.theatreObject.props[propTitle], value: m.value, }); break; @@ -899,7 +924,6 @@ const Audio = function(tp, record) { layer, id: layer.id(), title: propTitle, - prop: layer.theatreObject.props[propTitle], value: m.value, }); break; @@ -907,13 +931,22 @@ const Audio = function(tp, record) { default: break; } + if (m.letterDelay) { + const pt = `letterDelays.${propTitle}`; + propsToSet.push({ + layer, + id: layer.id(), + title: pt, + value: m.letterDelay, + }); + } }); } }); 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 (!tp.core.val(tp.sheet.sequence.pointer.playing)) { let values = {}; propsToSet.forEach((p) => { const newValues = { @@ -928,12 +961,10 @@ const Audio = function(tp, record) { }; }); 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) => {