avec marqueurs et régions
This commit is contained in:
parent
2219b56ee0
commit
02d84da263
|
@ -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
|
||||
|
|
15
index.html
15
index.html
|
@ -7,13 +7,12 @@
|
|||
<meta charset="UTF-8"/>
|
||||
<link rel="stylesheet" href="style.css"/>
|
||||
<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 src="js/regions.min.js"></script>
|
||||
<script src="js/markers.min.js"></script>
|
||||
<script type="application/javascript" src="js/main.js"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<body onkeyup="silverSurfer.playPause()">
|
||||
<h1> Example de lecteur audio enrichi pour Libre à vous</h1>
|
||||
<section>
|
||||
<h1> Rendu enrichi </h1>
|
||||
|
@ -26,8 +25,10 @@
|
|||
|
||||
<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 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"
|
||||
value="60" onchange="onVolumeChange"
|
||||
|
@ -39,8 +40,8 @@
|
|||
<li class="clickable ">
|
||||
intro
|
||||
</li>
|
||||
<li class="clickable ">
|
||||
chronique A
|
||||
<li class="clickable " onclick="silverSurfer.play(60)">
|
||||
01:00 chronique A
|
||||
</li>
|
||||
<li class="clickable ">
|
||||
sujet principal
|
||||
|
|
77
js/main.js
77
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'
|
||||
},
|
||||
]
|
||||
})
|
||||
]
|
||||
};
|
||||
|
||||
|
|
|
@ -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
11
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;
|
||||
}
|
Loading…
Reference in New Issue