jQuery.storedPeaks=[];
function qtWaveformDebug(m){
if(jQuery('#qtmusicplayer').data('debug')){
var c=jQuery("#qtmPlayerDebugger");
if(c.length > 0){
c.append(m+'<br>');
}}
}
var qtDrawAudio=url=> {
if(jQuery('#qtmplayerWaveform').length <=0){
return;
}
window.AudioContext=window.AudioContext||window.webkitAudioContext;
const audioContext=new AudioContext();
jQuery('#qtmplayerWaveform canvas').remove();
jQuery('#qtmplayerWaveform').append('<canvas id="qtwaveformOriginal"></canvas><canvas id="qtwaveformClone"></canvas>');
jQuery.qtmplayerCanvas=jQuery('#qtmplayerWaveform #qtwaveformOriginal');
jQuery.qtmplayerCanvasClone=jQuery('#qtmplayerWaveform #qtwaveformClone');
jQuery.qtmplayerCanvasColor=jQuery('#qtmplayerWaveform').data('qtmplayer-color');
jQuery.qtmplayerCanvasCloneColor=jQuery('#qtmplayerWaveform').data('qtmplayer-color-clone');
jQuery('#qtmplayerTrackControl canvas').css({position: "absolute", 'top':0,'left':0,'width':'100%','height':'100%'});
if(undefined===jQuery.storedPeaks[url]){
var storedSongPeaks=false;
jQuery.ajax({
type: "post",
url: qtmplayer_ajax_var.url,
data: {
'action': 'qtmplayer-get-peaks',
'nonce': qtmplayer_ajax_var.peaksnonce,
'url': url
},
success: function(response){
if(!response||response==''||response==null){
fetch(url)
.then(response=> response.arrayBuffer())
.then(arrayBuffer=> audioContext.decodeAudioData(arrayBuffer))
.then(audioBuffer=> draw(url,normalizeData(filterData(audioBuffer)),true));
}else{
var peaks=jQuery.parseJSON(response);
jQuery.storedPeaks[url]=peaks;
draw(url, peaks, false);
}},
fail: function(e){
console.log(e);
}});
}else{
draw(url, jQuery.storedPeaks[url], false);
}};
var filterData=audioBuffer=> {
const rawData=audioBuffer.getChannelData(0);
let samples=120;
if(jQuery('#qtmplayer').data('qtmplayer-detailedwaveform')==1){
samples=271;
}
const blockSize=Math.floor(rawData.length / samples);
const filteredData=[];
for (let i=0; i < samples; i++){
let blockStart=blockSize * i;
let sum=0;
for (let j=0; j < blockSize; j++){
sum=sum + Math.abs(rawData[blockStart + j]);
}
filteredData.push(sum / blockSize);
}
return filteredData;
};
var normalizeData=filteredData=> {
const multiplier=Math.pow(Math.max(...filteredData), -1);
let normalized=filteredData.map(n=> (n *  multiplier).toFixed(2));
return normalized;
}
const drawDetail=(url, normalizedData, storeData)=> {
const dpr=window.devicePixelRatio||1;
const gap=1;
const padding=1;
let x;
jQuery.storedPeaks[url]=normalizedData;
const canvas=jQuery.qtmplayerCanvas[0];;
canvas.width=canvas.offsetWidth * dpr;
canvas.height=(canvas.offsetHeight + padding * 2) * dpr;
const ctx=canvas.getContext("2d");
ctx.scale(dpr, -dpr);
ctx.translate(0, - canvas.offsetHeight - padding- padding);
const width=(canvas.offsetWidth / normalizedData.length).toFixed(3);
ctx.beginPath();
ctx.moveTo(0, 0);
for(let i=0; i < normalizedData.length; i++){
let x=width * i;
let height=normalizedData[i] * canvas.offsetHeight - padding +2;
ctx.moveTo(x, 0);
ctx.lineTo(x, height);
ctx.lineTo(Math.round(width - gap + x)  , height);
ctx.lineTo(Math.round(width - gap + x), 0);
ctx.lineTo(Math.round(width + x) , 0);
}
ctx.moveTo(0, 0);
ctx.fillStyle=jQuery.qtmplayerCanvasColor;
ctx.fill();
const canvasClone=jQuery.qtmplayerCanvasClone[0];//document.querySelector("canvas");
canvasClone.width=canvasClone.offsetWidth * dpr;
canvasClone.height=(canvasClone.offsetHeight + padding * 2) * dpr;
let ctxClone=canvasClone.getContext("2d");
ctxClone.scale(dpr, -dpr);
ctxClone.translate(0, - canvasClone.offsetHeight - padding - padding);
ctxClone.beginPath();
ctxClone.moveTo(0, 0);
for(let i=0; i < normalizedData.length; i++){
let x=width * i;
let height=normalizedData[i] * canvas.offsetHeight - padding +2;
ctxClone.moveTo(x, 0);
ctxClone.lineTo(x, height);
ctxClone.lineTo(Math.round(width - gap + x)  , height);
ctxClone.lineTo(Math.round(width - gap + x), 0);
ctxClone.lineTo(Math.round(width + x) , 0);
}
ctxClone.moveTo(0, 0);
ctxClone.fillStyle=jQuery.qtmplayerCanvasCloneColor;
ctxClone.fill();
let trackContainer=jQuery('[data-qtmplayer-file="'+url+'"]').closest('.qtmplayer-track-inpage');
if(trackContainer.length > 0){
trackContainer.each(function(i,c){
var thisTrackContainer=jQuery(c);
thisTrackContainer.find('canvas').remove();
thisTrackContainer.css({'position':'relative'}).append('<canvas>');
jQuery.qtmplayeCurrentCanvas=thisTrackContainer.find('canvas');
jQuery.qtmplayeCurrentCanvas.css({"position": "absolute", "top": 0, "left": '0', "width": "100%", "height": "100%", 'background':'transparent', 'pointer-events':'none'});
var canvasC=jQuery.qtmplayeCurrentCanvas[0];
canvasC.width=canvasC.offsetWidth * dpr;
canvasC.height=(canvasC.offsetHeight + padding * 2) * dpr;
var ctxC=canvasC.getContext("2d");
ctxC.scale(dpr, -dpr);
ctxC.translate(0, - canvasC.offsetHeight - padding- padding);
var widthC=(canvasC.offsetWidth / normalizedData.length).toFixed(1) ;
ctxC.beginPath();
ctxC.moveTo(0, 0);
for(let i=0; i < normalizedData.length; i++){
let x=widthC * i;
let height=normalizedData[i] * canvasC.offsetHeight - padding + 3;
ctxC.moveTo(x, 0);
ctxC.lineTo(x, height);
ctxC.lineTo(Math.round(widthC - gap + x)  , height);
ctxC.lineTo(Math.round(widthC - gap + x), 0);
ctxC.lineTo(widthC + x , 0);
}
ctxC.moveTo(0, 0);
ctxC.fillStyle="rgba(210,210,210,0.5)";
ctxC.fill();
});
}
if(true==storeData){
jQuery.ajax({
type: "post",
url: qtmplayer_ajax_var.url,
data: {
'action': 'qtmplayer-store-peaks',
'nonce': qtmplayer_ajax_var.peaksnonce,
'url': url,
'peaks': normalizedData
},
success: function(response){
return true;
},
fail: function(e){
console.log(e);
return false;
}});
}};
var drawLineSegment=(ctx, x, height, width, isEven, color)=> {
ctx.lineWidth=1;
ctx.strokeStyle=color;
ctx.beginPath();
height=isEven ? height:-height;
ctx.moveTo(x, 0);
ctx.lineTo(x, height);
ctx.arc(x + width / 2, height, width / 2, Math.PI, 0, isEven);
ctx.lineTo(x + width, 0);
ctx.stroke();
};
var draw=(url, normalizedData, storeData)=> {
const UseDetailWaveform=jQuery('#qtmplayer').data('qtmplayer-detailedwaveform');
if(UseDetailWaveform==1){
drawDetail(url, normalizedData, storeData);
return;
}
const canvas=jQuery.qtmplayerCanvas[0];//document.querySelector("canvas");
const dpr=window.devicePixelRatio||1;
const padding=14;
canvas.width=canvas.offsetWidth * dpr;
canvas.height=(canvas.offsetHeight + padding * 2) * dpr;
const ctx=canvas.getContext("2d");
ctx.scale(dpr, dpr);
ctx.translate(0, canvas.offsetHeight / 2 + padding);
const width=canvas.offsetWidth / normalizedData.length;
jQuery.storedPeaks[url]=normalizedData;
if(true==storeData){
jQuery.ajax({
type: "post",
url: qtmplayer_ajax_var.url,
data: {
'action': 'qtmplayer-store-peaks',
'nonce': qtmplayer_ajax_var.peaksnonce,
'url': url,
'peaks': normalizedData
},
success: function(response){
return true;
},
fail: function(e){
console.log(e);
return false;
}});
}
for (let i=0; i < normalizedData.length; i++){
const x=width * i;
let height=normalizedData[i] * canvas.offsetHeight - padding;
if(height < 0){
height=0;
}else if(height > canvas.offsetHeight / 2){
height=height > canvas.offsetHeight / 2;
}
drawLineSegment(ctx, x, height, width, (i + 1) % 2, jQuery.qtmplayerCanvasColor);
}
const canvasClone=jQuery.qtmplayerCanvasClone[0];//document.querySelector("canvas");
canvasClone.width=canvasClone.offsetWidth * dpr;
canvasClone.height=(canvasClone.offsetHeight + padding * 2) * dpr;
const ctxClone=canvasClone.getContext("2d");
ctxClone.scale(dpr, dpr);
ctxClone.translate(0, canvas.offsetHeight / 2 + padding);
for(let i=0; i < normalizedData.length; i++){
const x=width * i;
let height=normalizedData[i] * canvas.offsetHeight - padding;
if(height < 0){
height=0;
}else if(height > canvas.offsetHeight / 2){
height=height > canvas.offsetHeight / 2;
}
drawLineSegment(ctxClone, x, height, width, (i + 1) % 2, jQuery.qtmplayerCanvasCloneColor);
}};
var drawLineSegment=(ctx, x, height, width, isEven, color)=> {
ctx.lineWidth=1;
ctx.strokeStyle=color;
ctx.beginPath();
height=isEven ? height:-height;
ctx.moveTo(x, 0);
ctx.lineTo(x, height);
ctx.arc(x + width / 2, height, width / 2, Math.PI, 0, isEven);
ctx.lineTo(x + width, 0);
ctx.stroke();
};