From 55253b2710fb760081ceae93a5f0216d0e39aec3 Mon Sep 17 00:00:00 2001 From: equilet <2237372+equilet@users.noreply.github.com> Date: Fri, 29 Mar 2024 01:25:59 -0500 Subject: [PATCH] changed some naming, added loopstate experiment, removed clutter, added region generation routine, add_region_at_time(), reset marker view upon init, fixed a style issue with time display, added clear_markers function --- app.js | 167 ++++++++++++++++++++++++++++++++++----------------------- 1 file changed, 101 insertions(+), 66 deletions(-) diff --git a/app.js b/app.js index 74c101a..7ad9d4c 100644 --- a/app.js +++ b/app.js @@ -1,25 +1,21 @@ -const num_slots = 16; +const num_storage_slots = 16; let num_regions = 0; -//let curr_region = null; let filepath = "media/Berio-criesoflondon.wav"; let global_dict = new Object(); -let activeregion = null; -let text_input, text_butt, timedisp; +let active_region = null; +let global_dur = 3.0; +let text_input, text_butt, timevalues; let btn_r = []; let btn_tp = []; let btn_misc = []; let ws; let wsr; +let looping = false; -//https://medium.com/analytics-vidhya/local-storage-with-vanilla-javascript-c87e3923163a //initialization--------------------------------------------------------------------- // -//REGIONS ISSUE: -//https://wavesurfer.xyz/example/regions/ -//https://wavesurfer.xyz/example/plugin-system/ - const setup = async() => { initialize(); buttons_make(); @@ -38,8 +34,6 @@ document.addEventListener('DOMContentLoaded', function(){ // ws.load('/some/path/to/wave.wav'); // - - //function file_to_server() { //let dictstr = JSON.stringify(global_dict); //fs = new File("media/test.json", dictstr); @@ -51,38 +45,26 @@ function get_time_string(running_sec) { const hrs = Math.floor(running_sec / 3600); const mns = Math.floor((running_sec % 3600) / 60); const scs = Math.floor((running_sec % 3600) % 60); - - /* - let hdisp = hrs > 0 ? hrs + (hrs == 1 ? " hour, " : " hours, ") : ""; - let mdisp = mns > 0 ? mns + (mns == 1 ? " minute, " : " minutes, ") : ""; - let sdisp = scs > 0 ? scs + (scs == 1 ? " second, " : " seconds, ") : ""; - return hdisp + mdisp + sdisp; - */ return hrs + ":" + mns + ":" + scs; } -function linear_map(phase, imn, imx, omn, omx){ +function linear_map(phase, imn, imx, omn, omx) { return (phase - imn) * (omx - omn) / (imx - imn) + omn; } -function add_one_region() { +function add_1_region() { - const dur = ws.getDuration(); - const pad = 0.2; - const currtime = ws.getCurrentTime(); - //let randstart = (Math.random() * dur) - pad; - //let randend = randstart + 3; + const gen = gen_region_startend(); num_regions++; //console.log("adding a region with id", num_regions); wsr.addRegion({ channelIdx: num_regions, content: "region" + num_regions + "text", - //id: "cue " + i, id: 'region', - start: currtime, - end: currtime + 2., + start: gen[0], + end: gen[1], loop: false, color: 'hsla(184, 32%, 72%, 0.1)' }); @@ -90,28 +72,52 @@ function add_one_region() { } function add_3_regions() { - const dur = ws.getDuration(); - const pad = 0.2; for(let i = 1; i < 4; i++){ - //this should be clipped - let randstart = (Math.random() * dur) - pad; - let randend = randstart + 3; + const gen = gen_region_startend(); + let percent_lum = Math.random() * 100.0; wsr.addRegion({ channelIdx: i, content: "region" + i + "text", id: 'region', - start: randstart, - end: randend, + start: gen[0], + end: gen[1], loop: false, - color: 'hsla(184, 32%, 72%, 0.1)' + color: 'hsla(200, 100%, ' + percent_lum + '%, 0.1)' }); + num_regions++; } } +function add_region_at_time(time){ + num_regions++; + const percent_lum = Math.random() * 100.0; + + wsr.addRegion({ + channelIdx: num_regions, + content: "region" + num_regions + "text", + //id: "cue " + i, + id: 'region', + start: time, + end: time + global_dur, + loop: false, + color: 'hsla(184, 32%, ' + percent_lum + '%, 0.1)' + }); +} + +function gen_region_startend(){ + const dur = ws.getDuration(); + const pad = 0.2; + //this should be clipped + let randstart = (Math.random() * dur) - pad; + let randend = randstart + global_dur; + + return [randstart, randend]; +} + function clear_regions() { wsr.clearRegions(); num_regions = 0; @@ -126,11 +132,14 @@ function buttons_reset() { function marker_view_reset(){ //curr_region = null; - activeregion = null; + active_region = null; text_input.value = "no marker selected"; } //------------------------------------------------------------- +//https://medium.com/analytics-vidhya/local-storage-with-vanilla-javascript-c87e3923163a +// + //localStorage read/write/clear/etc function localstorage_get() { return JSON.stringify(localStorage); @@ -146,7 +155,7 @@ function localstorage_write(data) { function initialize(){ - activeregion = null; + active_region = null; ws = WaveSurfer.create({ container: '#waveform', @@ -177,12 +186,24 @@ function initialize(){ ws.seekTo(relativeX); ws.play(); buttons_reset(); + marker_view_reset(); }); + ws.on('timeupdate', (currentTime) => { - //let timestring = get_time_string(ws.getCurrentTime()); let timestring = get_time_string(currentTime); - //console.log("time string:", timestring); - timedisp.innerHTML = timestring; + + timevalues.innerHTML = timestring; + + //some floating point error here to deal with... + if(active_region != null && (currentTime >= active_region.end)){ + if(looping === false){ + ws.pause(); + } + if(looping === true) { + active_region.play(); + } + + } }); /* @@ -196,17 +217,13 @@ function initialize(){ wsr.on('region-clicked', (region, e) => { e.stopPropagation(); - activeregion = region; - let valid; - if(activeregion != null){ - valid = true; - } else { - valid = false; - } - console.log("setting active region to:", activeregion); - console.log("is active region valid?:", valid); + active_region = region; + + active_region.loop = looping; + active_region.play(); - region.play(); + //this doesn't work as far as I can tell + //region.play(region.start, region.end); buttons_reset(); text_input.value = region.content.innerHTML; //curr_region = region.channelIdx; //zero-based @@ -224,7 +241,8 @@ function initialize(){ window.addEventListener("keydown", (e) => { if(!e.repeat && e.key == 'm') { //console.log('the m key was pressed'); - add_one_region(); + //add_1_region(); + add_region_at_time(ws.getCurrentTime()); } }); @@ -243,7 +261,7 @@ function initialize(){ // //generate cue marker section - for(let i=0; i { @@ -455,13 +480,23 @@ function buttons_make() { text_input = document.getElementById("textinput"); text_butt = document.getElementById("textsubmit"); + check.addEventListener('change', (e) => { + if(e.target.checked) { + looping = true; + //console.log("check is positive"); + } else { + looping = false; + //console.log("check is negative"); + } + }); + //marker text text_butt.addEventListener('mousedown', () => { console.log("the text entered was", text_input.value); /* let valid; - if(activeregion != null){ + if(active_region != null){ valid = true; } else { valid = false; @@ -469,9 +504,9 @@ function buttons_make() { console.log("is active region valid?:", valid); */ - if(activeregion != null){ + if(active_region != null){ console.log("found active region; populating..."); - activeregion.content.innerHTML = text_input.value; + active_region.content.innerHTML = text_input.value; } text_butt.classList.add('clicked'); -- 2.34.1