Problème de position de curseur

[NinaP48]

Bonjour, j'ai codé une forme d'onde sonore similaire à l'exemple Timeline Notches. J'aimerais que lors d'un clic sur la forme d'onde, la lecture reprenne à l'endroit du clic. En effet, à l'heure actuelle peu importe où je clique sur ma forme d'onde sonore, la lecture reprend du début.

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',
scrollParent: true,
plugins: [
WaveSurfer.timeline.create({
container: '#timeline',
formatTimeCallback: formatTimeCallback,
timeInterval: timeInterval,
primaryLabelInterval: primaryLabelInterval,
secondaryLabelInterval: secondaryLabelInterval,
primaryColor: 'blue',
secondaryColor: 'red',
primaryFontColor: 'blue',
secondaryFontColor: 'red'
}),
WaveSurfer.cursor.create()
]
});

// 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 buttonPlayPause = document.querySelector('[data-action="play"]');

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


// Delete-region button

let buttonDeleteRegions = document.querySelector('[data-action="delete-region"]');

buttonDeleteRegions.addEventListener('click', clearRegions());   


// Ajout d'une région lors d'un clic glissé
document.addEventListener('click', wavesurfer.addPlugin(
    WaveSurfer.regions.create({
    start: 0, 
    end: 5, 
    dragSelection: {
        slop: 5
    }        
})).initPlugin('regions'));

// Joue la région cliquée
region.on('click', function() {
    region.play();
});

// Reprend la lecture à la position du curseur lors du clic

wavesurfer.on('click', function (event) {
    var mouseX = event.clientX - wavesurfer.container.getBoundingClientRect().left;
    var duration = wavesurfer.getDuration();
    var newPosition = (mouseX / wavesurfer.getWidth()) * duration;
    wavesurfer.seekTo(newPosition);
    wavesurfer.play();
  });

});

[prakharpbuf]

Le curseur ne va-t-il pas automatiquement à la position sur laquelle vous avez cliqué ? Je crois qu'il suffit d'appeler wavesurfer.play() au clic. Non?

Doesn't the cursor automatically go to the position you clicked? I believe calling wavesurfer.play() on click is sufficient. No?

[NinaP48]

cela ne fonctionne toujours pas, pourtant je ne vois pas ce qui force le curseur à repartir du début

[prakharpbuf]

Je ne comprends toujours pas pourquoi l'audio est lu depuis le début. Cela ne devrait pas être le cas, car le surfeur n'a pas d'événement "clic". Est-ce que ce "jeu depuis le début" vient d'ailleurs ?

I'm still confused why the audio plays from beginning though. It shouldn't, because wavesurfer does not have a 'click' event. Is that play from beginning coming from somewhere else?

[prakharpbuf]

il pourrait avoir à faire quelque chose avec le backend : 'MediaElement'

it might have to do something with backend: 'MediaElement'

[NinaP48]

je ne sais pas du tout, je débute totalement en Javascript

[prakharpbuf]

vous voulez créer un codepen afin que nous puissions voir le bogue en action ?

want to create a codepen so we can see the bug in action?

[prakharpbuf]

La façon dont je le vois en ce moment, je pense que le problème ici est très probablement que vous avez passé dans la fonction appels au lieu des fonctions de rappel où il attend une fonction de rappel.
Par exemple,

The way I see it right now, I think the problem here is most likely that you have passed in function calls instead of callback functions where it expects a callback function.
For example,

buttonDeleteRegions.addEventListener('click', clearRegions());

n'est pas la bonne façon d'écrire cela.
is not the correct way to write this.

buttonDeleteRegions.addEventListener('click', function() {
    clearRegions();
});  

est la bonne façon d'écrire cela.
is the correct way to write this.

En savoir plus sur les rappels
Learn more about callbacks

Essayez de résoudre ce problème partout dans votre code, le problème pourrait se résoudre de lui-même.
Try fixing this everywhere in your code, the problem might solve itself.

[NinaP48]

