diff --git a/README.md b/README.md
index 3fd2849..fb038ac 100644
--- a/README.md
+++ b/README.md
@@ -2,6 +2,14 @@
 
 lecteur audio pour l'émission Libre à vous
 
+## Être débuté
+servir le dossier local avec le package npm **serve**,
+```bash
+serve .
+```
+et ouvrir localhost://5000
+ou lancer index.html dans un navigateur.
+
 ## liens
 
 https://github.com/katspaugh/wavesurfer.js
@@ -17,4 +25,9 @@ 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
\ No newline at end of file
+https://wavesurfer-js.org
+
+## génération de wave peaks
+
+avec audiowaveforms
+
diff --git a/audio/demo.wav b/audio/demo.wav
new file mode 100644
index 0000000..b269348
Binary files /dev/null and b/audio/demo.wav differ
diff --git a/index.html b/index.html
index 474c988..082a1f3 100644
--- a/index.html
+++ b/index.html
@@ -6,125 +6,34 @@
     </title>
     <meta charset="UTF-8"/>
     <link rel="stylesheet" href="style.css"/>
-    <script src="js/wavesurfer.js"></script>
-    <script src="js/regions.min.js"></script>
-    <script src="js/main.js"></script>
+    <script type="application/javascript" src="js/wavesurfer.js"></script>
+    <!--    <script type="application/javascript" src="https://unpkg.com/WaveSurfer.js/dist/WaveSurfer.js"></script>-->
+    <!--    <script src="js/regions.min.js"></script>-->
+    <!--    <script src="https://unpkg.com/peaks.js"></script>-->
+    <script type="application/javascript" src="js/main.js"></script>
 
-    <script type="application/javascript">
-        window.addEventListener('DOMContentLoaded', (event) => {
-            console.log('page is fully loaded' , WaveSurfer);
-
-
-            const refElement = document.querySelector('#waveform')
-            // const url = '/audio/anitra.mp4'
-            const url = 'http://localhost:5000/audio/anitra.mp4'
-            console.log('hello from main.js' , refElement)
-            const waveoptions = {
-                // container: refElement,
-                container: document.querySelector('#waveform'),
-                waveColor: '#A8DBA8',
-                progressColor: '#3B8686',
-                backend: 'MediaElement',
-                mediaControls: false,
-                plugins: [
-                    WaveSurfer.regions.create({
-                        regionsMinLength: 2,
-                        regions: [
-                            {
-                                start: 1,
-                                end: 3,
-                                loop: false,
-                                color: 'hsla(400, 100%, 30%, 0.5)'
-                            },
-                            {
-                                start: 5,
-                                end: 7,
-                                loop: false,
-                                color: 'hsla(200, 50%, 70%, 0.4)',
-                                minLength: 1
-                            }
-                        ],
-                        dragSelection: {
-                            slop: 5
-                        }
-                    }),
-                    // WaveSurfer.markers.create({
-                    //     markers: [
-                    //         {
-                    //             time: 0,
-                    //             label: "BEGIN",
-                    //             color: '#ff990a'
-                    //         },
-                    //         {
-                    //             time: 5.5,
-                    //             label: "V1",
-                    //             color: '#ff990a'
-                    //         },
-                    //
-                    //         {
-                    //             time: 24,
-                    //             label: "END",
-                    //             color: '#00ffcc',
-                    //             position: 'top'
-                    //         }
-                    //     ]
-                    // })
-                ]
-            }
-
-            WaveSurfer.create(waveoptions)
- 
-            WaveSurfer.load(url)
- wavesurfer.play();
-            const handlePlayPause = () => {
-                wavesurfer.playPause();
-            };
-
-            const onVolumeChange = e => {
-                console.log(e)
-                const { target } = e;
-                const newVolume = +target.value;
-
-                if (newVolume) {
-                    setVolume(newVolume);
-                    wavesurfer.current.setVolume(newVolume || 1);
-                }
-            };
-
-        });
-    </script>
 </head>
 <body>
-<h1> Example de lecteur audio enrichi</h1>
-<blockquote>
-    Code de vincent:
-    <figure>
-        <figcaption>Écoute de l'émission intégrale</figcaption>
-        <audio id="player" controls preload="metadata">
-            <source src="https://media.april.org/audio/radio-cause-commune/libre-a-vous/emissions/20210622/libre-a-vous-20210622.ogg"
-                    type="audio/ogg">
-            <source id="audio"
-                    src="https://media.april.org/audio/radio-cause-commune/libre-a-vous/emissions/20210622/libre-a-vous-20210622.mp3"
-                    type="audio/mp3">
-            Votre navigateur ne supporte pas l'élément <code>audio</code>
-        </audio>
-    </figure>
-</blockquote>
-<hr>
-
-<div>
+<h1> Example de lecteur audio enrichi pour Libre à vous</h1>
+<section>
     <h1> Rendu enrichi </h1>
-    <!--    sera remplacé par wavesurfer -->
-    <div id="waveform"></div>
-    <!--    <audio  src="audio/anitra.mp4" controls></audio>-->
 
