diff --git a/README.md b/README.md
index 8f34683..7311efe 100644
--- a/README.md
+++ b/README.md
@@ -10,6 +10,9 @@ 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.
+
## liens
https://github.com/katspaugh/wavesurfer.js
diff --git a/index.html b/index.html
index 082a1f3..ef39f51 100644
--- a/index.html
+++ b/index.html
@@ -7,13 +7,12 @@
-
-
-
+
+
-
+
Rendu enrichi
@@ -26,8 +25,10 @@
+ ⏩ -30s
⏯️
- ⏩
+ ⏩ +30s
+ stop
intro
-
- chronique A
+
+ 01:00 chronique A
sujet principal
diff --git a/js/main.js b/js/main.js
index f52e952..51ee4b6 100644
--- a/js/main.js
+++ b/js/main.js
@@ -27,6 +27,7 @@ window.addEventListener('DOMContentLoaded', (event) => {
// const url = '/audio/anitra.mp4'
// const url = document.querySelector('#player source').src
const url = 'http://localhost:5000/audio/anitra.mp4'
+ // const url = 'https://media.april.org/audio/radio-cause-commune/libre-a-vous/emissions/20210622/libre-a-vous-20210622.ogg'
console.log('hello from main.js', refElement)
const waveoptions = {
@@ -41,27 +42,61 @@ window.addEventListener('DOMContentLoaded', (event) => {
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
- // }
- // }),
+ // rectangles de zones
+ WaveSurfer.regions.create({
+ regionsMinLength: 2,
+ regions: [
+ {
+ start: 50,
+ end: 70,
+ loop: false,
+ color: 'hsla(400, 100%, 30%, 0.25)'
+ },
+ {
+ start: 150,
+ end: 200,
+ loop: false,
+ color: 'hsla(200, 50%, 70%, 0.25)',
+ minLength: 1
+ }
+ ],
+ dragSelection: {
+ slop: 5
+ }
+ }),
+ // marque pages avec texte
+ WaveSurfer.markers.create({
+ markers: [
+ {
+ time: 0,
+ label: "intro",
+ color: '#ff990a'
+ },
+ {
+ time: 10,
+ label: "chronique 1",
+ color: '#ff990a'
+ },
+ {
+ time: 50,
+ label: "une pause musicale",
+ color: '#00ffcc',
+ position: 'top'
+ },
+ {
+ time: 70,
+ label: "le sujet principal",
+ color: '#00ffcc',
+ position: 'top'
+ },
+ {
+ time: 200,
+ label: "la fin",
+ color: '#00ffcc',
+ position: 'top'
+ },
+ ]
+ })
]
};
diff --git a/js/markers.min.js b/js/markers.min.js
new file mode 100644
index 0000000..6ffafdb
--- /dev/null
+++ b/js/markers.min.js
@@ -0,0 +1,7 @@
+/*!
+ * wavesurfer.js markers plugin 5.1.0 (2021-06-20)
+ * https://wavesurfer-js.org
+ * @license BSD-3-Clause
+ */
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("WaveSurfer",[],t):"object"==typeof exports?exports.WaveSurfer=t():(e.WaveSurfer=e.WaveSurfer||{},e.WaveSurfer.markers=t())}(this,(function(){return(()=>{"use strict";var e={188:(e,t)=>{function r(e,t){for(var r=0;r0;)this.remove(0)}}])&&r(t.prototype,i),a&&r(t,a),e}();t.default=i,e.exports=t.default}},t={};return function r(i){var a=t[i];if(void 0!==a)return a.exports;var n=t[i]={exports:{}};return e[i](n,n.exports,r),n.exports}(188)})()}));
+//# sourceMappingURL=wavesurfer.markers.min.js.map
\ No newline at end of file
diff --git a/style.css b/style.css
index f305180..4c41c34 100644
--- a/style.css
+++ b/style.css
@@ -4,7 +4,7 @@ body{
}
.clickable{
cursor:pointer;
- font-size: 1.5em;
+ color: white;
}
.clickable:hover{
background: #222
@@ -18,6 +18,7 @@ button{
min-width: 2em;
min-height: 2em;
background: #222;
+ border-width: 0;
}
#media_player{
margin: 2em auto;
@@ -37,4 +38,12 @@ audio{
padding: 1em;
margin-bottom: 1em;
+}
+
+marker span{
+ color: white;
+}
+
+ul{
+ background: #111;
}
\ No newline at end of file