From 02d84da26332612a375c2d8f260f41fef8d97d5e Mon Sep 17 00:00:00 2001 From: Tykayn Date: Fri, 13 Aug 2021 18:14:31 +0200 Subject: [PATCH] =?UTF-8?q?avec=20marqueurs=20et=20r=C3=A9gions?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 3 ++ index.html | 15 ++++----- js/main.js | 77 ++++++++++++++++++++++++++++++++++------------- js/markers.min.js | 7 +++++ style.css | 11 ++++++- 5 files changed, 84 insertions(+), 29 deletions(-) create mode 100644 js/markers.min.js 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 @@ - - - + + - +

Example de lecteur audio enrichi pour Libre à vous

Rendu enrichi

@@ -26,8 +25,10 @@
+ - + + 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