Congegni
/
libretime
mirror of https://github.com/libretime/libretime.git
7
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
libretime/legacy/public/js/wavesurfer/libretime.js

475 lines
16 KiB
JavaScript
Raw Permalink Blame History

'use strict';
var wavesurfer = [];
window.addEventListener("load",()=>{
let op=window.inputKnobsOptions||{};
op.sliderWidth=op.sliderWidth||op.sliderDiameter||128;
op.sliderHeight=op.sliderHeight||op.sliderDiameter||20;
op.fgcolor=op.fgcolor||"#f00";
op.bgcolor=op.bgcolor||"#000";
op.sliderMode=op.sliderMode||"relative";
let styles=document.createElement("style");
styles.innerHTML=
`input[type=range].input-slider{
-webkit-appearance:none;
-moz-appearance:none;
border:none;
box-sizing:border-box;
overflow:hidden;
background-repeat:no-repeat;
background-size:100% 100%;
background-position:0px 0%;
background-color:transparent;
touch-action:none;
}
input[type=range].input-slider{
width:${op.sliderWidth}px; height:${op.sliderHeight}px;
}
input[type=range].input-slider::-webkit-slider-thumb{
-webkit-appearance:none;
opacity:0;
}
input[type=range].input-slider::-moz-range-thumb{
-moz-appearance:none;
height:0;
border:none;
}
input[type=range].input-slider::-moz-range-track{
-moz-appearance:none;
height:0;
border:none;
}`;
document.head.appendChild(styles);
let makeHSliderFrames=(fr,fg,bg,w,h)=>{
let r=
`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="${w}" height="${fr*h}" viewBox="0 0 ${w} ${fr*h}" preserveAspectRatio="none">
<defs><g id="B"><rect x="0" y="0" width="${w}" height="${h}" rx="${h/2}" ry="${h/2}" fill="${bg}"/></g>
<g id="K"><circle x="${w/2}" y="0" r="${h/2*0.9}" fill="${fg}"/></g></defs>`;
for(let i=0;i<fr;++i){
r+=`<use xlink:href="#B" transform="translate(0,${h*i})"/>`;
r+=`<use xlink:href="#K" transform="translate(${h/2+(w-h)*i/100},${h/2+h*i})"/>`;
}
return r+"</svg>";
}
let initKnobs=(el)=>{
let w,h,d,fg,bg;
if(el.inputKnobs){
el.redraw();
return;
}
let ik=el.inputKnobs={};
el.refresh=()=>{
d=+el.getAttribute("data-diameter");
let st=document.defaultView.getComputedStyle(el,null);
w=parseFloat(el.getAttribute("data-width")||d||st.width);
h=parseFloat(el.getAttribute("data-height")||d||st.height);
bg=el.getAttribute("data-bgcolor")||op.bgcolor;
fg=el.getAttribute("data-fgcolor")||op.fgcolor;
ik.sensex=ik.sensey=200;
ik.sensex=w-h;
ik.sensey=Infinity;
el.style.backgroundSize="auto 100%";
el.style.width=w+"px";
el.style.height=h+"px";
ik.frameheight=h;
let src=el.getAttribute("data-src");
if(src){
el.style.backgroundImage=`url(${src})`;
let sp=+el.getAttribute("data-sprites");
if(sp)
ik.sprites=sp;
else
ik.sprites=0;
if(ik.sprites>=1)
el.style.backgroundSize=`100% ${(ik.sprites+1)*100}%`;
el.style.backgroundColor=bg;
el.style.borderRadius=Math.min(w,h)*0.25+"px";
}
else{
let svg=makeHSliderFrames(101,fg,bg,w,h);
ik.sprites=100;
el.style.backgroundImage="url(data:image/svg+xml;base64,"+btoa(svg)+")";
el.style.backgroundSize=`100% ${(ik.sprites+1)*100}%`;
}
ik.valrange={min:+el.min, max:(el.max=="")?100:+el.max, step:(el.step=="")?1:+el.step};
el.redraw(true);
};
el.setValue=(v)=>{
v=(Math.round((v-ik.valrange.min)/ik.valrange.step))*ik.valrange.step+ik.valrange.min;
if(v<ik.valrange.min) v=ik.valrange.min;
if(v>ik.valrange.max) v=ik.valrange.max;
el.value=v;
if(el.value!=ik.oldvalue){
el.setAttribute("value",el.value);
el.redraw();
let event=document.createEvent("HTMLEvents");
event.initEvent("input",false,true);
el.dispatchEvent(event);
ik.oldvalue=el.value;
}
};
ik.pointerdown=(ev)=>{
el.focus();
if(ev.touches)
ev = ev.touches[0];
let rc=el.getBoundingClientRect();
let cx=(rc.left+rc.right)*0.5,cy=(rc.top+rc.bottom)*0.5;
let dx=ev.clientX,dy=ev.clientY;
if(op.sliderMode=="abs"){
dv=(ik.valrange.min+ik.valrange.max)*0.5+((dx-cx)/ik.sensex-(dy-cy)/ik.sensey)*(ik.valrange.max-ik.valrange.min);
el.setValue(dv);
}
ik.dragfrom={x:ev.clientX,y:ev.clientY,a:Math.atan2(ev.clientX-cx,cy-ev.clientY),v:+el.value};
document.addEventListener("mousemove",ik.pointermove);
document.addEventListener("mouseup",ik.pointerup);
document.addEventListener("touchmove",ik.pointermove);
document.addEventListener("touchend",ik.pointerup);
document.addEventListener("touchcancel",ik.pointerup);
document.addEventListener("touchstart",ik.preventScroll);
ev.preventDefault();
ev.stopPropagation();
};
ik.pointermove=(ev)=>{
let dv;
let rc=el.getBoundingClientRect();
let cx=(rc.left+rc.right)*0.5,cy=(rc.top+rc.bottom)*0.5;
if(ev.touches)
ev = ev.touches[0];
let dx=ev.clientX-ik.dragfrom.x,dy=ev.clientY-ik.dragfrom.y;
dv=(dx/ik.sensex-dy/ik.sensey)*(ik.valrange.max-ik.valrange.min);
if(ev.shiftKey)
dv*=0.2;
el.setValue(ik.dragfrom.v+dv);
};
ik.pointerup=()=>{
document.removeEventListener("mousemove",ik.pointermove);
document.removeEventListener("touchmove",ik.pointermove);
document.removeEventListener("mouseup",ik.pointerup);
document.removeEventListener("touchend",ik.pointerup);
document.removeEventListener("touchcancel",ik.pointerup);
document.removeEventListener("touchstart",ik.preventScroll);
let event=document.createEvent("HTMLEvents");
event.initEvent("change",false,true);
el.dispatchEvent(event);
};
ik.preventScroll=(ev)=>{
ev.preventDefault();
};
ik.keydown=()=>{
el.redraw();
};
ik.wheel=(ev)=>{
let delta=ev.deltaY>0?-ik.valrange.step:ik.valrange.step;
if(!ev.shiftKey)
delta*=5;
el.setValue(+el.value+delta);
ev.preventDefault();
ev.stopPropagation();
};
el.redraw=(f)=>{
if(f||ik.valueold!=el.value){
let v=(el.value-ik.valrange.min)/(ik.valrange.max-ik.valrange.min);
if(ik.sprites>=1)
el.style.backgroundPosition="0px "+(-((v*ik.sprites)|0)*ik.frameheight)+"px";
else
el.style.backgroundPosition=((w-h)*v)+"px 0px";
ik.valueold=el.value;
}
};
el.refresh();
el.redraw(true);
el.addEventListener("keydown",ik.keydown);
el.addEventListener("mousedown",ik.pointerdown);
el.addEventListener("touchstart",ik.pointerdown);
el.addEventListener("wheel",function (event){ event.stopPropagation(); }); //previous: el.addEventListener("wheel",ik.wheel); Maybe optional, can accidently move knob if allowed
el.addEventListener("click",function (event){ event.stopPropagation(); });
}
let refreshque=()=>{
let elem=document.querySelectorAll("input.input-slider");
for(let i=0;i<elem.length;++i)
procque.push([initKnobs,elem[i]]);
}
let procque=[];
refreshque();
setInterval(()=>{
for(let i=0;procque.length>0&&i<8;++i){
let q=procque.shift();
q[0](q[1]);
}
if(procque.length<=0)
refreshque();
},50);
});
// Used for converting back to HH-MM-SS, Cuein and Cueout
function toHHMMSS(secs) {
let totalSeconds = secs;
let hours = Math.floor(totalSeconds / 3600);
totalSeconds %= 3600;
let minutes = Math.floor(totalSeconds / 60);
let seconds = totalSeconds % 60;
// If you want strings with leading zeroes:
minutes = String(minutes).padStart(2, "0");
hours = String(hours).padStart(2, "0");
seconds = String(seconds).padStart(2, "0");
return(hours + ":" + minutes + ":" + seconds.slice(0, 6));
}
//outputs gain percentage from decibels
function deciNum(value){
const decibels = Math.exp(value / 8.6858);
return 50 * decibels;
}
//outputs decibel from gain
function gainNum(perc, minDb, maxDb, minP, maxP){
const getPerc = (db) => (Math.round(1000000000 * Math.pow(10, db / 20)) / 10000000);
const maxPerc = maxP || (_.isNumber(maxDb) && getPerc(maxDb)) || 100;
const minPerc = minP || (_.isNumber(minDb) && getPerc(minDb)) || 0;
const range = maxPerc - minPerc;
const newPerc = (range / 50) * perc;
const total = Math.round(1000000000 * 20 * (Math.log(newPerc * 0.01) / Math.log(10))) / 1000000000;
return total.toFixed(2);
}
//outputs steps from decibels
function deciSteps(value){
//convert decibel to gain/percent
const percent = deciNum(value);
var result = percent / 100;
return result;
}
function formatTimeCallback(seconds, pxPerSec) {
seconds = Number(seconds);
//alert(seconds);
var minutes = Math.floor(seconds / 60);
seconds = seconds % 60;
// fill up seconds with zeroes
var secondsStr = Math.round(seconds).toString();
if (pxPerSec >= 25 * 10) {
secondsStr = seconds.toFixed(2);
} else if (pxPerSec >= 25 * 1) {
secondsStr = seconds.toFixed(1);
}
if (minutes > 0) {
if (seconds < 10) {
secondsStr = '0' + secondsStr;
}
return `${minutes}:${secondsStr}`;
}
return secondsStr;
}
/**
* Use timeInterval to set the period between notches, in seconds,
* adding notches as the number of pixels per second increases.
*
* Note that if you override the default function, you'll almost
* certainly want to override formatTimeCallback, primaryLabelInterval
* and/or secondaryLabelInterval so they all work together.
*
* @param: pxPerSec
*/
function timeInterval(pxPerSec) {
var retval = 1;
if (pxPerSec >= 25 * 100) {
retval = 0.01;
} else if (pxPerSec >= 25 * 40) {
retval = 0.025;
} else if (pxPerSec >= 25 * 10) {
retval = 0.1;
} else if (pxPerSec >= 25 * 4) {
retval = 0.25;
} else if (pxPerSec >= 25) {
retval = 1;
} else if (pxPerSec * 5 >= 25) {
retval = 5;
} else if (pxPerSec * 15 >= 25) {
retval = 15;
} else {
retval = Math.ceil(0.5 / pxPerSec) * 60;
}
return retval;
}
/**
* Return the cadence of notches that get labels in the primary color.
* EG, return 2 if every 2nd notch should be labeled,
* return 10 if every 10th notch should be labeled, etc.
*
* Note that if you override the default function, you'll almost
* certainly want to override formatTimeCallback, primaryLabelInterval
* and/or secondaryLabelInterval so they all work together.
*
* @param pxPerSec
*/
function primaryLabelInterval(pxPerSec) {
var retval = 1;
if (pxPerSec >= 25 * 100) {
retval = 10;
} else if (pxPerSec >= 25 * 40) {
retval = 4;
} else if (pxPerSec >= 25 * 10) {
retval = 10;
} else if (pxPerSec >= 25 * 4) {
retval = 4;
} else if (pxPerSec >= 25) {
retval = 1;
} else if (pxPerSec * 5 >= 25) {
retval = 5;
} else if (pxPerSec * 15 >= 25) {
retval = 15;
} else {
retval = Math.ceil(0.5 / pxPerSec) * 60;
}
return retval;
}
/**
* Return the cadence of notches to get labels in the secondary color.
* EG, return 2 if every 2nd notch should be labeled,
* return 10 if every 10th notch should be labeled, etc.
*
* Secondary labels are drawn after primary labels, so if
* you want to have labels every 10 seconds and another color labels
* every 60 seconds, the 60 second labels should be the secondaries.
*
* Note that if you override the default function, you'll almost
* certainly want to override formatTimeCallback, primaryLabelInterval
* and/or secondaryLabelInterval so they all work together.
*
* @param pxPerSec
*/
function secondaryLabelInterval(pxPerSec) {
// draw one every 10s as an example
return Math.floor(10 / timeInterval(pxPerSec));
}
function renderWaveform(track_id, selector_id, url, cuein, cueout) {
var trackid = "t"+track_id;
var a = cuein.split(':'); // split it at the colons
var b = cueout.split(':'); // split it at the colons
var startseconds = (+a[0]) * 60 * 60 + (+a[1]) * 60 + (+a[2]);
var endseconds = (+b[0]) * 60 * 60 + (+b[1]) * 60 + (+b[2]);
$('#track-playedit-'+track_id).attr('onClick', 'wavesurfer["'+ trackid +'"].play('+ startseconds +', '+endseconds+');');
wavesurfer[trackid] = WaveSurfer.create({
container: document.querySelector(selector_id),
waveColor: 'hsla(0, 0%, 50%, 0.8)',
backgroundColor: '#333',
progressColor: 'hsla(0, 0%, 0%, 0)',
backend: 'MediaElementWebAudio',
height: 70,
cursorColor: '#ccc',
cursorWidth: 1,
responsive: true,
scrollParent: true,
minimap: true,
autoCenter: true,
splitChannels: true,
plugins: [
WaveSurfer.regions.create({
regions: [
{
id: track_id,
start: startseconds,
end: endseconds,
loop: false,
drag: false,
color: 'hsla(232, 64%, 50%, 0.2)',
handleStyle: {
left: {
backgroundColor: '#00e640',
width: '2px',
},
right: {
backgroundColor: '#f22613',
width: '2px',
},
},
}
]
}),
WaveSurfer.timeline.create({
container: "#timeline-"+ track_id,
formatTimeCallback: formatTimeCallback,
timeInterval: timeInterval,
primaryLabelInterval: primaryLabelInterval,
secondaryLabelInterval: secondaryLabelInterval,
primaryColor: '#ff611f',
secondaryColor: '#cccccc',
primaryFontColor: '#ff611f',
secondaryFontColor: '#cccccc'
})
]
});
var eTrack = wavesurfer[trackid];
eTrack.load(url);
// Zoom slider
var slider = document.querySelector('[data-action="zoom-'+track_id+'"]');
slider.value = eTrack.params.minPxPerSec;
slider.min = eTrack.params.minPxPerSec;
slider.addEventListener('input', function() {
eTrack.zoom(Number(this.value));
});
document.getElementById('tracktimerinput-'+track_id).value='0.000';
eTrack.on('audioprocess', function (e) {
document.getElementById('tracktimerinput-'+track_id).value=(eTrack.getCurrentTime().toFixed(3));
});
var playPause = document.getElementById('track-play-'+track_id);
eTrack.on('play', function () {
//var playButton = document.getElementById('track-play-'+track_id);
playPause.style.backgroundColor = "#32CD32";
});
eTrack.on('pause', function () {
//var pauseButton = document.getElementById('track-play-'+track_id);
playPause.style.backgroundColor = "#555555";
});
eTrack.on('error', function(e) {
console.warn(e);
});
function saveCue() {
var region = eTrack.regions.list[track_id];
document.getElementsByClassName("cuein_"+track_id)[0].value = toHHMMSS(region.start);
document.getElementsByClassName("cueout_"+track_id)[0].value = toHHMMSS(region.end);
$('#track-playedit-'+track_id).attr('onClick', 'wavesurfer["t'+ track_id +'"].play('+ region.start +', '+ region.end +');');
return {
start: region.start,
end: region.end
};
}
eTrack.on('ready', () => {
eTrack.on('region-update-end', saveCue);
});
eTrack.on('region-in', function(e) {
document.getElementById('tracktimerinput-'+track_id).style.color = "rgb(56, 232, 56)";
});
eTrack.on('region-out', function(e) {
document.getElementById('tracktimerinput-'+track_id).style.color = "#ffffff";
});
//Volume to Gain deciSteps(gainNum(gain_level))
eTrack.setVolume(0.6);
return eTrack;
}
Reference in New Issue View Git Blame Copy Permalink