55 lines
1.5 KiB
Markdown
55 lines
1.5 KiB
Markdown
# 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,
|
|
```bash
|
|
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:
|
|
|
|
```javascript
|
|
silverSurfer.load(url)
|
|
```
|
|
|
|
on peut définir en amont l'url en la récupérant dans la page
|
|
```javascript
|
|
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
|
|
|