Bonjour, j'ai effectué les recommandations. Cependant, je pense avoir mal fait les choses car ma création et ma suppression de régions ne fonctionne plus correctement. Les zones se créent une fois sur 2 avec des opacités aléatoires, quand je clique sur le bouton supprimer cela baisse seulement l'opacité et quand je déplace une région celle-ci se duplique. Je début totalement en Javascript alors j'ai beaucoup de mal à comprendre mes erreurs, je m'en excuse.
Voici le lien du CodePen demandé. Cependant il ne fonctionne pas correctement.
https://codepen.io/Noux/pen/zYJmGKN

[prakharpbuf]

Génial! Je vois que vous avez presque tout corrigé correctement ! Regardez ce codepen:
https://codepen.io/ppaw/pen/dyqqqyM
J'ai fait trois changements ici :

1. J'ai changé wavesurfer.load('ReveilDesOiseaux.wav') sur la ligne 162 avec un autre fichier audio pour que codepen puisse réellement charger le fichier audio. ReveilDesOiseaux.wav est un fichier sur votre ordinateur local donc codepen ne peut pas l'atteindre.
2. ligne 219 : region.on('click', callback) Ici, la variable region n'est pas définie donc javascript ne peut pas la trouver. Je vois ce que vous voulez faire là, vous voulez qu'une région soit lue du début à la fin en boucle lorsqu'un utilisateur clique sur une région, n'est-ce pas ? Confirmez-le et nous y reviendrons dans un autre commentaire.
   Donc pour l'instant, je l'ai commenté.
3. ligne 206 où vous ajoutez le plug-in de régions au clic sur le document. Cette ligne est la source du problème où la région se duplique lorsque vous la déplacez. Ce qui se passe ici, c'est en fait que la région n'est pas dupliquée mais que plusieurs régions sont créées lorsque vous essayez de créer une région car le plug-in de régions a été instancié plusieurs fois (sur plusieurs clics de document). J'ai déplacé ce code là où nous faisons wavesurver.create ({}) cela devrait fonctionner correctement maintenant.

Awesome! I see that you have fixed mostly everything correctly! Look at this codepen:
https://codepen.io/ppaw/pen/dyqqqyM
I have made three changes here:

1. I switched wavesurfer.load('ReveilDesOiseaux.wav') on line 162 with another audio file so that codepen can actually get the audio file to load. ReveilDesOiseaux.wav is a file on your local computer so codepen can't reach it.
2. line 219: region.on('click', callback) Here, the variable region is not defined so JavaScript can't find it. I see what you want to do there, you want a region to play from start to end in a loop when a user clicks on a region, right? Confirm this and we will get back to it in another comment.
   So for now, I commented it out.
3. line 206 where you add the regions plugin on document click. This line is the source of the problem where the region duplicates when you move it. What happens here is actually that the region is not duplicated but multiple regions are created when you try to create one region because the regions plugin has been instantiated multiple times (on multiple document clicks) I have moved that code to where we do wavesurver.create({}) it should work just fine now.

[NinaP48]

En effet, pour la ligne 219 je souhaite qu'une région soit lue en boucle lorsque l'utilisateur clique dessus.

Pour la ligne 206 merci beaucoup, le curseur reprend à présent la lecture à l'endroit indiqué, merci infiniment. Cependant je ne comprends pas alors comment la création d'une région se déclenche.

[prakharpbuf]

Aucun problème!

Pour que la région soit lue en boucle lorsqu'un utilisateur clique dessus, vous pouvez ajouter :

  wavesurfer.on("region-click", (region) => {
    region.playLoop();
  });

Ici, wavesurfer a un événement appelé region-click qui se déclenche lorsque vous cliquez sur une région. sa fonction de rappel reçoit la région sur laquelle on a cliqué, nous pouvons donc simplement faire region.playLoop() ici.

