libreavous-audio-reader/README.md

55 lines
1.5 KiB
Markdown
Raw Normal View History

2021-08-06 12:27:18 +02:00
# libreavous-audio-reader
2021-08-06 12:39:59 +02:00
lecteur audio pour l'émission Libre à vous
2021-08-13 17:53:07 +02:00
## Être débuté
2021-08-13 17:54:19 +02:00
servir le dossier local avec le package npm **serve** afin de ne pas avoir de problème de requête CORS,
2021-08-13 17:53:07 +02:00
```bash
serve .
```
et ouvrir localhost://5000
ou lancer index.html dans un navigateur.
2021-08-13 18:14:31 +02:00
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.
2021-08-13 18:25:40 +02:00
## 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.
2021-08-06 12:39:59 +02:00
## liens
https://github.com/katspaugh/wavesurfer.js
démo du rendu recherché:
https://dev.to/jamland/audio-player-with-wavesurfer-js-react-1g3b
2021-08-13 16:48:38 +02:00
https://codesandbox.io/s/audio-player-with-wavesurferjs-react-bd499?from-embed
2021-08-06 12:39:59 +02:00
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
2021-08-13 17:53:07 +02:00
https://wavesurfer-js.org
## génération de wave peaks
avec audiowaveforms