-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();
// ws.load('/some/path/to/wave.wav');
//
-
-
//function file_to_server() {
//let dictstr = JSON.stringify(global_dict);
//fs = new File("media/test.json", dictstr);
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)'
});
}
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;
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);
function initialize(){
- activeregion = null;
+ active_region = null;
ws = WaveSurfer.create({
container: '#waveform',
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();
+ }
+
+ }
});
/*
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
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());
}
});
//
//generate cue marker section
- for(let i=0; i<num_slots; i++){
+ for(let i = 0; i < num_storage_slots; i++){
let temp = {
id: "button-" + i,
text: (i + 1),
text: "remove selected",
clicked: false,
call_action: function () {
- activeregion.remove();
- activeregion = null;
+ active_region.remove();
+ active_region = null;
num_regions--;
console.log('num_regions is now:', num_regions);
},
},
{
- id: "generate",
+ id: "clear",
+ text: "clear markers",
+ clicked: false,
+ call_action: function () {
+ clear_regions();
+ },
+ },
+ {
+ id: "genN",
text: "generate markers",
clicked: false,
call_action: function () {
- clear_regions();
add_3_regions();
},
},
{
- id: "clear",
- text: "clear markers",
+ id: "gen1",
+ text: "generate 1 marker",
clicked: false,
call_action: function () {
- clear_regions();
- },
+ add_1_region();
+ }
}
];
}
cont_tp.appendChild(button_elem);
});
- timedisp = document.createElement("div");
+ const timedisp = document.createElement("div");
timedisp.id = "timedisp";
timedisp.clicked = false;
timedisp.classList.add("buttons");
timedisp.innerHTML = '<h2>00:00:00</h2>';
+ timevalues = timedisp.firstChild;
cont_tp.appendChild(timedisp);
-
//cue marker area -----------------------------------------------------
btn_r.forEach((button) => {
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;
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');
git.dabkitsch.com / m29-web-sfp.git / commitdiff