Et comme pour la création de régions : vous aviez un écouteur d'événement 'click' sur le document de cette page en faisant document.addEventListener('click', callback)
La variable document en javascript représente toute la page Web actuellement affichée. Ainsi, chaque fois qu'un utilisateur cliquait n'importe où sur la page Web, un nouveau plug-in de régions était initialisé et ajouté à wavsurfer.
Désormais, lorsque vous cliquez une fois sur le "document" (ou le site Web) et que vous créez une région, une seule région est créée car un seul plug-in de régions a été lancé. Si vous cliquez deux fois sur la page et créez une région, deux seront créées avec une opacité légèrement plus élevée (car il y a deux régions créées qui se chevauchent) et ainsi de suite.

En savoir plus sur le modèle d'objet de document (DOM)

No problem!

To get the region to play in a loop when a user clicks on it, you can add:

  wavesurfer.on("region-click", (region) => {
    region.playLoop();
  });

Here, wavesurfer has an event called region-click which fires when you click a on a region. it's callback function receives the region that was clicked so we can just do region.playLoop() here.

And as for regions creation: you had a 'click' event listener on the document of that page by doing document.addEventListener('click', callback)
The document variable in JavaScript represents the whole webpage that is currently displayed. So whenever a user clicked anywhere on the webpage, a new regions plugin was initialized and added to wavesurfer.
Now when you click on the 'document' (or website) once and create a region, only one region is created because only one regions plugin was initiated. If you click on the page twice and create a region, two will be created with slightly higher opacity (Because there are two regions created that overlap each other) and so on.

Learn more about the Document Object Model (DOM)

[NinaP48]

C'est génial, ça fonctionne ! merci mille fois

[NinaP48]

Puis-je en profiter pour vous demander ce qui ne va pas dans mon code (à nouveau 😂 )
J'essaye de créer un marqueur à l'emplacement du curseur lorsque je clique sur le bouton add-marker.
Cependant quand je clique une erreur console apparaît.

let buttonAddMarker = document.querySelector('[data-action="add-marker"]');

buttonAddMarker.addEventListener('click', function() {
    let currentTime = wavesurfer.getCurrentTime();
    let marker = {
        time: currentTime,
        color: 'red',
        label: 'Test',
        position: 'top'
    };
    wavesurfer.addMarker(marker);
});

Erreur console : wavesurfer.addMarker is not a function

Désolé si mes questions peut paraître bête mais je suis totalement perdue

[prakharpbuf]

c'est normal d'être perdu :) il faudra un peu de pratique et une lecture approfondie de la documentation pour que les choses se passent correctement.

Le code que vous avez fonctionnera très bien, il vous suffit d'instancier le plugin de marqueur.

Commencez par importer le plugin de marqueur dans votre code comme les autres plugins (en utilisant <script /> tags/require()/ import quoi que vous utilisiez)

Ajoutez ensuite WaveSurfer.markers.create({}) dans l'option plugins à l'intérieur de wavesurfer.create()

it's okay to be lost :) it will take some practice and thorough read of the documentation to get things going properly.

The code you have will work just fine, you just have to instantiate the marker plugin.

Start by importing the marker plugin in your code just like other plugins (using <script /> tags/require()/ import whatever you use)

Then add WaveSurfer.markers.create({}) in the plugins option inside wavesurfer.create()

[prakharpbuf]

https://codepen.io/ppaw/pen/dyqqqyM?editors=1111

[NinaP48]

parfait tout fonctionne !
J'ai toutefois remarqué qu'un format mp3 fonctionne correctement avec mon code cependant un format .wav crée justement le retour automatique du curseur au début

[NinaP48]

Pensez vous qu'il existe des solutions pour :

• Effacer une seule région sélectionnée
• Effacer un seul marqueur sélectionné
• Déplacer un marqueur
• Renommer un marqueur (car sinon ils ont tous le même nom
• Nommer une région

[prakharpbuf]

Oui, il existe des solutions pour tout ce qui précède. Je recommanderais fortement de suivre un cours/tutoriel javascript rapide en ligne et de parcourir la documentation de Wavesurfer. Cela vous aidera à long terme.

Si vous avez encore besoin d'aide, faites le moi savoir :)

Yes, there are solutions for all of the above. I would strongly recommend doing a quick javascript course/tutorial online and going through the wavesurfer documentation. It will help you in the long run.

If you still need help, let me know :)