Ajouter une région au double click

[NinaP48]

Bonjour, j'essaie de reproduire la forme d'onde inspirée de Timeline Notches. Cependant je souhaiterais qu'une région se crée lors du double click de la forme d'onde. Je ne sais pas implémenter cela. Merci d'avance à ceux qui pourront me répondre.

Voici mon code javascript :

'use strict';
// Create an instance
var wavesurfer;

function formatTimeCallback(seconds, pxPerSec) {
seconds = Number(seconds);
let minutes = Math.floor(seconds / 60);
seconds = seconds % 60;

// fill up seconds with zeroes
let 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;

}

function timeInterval(pxPerSec) {
let 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;
}

function primaryLabelInterval(pxPerSec) {
let 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;
}

function secondaryLabelInterval(pxPerSec) {
// draw one every 10s as an example
return Math.floor(10 / timeInterval(pxPerSec));
}

// Init & load audio file
document.addEventListener('DOMContentLoaded', function() {
// Init
wavesurfer = WaveSurfer.create({
container: document.querySelector('#waveform'),
waveColor: '#A8DBA8',
progressColor: '#3B8686',
backend: 'MediaElement',
plugins: [
WaveSurfer.timeline.create({
container: '#timeline',
formatTimeCallback: formatTimeCallback,
timeInterval: timeInterval,
primaryLabelInterval: primaryLabelInterval,
secondaryLabelInterval: secondaryLabelInterval,
primaryColor: 'blue',
secondaryColor: 'red',
primaryFontColor: 'blue',
secondaryFontColor: 'red'
})
]
});

// Load audio from URL
wavesurfer.load('ReveilDesOiseaux.wav');

wavesurfer.on('error', function(e) {
    console.warn(e);
});

// Zoom slider
let slider = document.querySelector('[data-action="zoom"]');

slider.value = wavesurfer.params.minPxPerSec;
slider.min = wavesurfer.params.minPxPerSec;

slider.addEventListener('input', function() {
    wavesurfer.zoom(Number(this.value));
});

// Play button
let button = document.querySelector('[data-action="play"]');

button.addEventListener('click', wavesurfer.playPause.bind(wavesurfer));

});

[NinaP48]

J'ai fini par trouver la solution, si cela peut servir à quelqu'un :

document.addEventListener('dblclick', wavesurfer.addPlugin(
WaveSurfer.regions.create({
start: 0,
end: 5,
dragSelection: {
slop: 5
}
})).initPlugin('regions'));

Je m'étais trompée en appelant la méthode addEventListener sur un élément qui ne possède pas la méthode.

[prakharpbuf]

Le code que vous avez créera une région si vous double-cliquez n'importe où sur votre page Web. Je voulais faire la même chose: ajouter une région en double-cliquant sur la forme d'onde, je l'ai fait en appelant wavesurfer.drawer.on('dblclick', callback)

The code you have will create a region if you double click anywhere on your web page. I wanted to do the same thing: add a region on double click on waveform, I did it by calling wavesurfer.drawer.on('dblclick', callback)