From 39bdd62e129e9ff852393b79d601e255612c86da Mon Sep 17 00:00:00 2001 From: equilet <2237372+equilet@users.noreply.github.com> Date: Mon, 1 Apr 2024 12:59:47 -0500 Subject: [PATCH] added cue_select(), fixed bug with regions drawing incorrectly on first index, hue for new regions, intial work on localstorage, sf loading displays percent, added save button --- app.js | 137 ++++++++++++++++++++++++++++++++++++++++++--------------- 1 file changed, 101 insertions(+), 36 deletions(-) diff --git a/app.js b/app.js index 7ad9d4c..9218066 100644 --- a/app.js +++ b/app.js @@ -40,6 +40,12 @@ document.addEventListener('DOMContentLoaded', function(){ //fs.writeFile(); //} +function cue_select(i) { + const all_regions = wsr.getRegions(); + active_region = all_regions[i]; + active_region.play(); +} + function get_time_string(running_sec) { const hrs = Math.floor(running_sec / 3600); @@ -60,7 +66,7 @@ function add_1_region() { //console.log("adding a region with id", num_regions); wsr.addRegion({ - channelIdx: num_regions, + channelIdx: num_regions + 1, content: "region" + num_regions + "text", id: 'region', start: gen[0], @@ -72,39 +78,48 @@ function add_1_region() { } function add_3_regions() { + let percent_hue = new Number(); + for(let i = 1; i < 4; i++){ const gen = gen_region_startend(); - let percent_lum = Math.random() * 100.0; + //let percent_lum = Math.random() * 100.0; + percent_hue = Math.floor(Math.random() * 100.0); + //const test_string = 'hsla(' + percent_hue + ', 100%, 50%, 0.1)'; + num_regions++; wsr.addRegion({ - channelIdx: i, - content: "region" + i + "text", + channelIdx: num_regions + 1, + content: "region" + num_regions + "text", id: 'region', start: gen[0], end: gen[1], loop: false, - color: 'hsla(200, 100%, ' + percent_lum + '%, 0.1)' + // color: 'hsla(' + percent_hue + '%, 100%, 50%, 0.1)' + color: 'hsla(' + percent_hue + ', 100%, 50%, 0.1)' }); - num_regions++; } } function add_region_at_time(time){ num_regions++; - const percent_lum = Math.random() * 100.0; + //const percent_lum = Math.random() * 100.0; + let percent_hue = Math.floor(Math.random() * 100.0); + const test_string = 'hsla(' + percent_hue + ', 100%, 50%, 0.1)'; + console.log("test string: ", test_string); wsr.addRegion({ - channelIdx: num_regions, + channelIdx: num_regions + 1, 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)' + color: test_string + //color: 'hsla(' + percent_hue + '%, 100%, 50%, 0.1)' }); } @@ -141,14 +156,45 @@ function marker_view_reset(){ // //localStorage read/write/clear/etc -function localstorage_get() { - return JSON.stringify(localStorage); +function localstorage_post() { + console.log(JSON.stringify(localStorage)); } -function localstorage_write(data) { - Object.keys(data).forEach( function(key) { - localStorage.setItem(key, data[key]) +//NOTE: does not upload any audio files. +//Audio is exclusively contained to your local machine, and is populated via drag-and-drop operation +function file_write_to_server() {} +function file_read_from_server() {} + +function localstorage_write() { + const all_regions = wsr.getRegions(); + + all_regions.forEach(function (region) { + const key = region.channelIdx; + const value = region.content; + localStorage.setItem(key, value); + console.log("storing", key, "with a value of", value); }); + +} + +function localstorage_read(file) { + //set num_regions var here + let inc = 0; + localStorage.clear(); + //some sort of initialization for program needed here + const ls_json = JSON.stringify(localStorage); + + for(var key in localStorage) { + let data = window.localStorage.getItem(key); + //set some local variable + inc++; + } + + num_regions = inc; + + console.log("reading", ls_json); + + } //------------------------------------------------------------- @@ -159,8 +205,8 @@ function initialize(){ ws = WaveSurfer.create({ container: '#waveform', - waveColor: 'hsla(184, 32%, 72%, 0.5)', - progressColor: 'hsla(184, 0%, 72%, 0.5)', + waveColor: 'hsla(0, 0%, 12%, 0.8)', + progressColor: 'hsla(0, 0%, 25%, 0.5)', url: filepath /* , plugins: [ @@ -173,18 +219,36 @@ function initialize(){ //wsr = window.WaveSurfer.regions; wsr = ws.registerPlugin(WaveSurfer.Regions.create()) + const wf = document.getElementById("waveform"); + + //append a div for the display of percentage loaded + const percent_elem = document.createElement("div"); + percent_elem.id = "percent"; + percent_elem.align = "center"; + wf.appendChild(percent_elem); + ws.on('ready', function (){ console.log("wavesurfer ready."); }); //put a text element over the ws while this is loading ws.on('loading', (percent) => { - console.log('loading', percent, '%'); + //console.log('loading', percent, '%'); + if(percent < 100){ + percent_elem.innerHTML = `

${percent}%

`; + } else { + const perc = document.getElementById("percent"); + if(perc !== null){ + wf.removeChild(perc); + } + } + }); ws.on('click', (relativeX) => { + ws.pause(); ws.seekTo(relativeX); - ws.play(); + //ws.play(); buttons_reset(); marker_view_reset(); }); @@ -202,7 +266,6 @@ function initialize(){ if(looping === true) { active_region.play(); } - } }); @@ -219,22 +282,22 @@ function initialize(){ e.stopPropagation(); active_region = region; - active_region.loop = looping; + //active_region.loop = looping; active_region.play(); - - //this doesn't work as far as I can tell - //region.play(region.start, region.end); + //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 - - console.log("----------------------------------------------------------"); console.log("a region with id", region.channelIdx, "was clicked."); console.log("region range:", region.start, region.end); //console.log("this region's text:", region.content.innerHTML); }); + wsr.on('region-out', (region) => { + //e.stopPropagation(); + console.log("region-out detected from" + region.channelIdx + "... try to implement a loop function here"); + }); + //key events ----------------------------------------------------------------- // @@ -268,7 +331,9 @@ function initialize(){ clicked: false, call_action: function(){ btn_r_reset(); + cue_select(i); //console.log('recall button', i, 'clicked'); + }, }; btn_r.push(temp); @@ -337,6 +402,14 @@ function initialize(){ call_action: function () { add_1_region(); } + }, + { + id: "save", + text: "save your work", + clicked: false, + call_action: function () { + localstorage_write(); + }, } ]; } @@ -492,18 +565,9 @@ function buttons_make() { //marker text text_butt.addEventListener('mousedown', () => { + console.log("the text entered was", text_input.value); -/* - let valid; - if(active_region != null){ - valid = true; - } else { - valid = false; - } - console.log("is active region valid?:", valid); - */ - if(active_region != null){ console.log("found active region; populating..."); active_region.content.innerHTML = text_input.value; @@ -511,6 +575,7 @@ function buttons_make() { text_butt.classList.add('clicked'); }); + text_butt.addEventListener('mouseup', () => { text_butt.classList.remove('clicked'); }); -- 2.34.1