tykayn
/
libreavous-audio-reader
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

avec marqueurs et régions

This commit is contained in:
Tykayn 2021-08-13 18:14:31 +02:00 committed by tykayn
parent 2219b56ee0
commit 02d84da263
5 changed files with 84 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

@ -10,6 +10,9 @@ serve .
et ouvrir localhost://5000 et ouvrir localhost://5000
ou lancer index.html dans un navigateur. 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 ## liens
https://github.com/katspaugh/wavesurfer.js https://github.com/katspaugh/wavesurfer.js

15
index.html
View File

@ -7,13 +7,12 @@
<meta charset="UTF-8"/> <meta charset="UTF-8"/>
<link rel="stylesheet" href="style.css"/> <link rel="stylesheet" href="style.css"/>
<script type="application/javascript" src="js/wavesurfer.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="js/regions.min.js"></script>--> <script src="js/markers.min.js"></script>
<!-- <script src="https://unpkg.com/peaks.js"></script>-->
<script type="application/javascript" src="js/main.js"></script> <script type="application/javascript" src="js/main.js"></script>
</head> </head>
<body> <body onkeyup="silverSurfer.playPause()">
<h1> Example de lecteur audio enrichi pour Libre à vous</h1> <h1> Example de lecteur audio enrichi pour Libre à vous</h1>
<section> <section>
<h1> Rendu enrichi </h1> <h1> Rendu enrichi </h1>
@ -26,8 +25,10 @@
<div class="controls"> <div class="controls">
<button class="clickable forward" onclick="silverSurfer.skip(-30)">⏩ -30s</button>
<button class="clickable play-pause" onclick="silverSurfer.playPause()">⏯️</button> <button class="clickable play-pause" onclick="silverSurfer.playPause()">⏯️</button>
<button class="clickable forward">⏩</button> <button class="clickable forward" onclick="silverSurfer.skip(30)">⏩ +30s</button>
<button class="clickable forward" onclick="silverSurfer.stop()">stop</button>
<input type="range" id="volume" name="volume" <input type="range" id="volume" name="volume"
value="60" onchange="onVolumeChange" value="60" onchange="onVolumeChange"
@ -39,8 +40,8 @@
<li class="clickable "> <li class="clickable ">
intro intro
</li> </li>
<li class="clickable "> <li class="clickable " onclick="silverSurfer.play(60)">
chronique A 01:00 chronique A
</li> </li>
<li class="clickable "> <li class="clickable ">
sujet principal sujet principal

77
js/main.js
View File

@ -27,6 +27,7 @@ window.addEventListener('DOMContentLoaded', (event) => {
// const url = '/audio/anitra.mp4' // const url = '/audio/anitra.mp4'
// const url = document.querySelector('#player source').src // const url = document.querySelector('#player source').src
const url = 'http://localhost:5000/audio/anitra.mp4' 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) console.log('hello from main.js', refElement)
const waveoptions = { const waveoptions = {
@ -41,27 +42,61 @@ window.addEventListener('DOMContentLoaded', (event) => {
barHeight: 10, barHeight: 10,
backend: 'MediaElement', backend: 'MediaElement',
plugins: [ plugins: [
// WaveSurfer.regions.create({ // rectangles de zones
// regionsMinLength: 2, WaveSurfer.regions.create({
// regions: [ regionsMinLength: 2,
// { regions: [
// start: 1, {
// end: 3, start: 50,
// loop: false, end: 70,
// color: 'hsla(400, 100%, 30%, 0.5)' loop: false,
// }, color: 'hsla(400, 100%, 30%, 0.25)'
// { },
// start: 5, {
// end: 7, start: 150,
// loop: false, end: 200,
// color: 'hsla(200, 50%, 70%, 0.4)', loop: false,
// minLength: 1 color: 'hsla(200, 50%, 70%, 0.25)',
// } minLength: 1
// ], }
// dragSelection: { ],
// slop: 5 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'
},
]
})
] ]
}; };

7
js/markers.min.js vendored Normal file
View File

