const num_slots = 16;
let num_regions = 0;
-let phase;
-let curr_region = -1;
-//let filepath = "media/basic-break.wav";
+//let curr_region = null;
let filepath = "media/Berio-criesoflondon.wav";
let global_dict = new Object();
-let text_input, text_butt;
+let activeregion = null;
+let text_input, text_butt, timedisp;
let btn_r = [];
let btn_tp = [];
let btn_misc = [];
//
+
+//function file_to_server() {
+ //let dictstr = JSON.stringify(global_dict);
+ //fs = new File("media/test.json", dictstr);
+ //fs.writeFile();
+//}
+
+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){
+ return (phase - imn) * (omx - omn) / (imx - imn) + omn;
+}
+
function add_one_region() {
const dur = ws.getDuration();
//let randstart = (Math.random() * dur) - pad;
//let randend = randstart + 3;
num_regions++;
+ //console.log("adding a region with id", num_regions);
wsr.addRegion({
channelIdx: num_regions,
//id: "cue " + i,
id: 'region',
start: currtime,
- end: currtime + pad,
+ end: currtime + 2.,
loop: false,
color: 'hsla(184, 32%, 72%, 0.1)'
});
}
}
+function clear_regions() {
+ wsr.clearRegions();
+ num_regions = 0;
+}
+
function buttons_reset() {
btn_tp_reset();
btn_r_reset();
btn_m_reset();
- marker_view_reset();
+ //marker_view_reset();
}
function marker_view_reset(){
- curr_region = -1;
+ //curr_region = null;
+ activeregion = null;
text_input.value = "no marker selected";
}
function initialize(){
- let activeregion = null;
+ activeregion = null;
ws = WaveSurfer.create({
container: '#waveform',
ws.play();
buttons_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;
+ });
+ /*
wsr.on('region-updated', (region) => {
- console.log("a region with id", region.channelIdx, "was updated.");
- console.log("the new start:", region.start);
- console.log("the new end:", region.end);
+ //console.log("a region with id", region.channelIdx, "was updated.");
+ //console.log("the new start:", region.start);
+ //console.log("the new end:", region.end);
//do something here to update json or re-popuplate all marker data
});
+ */
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);
+
region.play();
buttons_reset();
-
text_input.value = region.content.innerHTML;
- curr_region = region.channelIdx; //zero-based
+ //curr_region = region.channelIdx; //zero-based
+
+ console.log("----------------------------------------------------------");
console.log("a region with id", region.channelIdx, "was clicked.");
- console.log("this region's start time is", region.start);
+ console.log("region range:", region.start, region.end);
//console.log("this region's text:", region.content.innerHTML);
});
"m3" : [14.9, 3., "m4 label"]
};
- text_input = document.getElementById("textinput");
- text_butt = document.getElementById("textsubmit");
-
- //marker text
- text_butt.addEventListener('click', () => {
- console.log("the text entered was", text_input.value);
-
- if(curr_region){
- //wsr[curr_region].content.innerHTML = text_input.value;
- //do stuff here to display region text
- }
-
- });
//interface data--------------------------------------------------------------
//
clicked: false,
call_action: function(){
btn_r_reset();
- console.log('recall button', i, 'clicked');
+ //console.log('recall button', i, 'clicked');
},
};
btn_r.push(temp);
btn_tp = [
{
- id: "button1",
+ id: "play",
text: "play/resume",
clicked: false,
call_action: function () {
},
},
{
- id: "button2",
+ id: "pause",
text: "pause",
clicked: false,
call_action: function () {
},
},
{
- id: "button3",
+ id: "stop",
text: "stop [+ cue]",
clicked: false,
call_action: function () {
];
btn_misc = [
+ {
+ id: "remove",
+ text: "remove selected",
+ clicked: false,
+ call_action: function () {
+ activeregion.remove();
+ activeregion = null;
+ num_regions--;
+ console.log('num_regions is now:', num_regions);
+ },
+ },
+
{
id: "generate",
text: "generate markers",
clicked: false,
call_action: function () {
- console.log("generate button clicked");
- wsr.clearRegions();
- num_regions = 0;
+ clear_regions();
add_3_regions();
},
},
text: "clear markers",
clicked: false,
call_action: function () {
- wsr.clearRegions();
- num_regions = 0;
+ clear_regions();
},
}
];
}
-function linear_map(phase, imn, imx, omn, omx){
- return (phase - imn) * (omx - omn) / (imx - imn) + omn;
-}
-
-function file_to_server() {
- //let dictstr = JSON.stringify(global_dict);
- //fs = new File("media/test.json", dictstr);
- //fs.writeFile();
-}
-
+//button functions ---------------------------------------------------
+//
//try to abstract this to be one function
function btn_tp_reset() {
}
function btn_m_reset() {
- console.log('btn_m_reset() called');
+ //console.log('btn_m_reset() called');
btn_misc.forEach((button, index) => {
btn_misc[index].clicked = false;
cont_tp.appendChild(button_elem);
});
+
+ timedisp = document.createElement("div");
+ timedisp.id = "timedisp";
+ timedisp.clicked = false;
+ timedisp.classList.add("buttons");
+ timedisp.innerHTML = '<h2>00:00:00</h2>';
+ cont_tp.appendChild(timedisp);
+
//cue marker area -----------------------------------------------------
btn_r.forEach((button) => {
cont_misc.appendChild(button_elem);
});
+ //region properties
+ const check = document.getElementById("loop");
+
+ //marker interactions
+ text_input = document.getElementById("textinput");
+ text_butt = document.getElementById("textsubmit");
+
+ //marker text
+ text_butt.addEventListener('mousedown', () => {
+ console.log("the text entered was", text_input.value);
+
+/*
+ let valid;
+ if(activeregion != null){
+ valid = true;
+ } else {
+ valid = false;
+ }
+ console.log("is active region valid?:", valid);
+ */
+
+ if(activeregion != null){
+ console.log("found active region; populating...");
+ activeregion.content.innerHTML = text_input.value;
+ }
+
+ text_butt.classList.add('clicked');
+ });
+ text_butt.addEventListener('mouseup', () => {
+ text_butt.classList.remove('clicked');
+ });
+
}