libreavous-audio-reader

lecteur audio pour l'émission Libre à vous

Être débuté

servir le dossier local avec le package npm serve afin de ne pas avoir de problème de requête CORS,

serve .

et ouvrir localhost://5000 ou lancer index.html dans un navigateur.

Attention, il faut créer un objet surfer avec WaveSurfer et appliquer ensuite dessus les actions de play pause et etc, pas directement sur WaveSurver, mais bien ses instances. On peut aussi faire plusieurs instances.

récup d'attribut src pour une balise audio

dans main.js , la source audio est définie à cet endroit:

silverSurfer.load(url)

on peut définir en amont l'url en la récupérant dans la page

url = document.querySelector('#player source').src

comme il faut définir une source, on ne peut en choisir qu'une seule à priori. à étudier pour proposer du ogg et mp4 comme sur la version native.

liens

https://github.com/katspaugh/wavesurfer.js

démo du rendu recherché: https://dev.to/jamland/audio-player-with-wavesurfer-js-react-1g3b https://codesandbox.io/s/audio-player-with-wavesurferjs-react-bd499?from-embed

marqueurs pour chapitres https://wavesurfer-js.org/plugins/markers.html

rendu des vagues en avance côté serveur https://wavesurfer-js.org/faq

https://521dimensions.com/open-source/amplitudejs/docs/fx/waveforms.html#displaying-waveform-elements https://wavesurfer-js.org

génération de wave peaks

avec audiowaveforms