-    <button class="clickable play-pause" onclick="handlePlayPause">⏯️</button>
-    <button class="clickable forward">⏩</button>
 
-    <input type="range" id="volume" name="volume"
-           value="60" onclick="onVolumeChange"
-           min="0" max="100">
-    <label for="volume">Volume</label>
+    <!--   contient les audio peaks sera remplacé par WaveSurfer -->
+    <div id="wave_box">
+        <div id="waveform"></div>
+    </div>
+
+    <div class="controls">
+
+        <button class="clickable play-pause" onclick="silverSurfer.playPause()">⏯️</button>
+        <button class="clickable forward">⏩</button>
+
+        <input type="range" id="volume" name="volume"
+               value="60" onchange="onVolumeChange"
+               min="0" max="100">
+        <label for="volume">Volume</label>
+    </div>
     <h2>Sections</h2>
     <ul>
         <li class="clickable ">
@@ -146,6 +55,33 @@
             clotûre
         </li>
     </ul>
-</div>
+
+
+    <audio id="anitra" src="audio/anitra.mp4" controls></audio>
+</section>
+<section>
+
+    <blockquote>
+        Code de vincent:
+        <figure>
+            <figcaption>Écoute de l'émission intégrale</figcaption>
+            <audio id="player" controls preload="metadata">
+                <source src="https://media.april.org/audio/radio-cause-commune/libre-a-vous/emissions/20210622/libre-a-vous-20210622.ogg"
+                        type="audio/ogg">
+                <source id="audio"
+                        src="https://media.april.org/audio/radio-cause-commune/libre-a-vous/emissions/20210622/libre-a-vous-20210622.mp3"
+                        type="audio/mp3">
+                Votre navigateur ne supporte pas l'élément <code>audio</code>
+            </audio>
+        </figure>
+    </blockquote>
+    <hr>
+    Anitra:
+    <audio id="to_pick" controls preload="metadata">
+        <source src="http://localhost:5000/audio/demo.wav"
+                type="audio/mp4">
+        Votre navigateur ne supporte pas l'élément <code>audio</code>
+    </audio>
+</section>
 </body>
 </html>
diff --git a/js/main.js b/js/main.js
index e69de29..f52e952 100644
--- a/js/main.js
+++ b/js/main.js
@@ -0,0 +1,74 @@
+
+
+let silverSurfer = {}
+
+const handlePlayPause = () => {
+    silverSurfer.playPause(); 
+};
+
+const onVolumeChange = e => {
+    console.log(e)
+    const {target} = e;
+    const newVolume = +target.value;
+
+    if (newVolume) {
+        setVolume(newVolume);
+        WaveSurfer.current.setVolume(newVolume || 1);
+    }
+};
+
+
+
+window.addEventListener('DOMContentLoaded', (event) => {
+    console.log('page is fully loaded', WaveSurfer);
+
+
+    const refElement = document.querySelector('#waveform')
+    // const url = '/audio/anitra.mp4'
+    // const url = document.querySelector('#player source').src
+    const url = 'http://localhost:5000/audio/anitra.mp4'
+
+    console.log('hello from main.js', refElement)
+    const waveoptions = {
+        // container: refElement,
+        container: document.querySelector('#waveform'),
+// The color can be either a simple CSS color or a Canvas gradient
+        waveColor: '#ffa492',
+        progressColor: 'hsla(12,100%,43%,0.5)',
+        cursorColor: '#fff',
+        // This parameter makes the waveform look like SoundCloud's player
+        barWidth: 1,
+        barHeight: 10,
+        backend: 'MediaElement',
+        plugins: [
+            // WaveSurfer.regions.create({
+            //     regionsMinLength: 2,
+            //     regions: [
+            //         {
+            //             start: 1,
+            //             end: 3,
+            //             loop: false,
+            //             color: 'hsla(400, 100%, 30%, 0.5)'
+            //         },
+            //         {
+            //             start: 5,
+            //             end: 7,
+            //             loop: false,
+            //             color: 'hsla(200, 50%, 70%, 0.4)',
+            //             minLength: 1
+            //         }
+            //     ],
+            //     dragSelection: {
+            //         slop: 5
+            //     }
+            // }),
+        ]
+    };
+
+    console.log('url', url);
+    silverSurfer = WaveSurfer.create(waveoptions)
+    silverSurfer.load(url)
+    console.log('silverSurfer', silverSurfer);
+
+});
+
diff --git a/style.css b/style.css
index ef746b8..2d57899 100644
--- a/style.css
+++ b/style.css
@@ -1,12 +1,13 @@
 body{
     margin: 5em;
+    background: #ccc;
 }
 .clickable{
     cursor:pointer;
     font-size: 1.5em;
 }
 .clickable:hover{
-    background: #ffc08b
+    background: #222
 }
 li.clickable{
     padding: 1em;
@@ -24,4 +25,15 @@ button{
 }
 meter{
     background: black;
+}
+
+audio{
+    width: 100%;
+}
+#wave_box{
+    border-radius: 0.25em;
+    background: #222;
+    padding: 1em;
+    margin-bottom: 1em;
+
 }
\ No newline at end of file