@ -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;r<t.length;r++){var i=t[r];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var i=function(){function e(t,r){var i=this;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.params=t,this.wavesurfer=r,this.util=r.util,this.style=this.util.style,this.markerWidth=11,this.markerHeight=22,this._onResize=function(){i._updateMarkerPositions()},this._onBackendCreated=function(){i.wrapper=i.wavesurfer.drawer.wrapper,i.params.markers&&i.params.markers.forEach((function(e){return i.add(e)})),window.addEventListener("resize",i._onResize,!0),window.addEventListener("orientationchange",i._onResize,!0),i.wavesurfer.on("zoom",i._onResize)},this.markers=[],this._onReady=function(){i.wrapper=i.wavesurfer.drawer.wrapper,i._updateMarkerPositions()}}var t,i,a;return t=e,a=[{key:"create",value:function(t){return{name:"markers",deferInit:!(!t||!t.deferInit)&&t.deferInit,params:t,staticProps:{addMarker:function(e){return this.initialisedPluginList.markers||this.initPlugin("markers"),this.markers.add(e)},clearMarkers:function(){this.markers&&this.markers.clear()}},instance:e}}}],(i=[{key:"init",value:function(){this.wavesurfer.isReady?(this._onBackendCreated(),this._onReady()):(this.wavesurfer.once("ready",this._onReady),this.wavesurfer.once("backend-created",this._onBackendCreated))}},{key:"destroy",value:function(){this.wavesurfer.un("ready",this._onReady),this.wavesurfer.un("backend-created",this._onBackendCreated),this.wavesurfer.un("zoom",this._onResize),window.removeEventListener("resize",this._onResize,!0),window.removeEventListener("orientationchange",this._onResize,!0),this.clear()}},{key:"add",value:function(e){var t={time:e.time,label:e.label,color:e.color||"#D8D8D8",position:e.position||"bottom"};return e.markerElement&&(this.markerWidth=e.markerElement.width,this.markerHeight=e.markerElement.height),t.el=this._createMarkerElement(t,e.markerElement),this.wrapper.appendChild(t.el),this.markers.push(t),this._updateMarkerPositions(),t}},{key:"remove",value:function(e){var t=this.markers[e];t&&(this.wrapper.removeChild(t.el),this.markers.splice(e,1))}},{key:"_createPointerSVG",value:function(e,t){var r="http://www.w3.org/2000/svg",i=document.createElementNS(r,"svg"),a=document.createElementNS(r,"polygon");return i.setAttribute("viewBox","0 0 40 80"),a.setAttribute("id","polygon"),a.setAttribute("stroke","#979797"),a.setAttribute("fill",e),a.setAttribute("points","20 0 40 30 40 80 0 80 0 30"),"top"==t&&a.setAttribute("transform","rotate(180, 20 40)"),i.appendChild(a),this.style(i,{width:this.markerWidth+"px",height:this.markerHeight+"px","min-width":this.markerWidth+"px","margin-right":"5px","z-index":4}),i}},{key:"_createMarkerElement",value:function(e,t){var r=this,i=e.label,a=e.time,n=document.createElement("marker");n.className="wavesurfer-marker",this.style(n,{position:"absolute",height:"100%",display:"flex",overflow:"hidden","flex-direction":"top"==e.position?"column-reverse":"column"});var s=document.createElement("div");this.style(s,{"flex-grow":1,"margin-left":this.markerWidth/2-.5+"px",background:"black",width:"1px",opacity:.1}),n.appendChild(s);var o=document.createElement("div"),u=t||this._createPointerSVG(e.color,e.position);if(o.appendChild(u),i){var d=document.createElement("span");d.innerText=i,this.style(d,{"font-family":"monospace","font-size":"90%"}),o.appendChild(d)}return this.style(o,{display:"flex","align-items":"center",cursor:"pointer"}),n.appendChild(o),o.addEventListener("click",(function(t){t.stopPropagation(),r.wavesurfer.setCurrentTime(a),r.wavesurfer.fireEvent("marker-click",e,t)})),n}},{key:"_updateMarkerPositions",value:function(){for(var e=this.wavesurfer.getDuration(),t=0;t<this.markers.length;t++){var r=this.markers[t],i=this.wavesurfer.drawer.width/this.wavesurfer.params.pixelRatio,a=i*Math.min(r.time/e,1)-this.markerWidth/2;this.style(r.el,{left:a+"px","max-width":i-a+"px"})}}},{key:"clear",value:function(){for(;this.markers.length>0;)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

11
style.css
View File

@ -4,7 +4,7 @@ body{
} }
.clickable{ .clickable{
cursor:pointer; cursor:pointer;
font-size: 1.5em; color: white;
} }
.clickable:hover{ .clickable:hover{
background: #222 background: #222
@ -18,6 +18,7 @@ button{
min-width: 2em; min-width: 2em;
min-height: 2em; min-height: 2em;
background: #222; background: #222;
border-width: 0;
} }
#media_player{ #media_player{
margin: 2em auto; margin: 2em auto;
@ -37,4 +38,12 @@ audio{
padding: 1em; padding: 1em;
margin-bottom: 1em; margin-bottom: 1em;
}
marker span{
color: white;
}
ul{
background: #111;
} }