wavesurfer.js 7.8.4-beta.1 → 7.8.5-beta.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/base-plugin.js +1 -3
- package/dist/decoder.js +16 -5
- package/dist/dom.js +1 -1
- package/dist/draggable.js +2 -2
- package/dist/event-emitter.js +6 -3
- package/dist/fetcher.js +50 -37
- package/dist/player.js +14 -4
- package/dist/plugins/envelope.js +1 -355
- package/dist/plugins/hover.js +1 -106
- package/dist/plugins/record.cjs +1 -1
- package/dist/plugins/record.esm.js +1 -1
- package/dist/plugins/record.js +1 -1
- package/dist/plugins/record.min.js +1 -1
- package/dist/renderer.js +108 -88
- package/dist/timer.js +4 -1
- package/dist/wavesurfer.js +95 -76
- package/dist/webaudio.js +50 -33
- package/package.json +1 -1
package/dist/plugins/hover.js
CHANGED
|
@@ -1,106 +1 @@
|
|
|
1
|
-
|
|
2
|
-
* The Hover plugin follows the mouse and shows a timestamp
|
|
3
|
-
*/
|
|
4
|
-
import BasePlugin from '../base-plugin.js';
|
|
5
|
-
import createElement from '../dom.js';
|
|
6
|
-
const defaultOptions = {
|
|
7
|
-
lineWidth: 1,
|
|
8
|
-
labelSize: 11,
|
|
9
|
-
formatTimeCallback(seconds) {
|
|
10
|
-
const minutes = Math.floor(seconds / 60);
|
|
11
|
-
const secondsRemainder = Math.floor(seconds) % 60;
|
|
12
|
-
const paddedSeconds = `0${secondsRemainder}`.slice(-2);
|
|
13
|
-
return `${minutes}:${paddedSeconds}`;
|
|
14
|
-
},
|
|
15
|
-
};
|
|
16
|
-
class HoverPlugin extends BasePlugin {
|
|
17
|
-
options;
|
|
18
|
-
wrapper;
|
|
19
|
-
label;
|
|
20
|
-
unsubscribe = () => undefined;
|
|
21
|
-
constructor(options) {
|
|
22
|
-
super(options || {});
|
|
23
|
-
this.options = Object.assign({}, defaultOptions, options);
|
|
24
|
-
// Create the plugin elements
|
|
25
|
-
this.wrapper = createElement('div', { part: 'hover' });
|
|
26
|
-
this.label = createElement('span', { part: 'hover-label' }, this.wrapper);
|
|
27
|
-
}
|
|
28
|
-
static create(options) {
|
|
29
|
-
return new HoverPlugin(options);
|
|
30
|
-
}
|
|
31
|
-
addUnits(value) {
|
|
32
|
-
const units = typeof value === 'number' ? 'px' : '';
|
|
33
|
-
return `${value}${units}`;
|
|
34
|
-
}
|
|
35
|
-
/** Called by wavesurfer, don't call manually */
|
|
36
|
-
onInit() {
|
|
37
|
-
if (!this.wavesurfer) {
|
|
38
|
-
throw Error('WaveSurfer is not initialized');
|
|
39
|
-
}
|
|
40
|
-
const wsOptions = this.wavesurfer.options;
|
|
41
|
-
const lineColor = this.options.lineColor || wsOptions.cursorColor || wsOptions.progressColor;
|
|
42
|
-
// Vertical line
|
|
43
|
-
Object.assign(this.wrapper.style, {
|
|
44
|
-
position: 'absolute',
|
|
45
|
-
zIndex: 10,
|
|
46
|
-
left: 0,
|
|
47
|
-
top: 0,
|
|
48
|
-
height: '100%',
|
|
49
|
-
pointerEvents: 'none',
|
|
50
|
-
borderLeft: `${this.addUnits(this.options.lineWidth)} solid ${lineColor}`,
|
|
51
|
-
opacity: '0',
|
|
52
|
-
transition: 'opacity .1s ease-in',
|
|
53
|
-
});
|
|
54
|
-
// Timestamp label
|
|
55
|
-
Object.assign(this.label.style, {
|
|
56
|
-
display: 'block',
|
|
57
|
-
backgroundColor: this.options.labelBackground,
|
|
58
|
-
color: this.options.labelColor,
|
|
59
|
-
fontSize: `${this.addUnits(this.options.labelSize)}`,
|
|
60
|
-
transition: 'transform .1s ease-in',
|
|
61
|
-
padding: '2px 3px',
|
|
62
|
-
});
|
|
63
|
-
// Append the wrapper
|
|
64
|
-
const container = this.wavesurfer.getWrapper();
|
|
65
|
-
container.appendChild(this.wrapper);
|
|
66
|
-
// Attach pointer events
|
|
67
|
-
container.addEventListener('pointermove', this.onPointerMove);
|
|
68
|
-
container.addEventListener('pointerleave', this.onPointerLeave);
|
|
69
|
-
container.addEventListener('wheel', this.onPointerMove);
|
|
70
|
-
this.unsubscribe = () => {
|
|
71
|
-
container.removeEventListener('pointermove', this.onPointerMove);
|
|
72
|
-
container.removeEventListener('pointerleave', this.onPointerLeave);
|
|
73
|
-
container.removeEventListener('wheel', this.onPointerLeave);
|
|
74
|
-
};
|
|
75
|
-
}
|
|
76
|
-
onPointerMove = (e) => {
|
|
77
|
-
if (!this.wavesurfer)
|
|
78
|
-
return;
|
|
79
|
-
// Position
|
|
80
|
-
const bbox = this.wavesurfer.getWrapper().getBoundingClientRect();
|
|
81
|
-
const { width } = bbox;
|
|
82
|
-
const offsetX = e.clientX - bbox.left;
|
|
83
|
-
const relX = Math.min(1, Math.max(0, offsetX / width));
|
|
84
|
-
const posX = Math.min(width - this.options.lineWidth - 1, offsetX);
|
|
85
|
-
this.wrapper.style.transform = `translateX(${posX}px)`;
|
|
86
|
-
this.wrapper.style.opacity = '1';
|
|
87
|
-
// Timestamp
|
|
88
|
-
const duration = this.wavesurfer.getDuration() || 0;
|
|
89
|
-
this.label.textContent = this.options.formatTimeCallback(duration * relX);
|
|
90
|
-
const labelWidth = this.label.offsetWidth;
|
|
91
|
-
this.label.style.transform =
|
|
92
|
-
posX + labelWidth > width ? `translateX(-${labelWidth + this.options.lineWidth}px)` : '';
|
|
93
|
-
// Emit a hover event with the relative X position
|
|
94
|
-
this.emit('hover', relX);
|
|
95
|
-
};
|
|
96
|
-
onPointerLeave = () => {
|
|
97
|
-
this.wrapper.style.opacity = '0';
|
|
98
|
-
};
|
|
99
|
-
/** Unmount */
|
|
100
|
-
destroy() {
|
|
101
|
-
super.destroy();
|
|
102
|
-
this.unsubscribe();
|
|
103
|
-
this.wrapper.remove();
|
|
104
|
-
}
|
|
105
|
-
}
|
|
106
|
-
export default HoverPlugin;
|
|
1
|
+
class t{constructor(){this.listeners={}}on(t,e,s){if(this.listeners[t]||(this.listeners[t]=new Set),this.listeners[t].add(e),null==s?void 0:s.once){const s=()=>{this.un(t,s),this.un(t,e)};return this.on(t,s),s}return()=>this.un(t,e)}un(t,e){var s;null===(s=this.listeners[t])||void 0===s||s.delete(e)}once(t,e){return this.on(t,e,{once:!0})}unAll(){this.listeners={}}emit(t,...e){this.listeners[t]&&this.listeners[t].forEach((t=>t(...e)))}}class e extends t{constructor(t){super(),this.subscriptions=[],this.options=t}onInit(){}_init(t){this.wavesurfer=t,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach((t=>t()))}}function s(t,e){const i=e.xmlns?document.createElementNS(e.xmlns,t):document.createElement(t);for(const[t,n]of Object.entries(e))if("children"===t)for(const[t,n]of Object.entries(e))"string"==typeof n?i.appendChild(document.createTextNode(n)):i.appendChild(s(t,n));else"style"===t?Object.assign(i.style,n):"textContent"===t?i.textContent=n:i.setAttribute(t,n.toString());return i}function i(t,e,i){const n=s(t,e||{});return null==i||i.appendChild(n),n}const n={lineWidth:1,labelSize:11,formatTimeCallback:t=>`${Math.floor(t/60)}:${`0${Math.floor(t)%60}`.slice(-2)}`};class r extends e{constructor(t){super(t||{}),this.unsubscribe=()=>{},this.onPointerMove=t=>{if(!this.wavesurfer)return;const e=this.wavesurfer.getWrapper().getBoundingClientRect(),{width:s}=e,i=t.clientX-e.left,n=Math.min(1,Math.max(0,i/s)),r=Math.min(s-this.options.lineWidth-1,i);this.wrapper.style.transform=`translateX(${r}px)`,this.wrapper.style.opacity="1";const o=this.wavesurfer.getDuration()||0;this.label.textContent=this.options.formatTimeCallback(o*n);const a=this.label.offsetWidth;this.label.style.transform=r+a>s?`translateX(-${a+this.options.lineWidth}px)`:"",this.emit("hover",n)},this.onPointerLeave=()=>{this.wrapper.style.opacity="0"},this.options=Object.assign({},n,t),this.wrapper=i("div",{part:"hover"}),this.label=i("span",{part:"hover-label"},this.wrapper)}static create(t){return new r(t)}addUnits(t){return`${t}${"number"==typeof t?"px":""}`}onInit(){if(!this.wavesurfer)throw Error("WaveSurfer is not initialized");const t=this.wavesurfer.options,e=this.options.lineColor||t.cursorColor||t.progressColor;Object.assign(this.wrapper.style,{position:"absolute",zIndex:10,left:0,top:0,height:"100%",pointerEvents:"none",borderLeft:`${this.addUnits(this.options.lineWidth)} solid ${e}`,opacity:"0",transition:"opacity .1s ease-in"}),Object.assign(this.label.style,{display:"block",backgroundColor:this.options.labelBackground,color:this.options.labelColor,fontSize:`${this.addUnits(this.options.labelSize)}`,transition:"transform .1s ease-in",padding:"2px 3px"});const s=this.wavesurfer.getWrapper();s.appendChild(this.wrapper),s.addEventListener("pointermove",this.onPointerMove),s.addEventListener("pointerleave",this.onPointerLeave),s.addEventListener("wheel",this.onPointerMove),this.unsubscribe=()=>{s.removeEventListener("pointermove",this.onPointerMove),s.removeEventListener("pointerleave",this.onPointerLeave),s.removeEventListener("wheel",this.onPointerLeave)}}destroy(){super.destroy(),this.unsubscribe(),this.wrapper.remove()}}export{r as default};
|
package/dist/plugins/record.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";function
|
|
1
|
+
"use strict";function t(t,i,e,s){return new(e||(e=Promise))((function(o,r){function n(t){try{d(s.next(t))}catch(t){r(t)}}function a(t){try{d(s.throw(t))}catch(t){r(t)}}function d(t){var i;t.done?o(t.value):(i=t.value,i instanceof e?i:new e((function(t){t(i)}))).then(n,a)}d((s=s.apply(t,i||[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;class i{constructor(){this.listeners={}}on(t,i,e){if(this.listeners[t]||(this.listeners[t]=new Set),this.listeners[t].add(i),null==e?void 0:e.once){const e=()=>{this.un(t,e),this.un(t,i)};return this.on(t,e),e}return()=>this.un(t,i)}un(t,i){var e;null===(e=this.listeners[t])||void 0===e||e.delete(i)}once(t,i){return this.on(t,i,{once:!0})}unAll(){this.listeners={}}emit(t,...i){this.listeners[t]&&this.listeners[t].forEach((t=>t(...i)))}}class e extends i{constructor(t){super(),this.subscriptions=[],this.options=t}onInit(){}_init(t){this.wavesurfer=t,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach((t=>t()))}}class s extends i{constructor(){super(...arguments),this.unsubscribe=()=>{}}start(){this.unsubscribe=this.on("tick",(()=>{requestAnimationFrame((()=>{this.emit("tick")}))})),this.emit("tick")}stop(){this.unsubscribe()}destroy(){this.unsubscribe()}}const o=["audio/webm","audio/wav","audio/mpeg","audio/mp4","audio/mp3"];class r extends e{constructor(t){var i,e,o,r,n,a;super(Object.assign(Object.assign({},t),{audioBitsPerSecond:null!==(i=t.audioBitsPerSecond)&&void 0!==i?i:128e3,scrollingWaveform:null!==(e=t.scrollingWaveform)&&void 0!==e&&e,scrollingWaveformWindow:null!==(o=t.scrollingWaveformWindow)&&void 0!==o?o:5,continuousWaveform:null!==(r=t.continuousWaveform)&&void 0!==r&&r,renderRecordedAudio:null===(n=t.renderRecordedAudio)||void 0===n||n,mediaRecorderTimeslice:null!==(a=t.mediaRecorderTimeslice)&&void 0!==a?a:void 0})),this.stream=null,this.mediaRecorder=null,this.dataWindow=null,this.isWaveformPaused=!1,this.lastStartTime=0,this.lastDuration=0,this.duration=0,this.timer=new s,this.subscriptions.push(this.timer.on("tick",(()=>{const t=performance.now()-this.lastStartTime;this.duration=this.isPaused()?this.duration:this.lastDuration+t,this.emit("record-progress",this.duration)})))}static create(t){return new r(t||{})}renderMicStream(t){var i;const e=new AudioContext,s=e.createMediaStreamSource(t),o=e.createAnalyser();s.connect(o),this.options.continuousWaveform&&(o.fftSize=32);const r=o.frequencyBinCount,n=new Float32Array(r);let a=0;this.wavesurfer&&(null!==(i=this.originalOptions)&&void 0!==i||(this.originalOptions=Object.assign({},this.wavesurfer.options)),this.wavesurfer.options.interact=!1,this.options.scrollingWaveform&&(this.wavesurfer.options.cursorWidth=0));const d=setInterval((()=>{var t,i,s,d;if(!this.isWaveformPaused){if(o.getFloatTimeDomainData(n),this.options.scrollingWaveform){const t=Math.floor((this.options.scrollingWaveformWindow||0)*e.sampleRate),i=Math.min(t,this.dataWindow?this.dataWindow.length+r:r),s=new Float32Array(t);if(this.dataWindow){const e=Math.max(0,t-this.dataWindow.length);s.set(this.dataWindow.slice(-i+r),e)}s.set(n,t-r),this.dataWindow=s}else if(this.options.continuousWaveform){if(!this.dataWindow){const e=this.options.continuousWaveformDuration?Math.round(100*this.options.continuousWaveformDuration):(null!==(i=null===(t=this.wavesurfer)||void 0===t?void 0:t.getWidth())&&void 0!==i?i:0)*window.devicePixelRatio;this.dataWindow=new Float32Array(e)}let e=0;for(let t=0;t<r;t++){const i=Math.abs(n[t]);i>e&&(e=i)}if(a+1>this.dataWindow.length){const t=new Float32Array(2*this.dataWindow.length);t.set(this.dataWindow,0),this.dataWindow=t}this.dataWindow[a]=e,a++}else this.dataWindow=n;if(this.wavesurfer){const t=(null!==(d=null===(s=this.dataWindow)||void 0===s?void 0:s.length)&&void 0!==d?d:0)/100;this.wavesurfer.load("",[this.dataWindow],this.options.scrollingWaveform?this.options.scrollingWaveformWindow:t).then((()=>{this.wavesurfer&&this.options.continuousWaveform&&(this.wavesurfer.setTime(this.getDuration()/1e3),this.wavesurfer.options.minPxPerSec||this.wavesurfer.setOptions({minPxPerSec:this.wavesurfer.getWidth()/this.wavesurfer.getDuration()}))})).catch((t=>{console.error("Error rendering real-time recording data:",t)}))}}}),10);return{onDestroy:()=>{clearInterval(d),null==s||s.disconnect(),null==e||e.close()},onEnd:()=>{this.isWaveformPaused=!0,clearInterval(d),this.stopMic()}}}startMic(i){return t(this,void 0,void 0,(function*(){let t;try{t=yield navigator.mediaDevices.getUserMedia({audio:!(null==i?void 0:i.deviceId)||{deviceId:i.deviceId}})}catch(t){throw new Error("Error accessing the microphone: "+t.message)}const{onDestroy:e,onEnd:s}=this.renderMicStream(t);return this.subscriptions.push(this.once("destroy",e)),this.subscriptions.push(this.once("record-end",s)),this.stream=t,t}))}stopMic(){this.stream&&(this.stream.getTracks().forEach((t=>t.stop())),this.stream=null,this.mediaRecorder=null)}startRecording(i){return t(this,void 0,void 0,(function*(){const t=this.stream||(yield this.startMic(i));this.dataWindow=null;const e=this.mediaRecorder||new MediaRecorder(t,{mimeType:this.options.mimeType||o.find((t=>MediaRecorder.isTypeSupported(t))),audioBitsPerSecond:this.options.audioBitsPerSecond});this.mediaRecorder=e,this.stopRecording();const s=[];e.ondataavailable=t=>{t.data.size>0&&s.push(t.data),this.emit("record-data-available",t.data)};const r=t=>{var i;const o=new Blob(s,{type:e.mimeType});this.emit(t,o),this.options.renderRecordedAudio&&(this.applyOriginalOptionsIfNeeded(),null===(i=this.wavesurfer)||void 0===i||i.load(URL.createObjectURL(o)))};e.onpause=()=>r("record-pause"),e.onstop=()=>r("record-end"),e.start(this.options.mediaRecorderTimeslice),this.lastStartTime=performance.now(),this.lastDuration=0,this.duration=0,this.isWaveformPaused=!1,this.timer.start(),this.emit("record-start")}))}getDuration(){return this.duration}isRecording(){var t;return"recording"===(null===(t=this.mediaRecorder)||void 0===t?void 0:t.state)}isPaused(){var t;return"paused"===(null===(t=this.mediaRecorder)||void 0===t?void 0:t.state)}isActive(){var t;return"inactive"!==(null===(t=this.mediaRecorder)||void 0===t?void 0:t.state)}stopRecording(){var t;this.isActive()&&(null===(t=this.mediaRecorder)||void 0===t||t.stop(),this.timer.stop())}pauseRecording(){var t,i;this.isRecording()&&(this.isWaveformPaused=!0,null===(t=this.mediaRecorder)||void 0===t||t.requestData(),null===(i=this.mediaRecorder)||void 0===i||i.pause(),this.timer.stop(),this.lastDuration=this.duration)}resumeRecording(){var t;this.isPaused()&&(this.isWaveformPaused=!1,null===(t=this.mediaRecorder)||void 0===t||t.resume(),this.timer.start(),this.lastStartTime=performance.now(),this.emit("record-resume"))}static getAvailableAudioDevices(){return t(this,void 0,void 0,(function*(){return navigator.mediaDevices.enumerateDevices().then((t=>t.filter((t=>"audioinput"===t.kind))))}))}destroy(){this.applyOriginalOptionsIfNeeded(),super.destroy(),this.stopRecording(),this.stopMic()}applyOriginalOptionsIfNeeded(){this.wavesurfer&&this.originalOptions&&(this.wavesurfer.setOptions(this.originalOptions),delete this.originalOptions)}}module.exports=r;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
function
|
|
1
|
+
function t(t,i,e,s){return new(e||(e=Promise))((function(o,r){function n(t){try{d(s.next(t))}catch(t){r(t)}}function a(t){try{d(s.throw(t))}catch(t){r(t)}}function d(t){var i;t.done?o(t.value):(i=t.value,i instanceof e?i:new e((function(t){t(i)}))).then(n,a)}d((s=s.apply(t,i||[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;class i{constructor(){this.listeners={}}on(t,i,e){if(this.listeners[t]||(this.listeners[t]=new Set),this.listeners[t].add(i),null==e?void 0:e.once){const e=()=>{this.un(t,e),this.un(t,i)};return this.on(t,e),e}return()=>this.un(t,i)}un(t,i){var e;null===(e=this.listeners[t])||void 0===e||e.delete(i)}once(t,i){return this.on(t,i,{once:!0})}unAll(){this.listeners={}}emit(t,...i){this.listeners[t]&&this.listeners[t].forEach((t=>t(...i)))}}class e extends i{constructor(t){super(),this.subscriptions=[],this.options=t}onInit(){}_init(t){this.wavesurfer=t,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach((t=>t()))}}class s extends i{constructor(){super(...arguments),this.unsubscribe=()=>{}}start(){this.unsubscribe=this.on("tick",(()=>{requestAnimationFrame((()=>{this.emit("tick")}))})),this.emit("tick")}stop(){this.unsubscribe()}destroy(){this.unsubscribe()}}const o=["audio/webm","audio/wav","audio/mpeg","audio/mp4","audio/mp3"];class r extends e{constructor(t){var i,e,o,r,n,a;super(Object.assign(Object.assign({},t),{audioBitsPerSecond:null!==(i=t.audioBitsPerSecond)&&void 0!==i?i:128e3,scrollingWaveform:null!==(e=t.scrollingWaveform)&&void 0!==e&&e,scrollingWaveformWindow:null!==(o=t.scrollingWaveformWindow)&&void 0!==o?o:5,continuousWaveform:null!==(r=t.continuousWaveform)&&void 0!==r&&r,renderRecordedAudio:null===(n=t.renderRecordedAudio)||void 0===n||n,mediaRecorderTimeslice:null!==(a=t.mediaRecorderTimeslice)&&void 0!==a?a:void 0})),this.stream=null,this.mediaRecorder=null,this.dataWindow=null,this.isWaveformPaused=!1,this.lastStartTime=0,this.lastDuration=0,this.duration=0,this.timer=new s,this.subscriptions.push(this.timer.on("tick",(()=>{const t=performance.now()-this.lastStartTime;this.duration=this.isPaused()?this.duration:this.lastDuration+t,this.emit("record-progress",this.duration)})))}static create(t){return new r(t||{})}renderMicStream(t){var i;const e=new AudioContext,s=e.createMediaStreamSource(t),o=e.createAnalyser();s.connect(o),this.options.continuousWaveform&&(o.fftSize=32);const r=o.frequencyBinCount,n=new Float32Array(r);let a=0;this.wavesurfer&&(null!==(i=this.originalOptions)&&void 0!==i||(this.originalOptions=Object.assign({},this.wavesurfer.options)),this.wavesurfer.options.interact=!1,this.options.scrollingWaveform&&(this.wavesurfer.options.cursorWidth=0));const d=setInterval((()=>{var t,i,s,d;if(!this.isWaveformPaused){if(o.getFloatTimeDomainData(n),this.options.scrollingWaveform){const t=Math.floor((this.options.scrollingWaveformWindow||0)*e.sampleRate),i=Math.min(t,this.dataWindow?this.dataWindow.length+r:r),s=new Float32Array(t);if(this.dataWindow){const e=Math.max(0,t-this.dataWindow.length);s.set(this.dataWindow.slice(-i+r),e)}s.set(n,t-r),this.dataWindow=s}else if(this.options.continuousWaveform){if(!this.dataWindow){const e=this.options.continuousWaveformDuration?Math.round(100*this.options.continuousWaveformDuration):(null!==(i=null===(t=this.wavesurfer)||void 0===t?void 0:t.getWidth())&&void 0!==i?i:0)*window.devicePixelRatio;this.dataWindow=new Float32Array(e)}let e=0;for(let t=0;t<r;t++){const i=Math.abs(n[t]);i>e&&(e=i)}if(a+1>this.dataWindow.length){const t=new Float32Array(2*this.dataWindow.length);t.set(this.dataWindow,0),this.dataWindow=t}this.dataWindow[a]=e,a++}else this.dataWindow=n;if(this.wavesurfer){const t=(null!==(d=null===(s=this.dataWindow)||void 0===s?void 0:s.length)&&void 0!==d?d:0)/100;this.wavesurfer.load("",[this.dataWindow],this.options.scrollingWaveform?this.options.scrollingWaveformWindow:t).then((()=>{this.wavesurfer&&this.options.continuousWaveform&&(this.wavesurfer.setTime(this.getDuration()/1e3),this.wavesurfer.options.minPxPerSec||this.wavesurfer.setOptions({minPxPerSec:this.wavesurfer.getWidth()/this.wavesurfer.getDuration()}))})).catch((t=>{console.error("Error rendering real-time recording data:",t)}))}}}),10);return{onDestroy:()=>{clearInterval(d),null==s||s.disconnect(),null==e||e.close()},onEnd:()=>{this.isWaveformPaused=!0,clearInterval(d),this.stopMic()}}}startMic(i){return t(this,void 0,void 0,(function*(){let t;try{t=yield navigator.mediaDevices.getUserMedia({audio:!(null==i?void 0:i.deviceId)||{deviceId:i.deviceId}})}catch(t){throw new Error("Error accessing the microphone: "+t.message)}const{onDestroy:e,onEnd:s}=this.renderMicStream(t);return this.subscriptions.push(this.once("destroy",e)),this.subscriptions.push(this.once("record-end",s)),this.stream=t,t}))}stopMic(){this.stream&&(this.stream.getTracks().forEach((t=>t.stop())),this.stream=null,this.mediaRecorder=null)}startRecording(i){return t(this,void 0,void 0,(function*(){const t=this.stream||(yield this.startMic(i));this.dataWindow=null;const e=this.mediaRecorder||new MediaRecorder(t,{mimeType:this.options.mimeType||o.find((t=>MediaRecorder.isTypeSupported(t))),audioBitsPerSecond:this.options.audioBitsPerSecond});this.mediaRecorder=e,this.stopRecording();const s=[];e.ondataavailable=t=>{t.data.size>0&&s.push(t.data),this.emit("record-data-available",t.data)};const r=t=>{var i;const o=new Blob(s,{type:e.mimeType});this.emit(t,o),this.options.renderRecordedAudio&&(this.applyOriginalOptionsIfNeeded(),null===(i=this.wavesurfer)||void 0===i||i.load(URL.createObjectURL(o)))};e.onpause=()=>r("record-pause"),e.onstop=()=>r("record-end"),e.start(this.options.mediaRecorderTimeslice),this.lastStartTime=performance.now(),this.lastDuration=0,this.duration=0,this.isWaveformPaused=!1,this.timer.start(),this.emit("record-start")}))}getDuration(){return this.duration}isRecording(){var t;return"recording"===(null===(t=this.mediaRecorder)||void 0===t?void 0:t.state)}isPaused(){var t;return"paused"===(null===(t=this.mediaRecorder)||void 0===t?void 0:t.state)}isActive(){var t;return"inactive"!==(null===(t=this.mediaRecorder)||void 0===t?void 0:t.state)}stopRecording(){var t;this.isActive()&&(null===(t=this.mediaRecorder)||void 0===t||t.stop(),this.timer.stop())}pauseRecording(){var t,i;this.isRecording()&&(this.isWaveformPaused=!0,null===(t=this.mediaRecorder)||void 0===t||t.requestData(),null===(i=this.mediaRecorder)||void 0===i||i.pause(),this.timer.stop(),this.lastDuration=this.duration)}resumeRecording(){var t;this.isPaused()&&(this.isWaveformPaused=!1,null===(t=this.mediaRecorder)||void 0===t||t.resume(),this.timer.start(),this.lastStartTime=performance.now(),this.emit("record-resume"))}static getAvailableAudioDevices(){return t(this,void 0,void 0,(function*(){return navigator.mediaDevices.enumerateDevices().then((t=>t.filter((t=>"audioinput"===t.kind))))}))}destroy(){this.applyOriginalOptionsIfNeeded(),super.destroy(),this.stopRecording(),this.stopMic()}applyOriginalOptionsIfNeeded(){this.wavesurfer&&this.originalOptions&&(this.wavesurfer.setOptions(this.originalOptions),delete this.originalOptions)}}export{r as default};
|
package/dist/plugins/record.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
function
|
|
1
|
+
function t(t,i,e,s){return new(e||(e=Promise))((function(o,r){function n(t){try{d(s.next(t))}catch(t){r(t)}}function a(t){try{d(s.throw(t))}catch(t){r(t)}}function d(t){var i;t.done?o(t.value):(i=t.value,i instanceof e?i:new e((function(t){t(i)}))).then(n,a)}d((s=s.apply(t,i||[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;class i{constructor(){this.listeners={}}on(t,i,e){if(this.listeners[t]||(this.listeners[t]=new Set),this.listeners[t].add(i),null==e?void 0:e.once){const e=()=>{this.un(t,e),this.un(t,i)};return this.on(t,e),e}return()=>this.un(t,i)}un(t,i){var e;null===(e=this.listeners[t])||void 0===e||e.delete(i)}once(t,i){return this.on(t,i,{once:!0})}unAll(){this.listeners={}}emit(t,...i){this.listeners[t]&&this.listeners[t].forEach((t=>t(...i)))}}class e extends i{constructor(t){super(),this.subscriptions=[],this.options=t}onInit(){}_init(t){this.wavesurfer=t,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach((t=>t()))}}class s extends i{constructor(){super(...arguments),this.unsubscribe=()=>{}}start(){this.unsubscribe=this.on("tick",(()=>{requestAnimationFrame((()=>{this.emit("tick")}))})),this.emit("tick")}stop(){this.unsubscribe()}destroy(){this.unsubscribe()}}const o=["audio/webm","audio/wav","audio/mpeg","audio/mp4","audio/mp3"];class r extends e{constructor(t){var i,e,o,r,n,a;super(Object.assign(Object.assign({},t),{audioBitsPerSecond:null!==(i=t.audioBitsPerSecond)&&void 0!==i?i:128e3,scrollingWaveform:null!==(e=t.scrollingWaveform)&&void 0!==e&&e,scrollingWaveformWindow:null!==(o=t.scrollingWaveformWindow)&&void 0!==o?o:5,continuousWaveform:null!==(r=t.continuousWaveform)&&void 0!==r&&r,renderRecordedAudio:null===(n=t.renderRecordedAudio)||void 0===n||n,mediaRecorderTimeslice:null!==(a=t.mediaRecorderTimeslice)&&void 0!==a?a:void 0})),this.stream=null,this.mediaRecorder=null,this.dataWindow=null,this.isWaveformPaused=!1,this.lastStartTime=0,this.lastDuration=0,this.duration=0,this.timer=new s,this.subscriptions.push(this.timer.on("tick",(()=>{const t=performance.now()-this.lastStartTime;this.duration=this.isPaused()?this.duration:this.lastDuration+t,this.emit("record-progress",this.duration)})))}static create(t){return new r(t||{})}renderMicStream(t){var i;const e=new AudioContext,s=e.createMediaStreamSource(t),o=e.createAnalyser();s.connect(o),this.options.continuousWaveform&&(o.fftSize=32);const r=o.frequencyBinCount,n=new Float32Array(r);let a=0;this.wavesurfer&&(null!==(i=this.originalOptions)&&void 0!==i||(this.originalOptions=Object.assign({},this.wavesurfer.options)),this.wavesurfer.options.interact=!1,this.options.scrollingWaveform&&(this.wavesurfer.options.cursorWidth=0));const d=setInterval((()=>{var t,i,s,d;if(!this.isWaveformPaused){if(o.getFloatTimeDomainData(n),this.options.scrollingWaveform){const t=Math.floor((this.options.scrollingWaveformWindow||0)*e.sampleRate),i=Math.min(t,this.dataWindow?this.dataWindow.length+r:r),s=new Float32Array(t);if(this.dataWindow){const e=Math.max(0,t-this.dataWindow.length);s.set(this.dataWindow.slice(-i+r),e)}s.set(n,t-r),this.dataWindow=s}else if(this.options.continuousWaveform){if(!this.dataWindow){const e=this.options.continuousWaveformDuration?Math.round(100*this.options.continuousWaveformDuration):(null!==(i=null===(t=this.wavesurfer)||void 0===t?void 0:t.getWidth())&&void 0!==i?i:0)*window.devicePixelRatio;this.dataWindow=new Float32Array(e)}let e=0;for(let t=0;t<r;t++){const i=Math.abs(n[t]);i>e&&(e=i)}if(a+1>this.dataWindow.length){const t=new Float32Array(2*this.dataWindow.length);t.set(this.dataWindow,0),this.dataWindow=t}this.dataWindow[a]=e,a++}else this.dataWindow=n;if(this.wavesurfer){const t=(null!==(d=null===(s=this.dataWindow)||void 0===s?void 0:s.length)&&void 0!==d?d:0)/100;this.wavesurfer.load("",[this.dataWindow],this.options.scrollingWaveform?this.options.scrollingWaveformWindow:t).then((()=>{this.wavesurfer&&this.options.continuousWaveform&&(this.wavesurfer.setTime(this.getDuration()/1e3),this.wavesurfer.options.minPxPerSec||this.wavesurfer.setOptions({minPxPerSec:this.wavesurfer.getWidth()/this.wavesurfer.getDuration()}))})).catch((t=>{console.error("Error rendering real-time recording data:",t)}))}}}),10);return{onDestroy:()=>{clearInterval(d),null==s||s.disconnect(),null==e||e.close()},onEnd:()=>{this.isWaveformPaused=!0,clearInterval(d),this.stopMic()}}}startMic(i){return t(this,void 0,void 0,(function*(){let t;try{t=yield navigator.mediaDevices.getUserMedia({audio:!(null==i?void 0:i.deviceId)||{deviceId:i.deviceId}})}catch(t){throw new Error("Error accessing the microphone: "+t.message)}const{onDestroy:e,onEnd:s}=this.renderMicStream(t);return this.subscriptions.push(this.once("destroy",e)),this.subscriptions.push(this.once("record-end",s)),this.stream=t,t}))}stopMic(){this.stream&&(this.stream.getTracks().forEach((t=>t.stop())),this.stream=null,this.mediaRecorder=null)}startRecording(i){return t(this,void 0,void 0,(function*(){const t=this.stream||(yield this.startMic(i));this.dataWindow=null;const e=this.mediaRecorder||new MediaRecorder(t,{mimeType:this.options.mimeType||o.find((t=>MediaRecorder.isTypeSupported(t))),audioBitsPerSecond:this.options.audioBitsPerSecond});this.mediaRecorder=e,this.stopRecording();const s=[];e.ondataavailable=t=>{t.data.size>0&&s.push(t.data),this.emit("record-data-available",t.data)};const r=t=>{var i;const o=new Blob(s,{type:e.mimeType});this.emit(t,o),this.options.renderRecordedAudio&&(this.applyOriginalOptionsIfNeeded(),null===(i=this.wavesurfer)||void 0===i||i.load(URL.createObjectURL(o)))};e.onpause=()=>r("record-pause"),e.onstop=()=>r("record-end"),e.start(this.options.mediaRecorderTimeslice),this.lastStartTime=performance.now(),this.lastDuration=0,this.duration=0,this.isWaveformPaused=!1,this.timer.start(),this.emit("record-start")}))}getDuration(){return this.duration}isRecording(){var t;return"recording"===(null===(t=this.mediaRecorder)||void 0===t?void 0:t.state)}isPaused(){var t;return"paused"===(null===(t=this.mediaRecorder)||void 0===t?void 0:t.state)}isActive(){var t;return"inactive"!==(null===(t=this.mediaRecorder)||void 0===t?void 0:t.state)}stopRecording(){var t;this.isActive()&&(null===(t=this.mediaRecorder)||void 0===t||t.stop(),this.timer.stop())}pauseRecording(){var t,i;this.isRecording()&&(this.isWaveformPaused=!0,null===(t=this.mediaRecorder)||void 0===t||t.requestData(),null===(i=this.mediaRecorder)||void 0===i||i.pause(),this.timer.stop(),this.lastDuration=this.duration)}resumeRecording(){var t;this.isPaused()&&(this.isWaveformPaused=!1,null===(t=this.mediaRecorder)||void 0===t||t.resume(),this.timer.start(),this.lastStartTime=performance.now(),this.emit("record-resume"))}static getAvailableAudioDevices(){return t(this,void 0,void 0,(function*(){return navigator.mediaDevices.enumerateDevices().then((t=>t.filter((t=>"audioinput"===t.kind))))}))}destroy(){this.applyOriginalOptionsIfNeeded(),super.destroy(),this.stopRecording(),this.stopMic()}applyOriginalOptionsIfNeeded(){this.wavesurfer&&this.originalOptions&&(this.wavesurfer.setOptions(this.originalOptions),delete this.originalOptions)}}export{r as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
!function(i
|
|
1
|
+
!function(t,i){"object"==typeof exports&&"undefined"!=typeof module?module.exports=i():"function"==typeof define&&define.amd?define(i):((t="undefined"!=typeof globalThis?globalThis:t||self).WaveSurfer=t.WaveSurfer||{},t.WaveSurfer.Record=i())}(this,(function(){"use strict";function t(t,i,e,s){return new(e||(e=Promise))((function(o,r){function n(t){try{d(s.next(t))}catch(t){r(t)}}function a(t){try{d(s.throw(t))}catch(t){r(t)}}function d(t){var i;t.done?o(t.value):(i=t.value,i instanceof e?i:new e((function(t){t(i)}))).then(n,a)}d((s=s.apply(t,i||[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;class i{constructor(){this.listeners={}}on(t,i,e){if(this.listeners[t]||(this.listeners[t]=new Set),this.listeners[t].add(i),null==e?void 0:e.once){const e=()=>{this.un(t,e),this.un(t,i)};return this.on(t,e),e}return()=>this.un(t,i)}un(t,i){var e;null===(e=this.listeners[t])||void 0===e||e.delete(i)}once(t,i){return this.on(t,i,{once:!0})}unAll(){this.listeners={}}emit(t,...i){this.listeners[t]&&this.listeners[t].forEach((t=>t(...i)))}}class e extends i{constructor(t){super(),this.subscriptions=[],this.options=t}onInit(){}_init(t){this.wavesurfer=t,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach((t=>t()))}}class s extends i{constructor(){super(...arguments),this.unsubscribe=()=>{}}start(){this.unsubscribe=this.on("tick",(()=>{requestAnimationFrame((()=>{this.emit("tick")}))})),this.emit("tick")}stop(){this.unsubscribe()}destroy(){this.unsubscribe()}}const o=["audio/webm","audio/wav","audio/mpeg","audio/mp4","audio/mp3"];class r extends e{constructor(t){var i,e,o,r,n,a;super(Object.assign(Object.assign({},t),{audioBitsPerSecond:null!==(i=t.audioBitsPerSecond)&&void 0!==i?i:128e3,scrollingWaveform:null!==(e=t.scrollingWaveform)&&void 0!==e&&e,scrollingWaveformWindow:null!==(o=t.scrollingWaveformWindow)&&void 0!==o?o:5,continuousWaveform:null!==(r=t.continuousWaveform)&&void 0!==r&&r,renderRecordedAudio:null===(n=t.renderRecordedAudio)||void 0===n||n,mediaRecorderTimeslice:null!==(a=t.mediaRecorderTimeslice)&&void 0!==a?a:void 0})),this.stream=null,this.mediaRecorder=null,this.dataWindow=null,this.isWaveformPaused=!1,this.lastStartTime=0,this.lastDuration=0,this.duration=0,this.timer=new s,this.subscriptions.push(this.timer.on("tick",(()=>{const t=performance.now()-this.lastStartTime;this.duration=this.isPaused()?this.duration:this.lastDuration+t,this.emit("record-progress",this.duration)})))}static create(t){return new r(t||{})}renderMicStream(t){var i;const e=new AudioContext,s=e.createMediaStreamSource(t),o=e.createAnalyser();s.connect(o),this.options.continuousWaveform&&(o.fftSize=32);const r=o.frequencyBinCount,n=new Float32Array(r);let a=0;this.wavesurfer&&(null!==(i=this.originalOptions)&&void 0!==i||(this.originalOptions=Object.assign({},this.wavesurfer.options)),this.wavesurfer.options.interact=!1,this.options.scrollingWaveform&&(this.wavesurfer.options.cursorWidth=0));const d=setInterval((()=>{var t,i,s,d;if(!this.isWaveformPaused){if(o.getFloatTimeDomainData(n),this.options.scrollingWaveform){const t=Math.floor((this.options.scrollingWaveformWindow||0)*e.sampleRate),i=Math.min(t,this.dataWindow?this.dataWindow.length+r:r),s=new Float32Array(t);if(this.dataWindow){const e=Math.max(0,t-this.dataWindow.length);s.set(this.dataWindow.slice(-i+r),e)}s.set(n,t-r),this.dataWindow=s}else if(this.options.continuousWaveform){if(!this.dataWindow){const e=this.options.continuousWaveformDuration?Math.round(100*this.options.continuousWaveformDuration):(null!==(i=null===(t=this.wavesurfer)||void 0===t?void 0:t.getWidth())&&void 0!==i?i:0)*window.devicePixelRatio;this.dataWindow=new Float32Array(e)}let e=0;for(let t=0;t<r;t++){const i=Math.abs(n[t]);i>e&&(e=i)}if(a+1>this.dataWindow.length){const t=new Float32Array(2*this.dataWindow.length);t.set(this.dataWindow,0),this.dataWindow=t}this.dataWindow[a]=e,a++}else this.dataWindow=n;if(this.wavesurfer){const t=(null!==(d=null===(s=this.dataWindow)||void 0===s?void 0:s.length)&&void 0!==d?d:0)/100;this.wavesurfer.load("",[this.dataWindow],this.options.scrollingWaveform?this.options.scrollingWaveformWindow:t).then((()=>{this.wavesurfer&&this.options.continuousWaveform&&(this.wavesurfer.setTime(this.getDuration()/1e3),this.wavesurfer.options.minPxPerSec||this.wavesurfer.setOptions({minPxPerSec:this.wavesurfer.getWidth()/this.wavesurfer.getDuration()}))})).catch((t=>{console.error("Error rendering real-time recording data:",t)}))}}}),10);return{onDestroy:()=>{clearInterval(d),null==s||s.disconnect(),null==e||e.close()},onEnd:()=>{this.isWaveformPaused=!0,clearInterval(d),this.stopMic()}}}startMic(i){return t(this,void 0,void 0,(function*(){let t;try{t=yield navigator.mediaDevices.getUserMedia({audio:!(null==i?void 0:i.deviceId)||{deviceId:i.deviceId}})}catch(t){throw new Error("Error accessing the microphone: "+t.message)}const{onDestroy:e,onEnd:s}=this.renderMicStream(t);return this.subscriptions.push(this.once("destroy",e)),this.subscriptions.push(this.once("record-end",s)),this.stream=t,t}))}stopMic(){this.stream&&(this.stream.getTracks().forEach((t=>t.stop())),this.stream=null,this.mediaRecorder=null)}startRecording(i){return t(this,void 0,void 0,(function*(){const t=this.stream||(yield this.startMic(i));this.dataWindow=null;const e=this.mediaRecorder||new MediaRecorder(t,{mimeType:this.options.mimeType||o.find((t=>MediaRecorder.isTypeSupported(t))),audioBitsPerSecond:this.options.audioBitsPerSecond});this.mediaRecorder=e,this.stopRecording();const s=[];e.ondataavailable=t=>{t.data.size>0&&s.push(t.data),this.emit("record-data-available",t.data)};const r=t=>{var i;const o=new Blob(s,{type:e.mimeType});this.emit(t,o),this.options.renderRecordedAudio&&(this.applyOriginalOptionsIfNeeded(),null===(i=this.wavesurfer)||void 0===i||i.load(URL.createObjectURL(o)))};e.onpause=()=>r("record-pause"),e.onstop=()=>r("record-end"),e.start(this.options.mediaRecorderTimeslice),this.lastStartTime=performance.now(),this.lastDuration=0,this.duration=0,this.isWaveformPaused=!1,this.timer.start(),this.emit("record-start")}))}getDuration(){return this.duration}isRecording(){var t;return"recording"===(null===(t=this.mediaRecorder)||void 0===t?void 0:t.state)}isPaused(){var t;return"paused"===(null===(t=this.mediaRecorder)||void 0===t?void 0:t.state)}isActive(){var t;return"inactive"!==(null===(t=this.mediaRecorder)||void 0===t?void 0:t.state)}stopRecording(){var t;this.isActive()&&(null===(t=this.mediaRecorder)||void 0===t||t.stop(),this.timer.stop())}pauseRecording(){var t,i;this.isRecording()&&(this.isWaveformPaused=!0,null===(t=this.mediaRecorder)||void 0===t||t.requestData(),null===(i=this.mediaRecorder)||void 0===i||i.pause(),this.timer.stop(),this.lastDuration=this.duration)}resumeRecording(){var t;this.isPaused()&&(this.isWaveformPaused=!1,null===(t=this.mediaRecorder)||void 0===t||t.resume(),this.timer.start(),this.lastStartTime=performance.now(),this.emit("record-resume"))}static getAvailableAudioDevices(){return t(this,void 0,void 0,(function*(){return navigator.mediaDevices.enumerateDevices().then((t=>t.filter((t=>"audioinput"===t.kind))))}))}destroy(){this.applyOriginalOptionsIfNeeded(),super.destroy(),this.stopRecording(),this.stopMic()}applyOriginalOptionsIfNeeded(){this.wavesurfer&&this.originalOptions&&(this.wavesurfer.setOptions(this.originalOptions),delete this.originalOptions)}}return r}));
|
package/dist/renderer.js
CHANGED
|
@@ -1,26 +1,35 @@
|
|
|
1
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
2
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
3
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
4
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
5
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
6
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
7
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
|
+
});
|
|
9
|
+
};
|
|
10
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
11
|
+
var t = {};
|
|
12
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
13
|
+
t[p] = s[p];
|
|
14
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
15
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
16
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
17
|
+
t[p[i]] = s[p[i]];
|
|
18
|
+
}
|
|
19
|
+
return t;
|
|
20
|
+
};
|
|
1
21
|
import { makeDraggable } from './draggable.js';
|
|
2
22
|
import EventEmitter from './event-emitter.js';
|
|
3
23
|
class Renderer extends EventEmitter {
|
|
4
|
-
static MAX_CANVAS_WIDTH = 8000;
|
|
5
|
-
static MAX_NODES = 10;
|
|
6
|
-
options;
|
|
7
|
-
parent;
|
|
8
|
-
container;
|
|
9
|
-
scrollContainer;
|
|
10
|
-
wrapper;
|
|
11
|
-
canvasWrapper;
|
|
12
|
-
progressWrapper;
|
|
13
|
-
cursor;
|
|
14
|
-
timeouts = [];
|
|
15
|
-
isScrollable = false;
|
|
16
|
-
audioData = null;
|
|
17
|
-
resizeObserver = null;
|
|
18
|
-
lastContainerWidth = 0;
|
|
19
|
-
isDragging = false;
|
|
20
|
-
subscriptions = [];
|
|
21
|
-
unsubscribeOnScroll;
|
|
22
24
|
constructor(options, audioElement) {
|
|
23
25
|
super();
|
|
26
|
+
this.timeouts = [];
|
|
27
|
+
this.isScrollable = false;
|
|
28
|
+
this.audioData = null;
|
|
29
|
+
this.resizeObserver = null;
|
|
30
|
+
this.lastContainerWidth = 0;
|
|
31
|
+
this.isDragging = false;
|
|
32
|
+
this.subscriptions = [];
|
|
24
33
|
this.subscriptions = [];
|
|
25
34
|
this.options = options;
|
|
26
35
|
const parent = this.parentFromOptionsContainer(options.container);
|
|
@@ -117,15 +126,16 @@ class Renderer extends EventEmitter {
|
|
|
117
126
|
}));
|
|
118
127
|
}
|
|
119
128
|
getHeight(optionsHeight, optionsSplitChannel) {
|
|
129
|
+
var _a;
|
|
120
130
|
const defaultHeight = 128;
|
|
121
|
-
const numberOfChannels = this.audioData
|
|
131
|
+
const numberOfChannels = ((_a = this.audioData) === null || _a === void 0 ? void 0 : _a.numberOfChannels) || 1;
|
|
122
132
|
if (optionsHeight == null)
|
|
123
133
|
return defaultHeight;
|
|
124
134
|
if (!isNaN(Number(optionsHeight)))
|
|
125
135
|
return Number(optionsHeight);
|
|
126
136
|
if (optionsHeight === 'auto') {
|
|
127
137
|
const height = this.parent.clientHeight || defaultHeight;
|
|
128
|
-
if (optionsSplitChannel
|
|
138
|
+
if (optionsSplitChannel === null || optionsSplitChannel === void 0 ? void 0 : optionsSplitChannel.every((channel) => !channel.overlay))
|
|
129
139
|
return height / numberOfChannels;
|
|
130
140
|
return height;
|
|
131
141
|
}
|
|
@@ -241,10 +251,11 @@ class Renderer extends EventEmitter {
|
|
|
241
251
|
this.setScroll(scrollStart);
|
|
242
252
|
}
|
|
243
253
|
destroy() {
|
|
254
|
+
var _a, _b;
|
|
244
255
|
this.subscriptions.forEach((unsubscribe) => unsubscribe());
|
|
245
256
|
this.container.remove();
|
|
246
|
-
this.resizeObserver
|
|
247
|
-
this.unsubscribeOnScroll
|
|
257
|
+
(_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
|
|
258
|
+
(_b = this.unsubscribeOnScroll) === null || _b === void 0 ? void 0 : _b.call(this);
|
|
248
259
|
}
|
|
249
260
|
createDelay(delayMs = 10) {
|
|
250
261
|
let timeout;
|
|
@@ -478,7 +489,8 @@ class Renderer extends EventEmitter {
|
|
|
478
489
|
});
|
|
479
490
|
}
|
|
480
491
|
}
|
|
481
|
-
renderChannel(channelData,
|
|
492
|
+
renderChannel(channelData, _a, width, channelIndex) {
|
|
493
|
+
var { overlay } = _a, options = __rest(_a, ["overlay"]);
|
|
482
494
|
// A container for canvases
|
|
483
495
|
const canvasContainer = document.createElement('div');
|
|
484
496
|
const height = this.getHeight(options.height, options.splitChannels);
|
|
@@ -494,56 +506,60 @@ class Renderer extends EventEmitter {
|
|
|
494
506
|
// Render the waveform
|
|
495
507
|
this.renderMultiCanvas(channelData, options, width, height, canvasContainer, progressContainer);
|
|
496
508
|
}
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
const pixelRatio = this.getPixelRatio();
|
|
511
|
-
const parentWidth = this.scrollContainer.clientWidth;
|
|
512
|
-
const scrollWidth = Math.ceil(audioData.duration * (this.options.minPxPerSec || 0));
|
|
513
|
-
// Whether the container should scroll
|
|
514
|
-
this.isScrollable = scrollWidth > parentWidth;
|
|
515
|
-
const useParentWidth = this.options.fillParent && !this.isScrollable;
|
|
516
|
-
// Width of the waveform in pixels
|
|
517
|
-
const width = (useParentWidth ? parentWidth : scrollWidth) * pixelRatio;
|
|
518
|
-
// Set the width of the wrapper
|
|
519
|
-
this.wrapper.style.width = useParentWidth ? '100%' : `${scrollWidth}px`;
|
|
520
|
-
// Set additional styles
|
|
521
|
-
this.scrollContainer.style.overflowX = this.isScrollable ? 'auto' : 'hidden';
|
|
522
|
-
this.scrollContainer.classList.toggle('noScrollbar', !!this.options.hideScrollbar);
|
|
523
|
-
this.cursor.style.backgroundColor = `${this.options.cursorColor || this.options.progressColor}`;
|
|
524
|
-
this.cursor.style.width = `${this.options.cursorWidth}px`;
|
|
525
|
-
this.audioData = audioData;
|
|
526
|
-
this.emit('render');
|
|
527
|
-
// Render the waveform
|
|
528
|
-
if (this.options.splitChannels) {
|
|
529
|
-
// Render a waveform for each channel
|
|
530
|
-
for (let i = 0; i < audioData.numberOfChannels; i++) {
|
|
531
|
-
const options = { ...this.options, ...this.options.splitChannels?.[i] };
|
|
532
|
-
this.renderChannel([audioData.getChannelData(i)], options, width, i);
|
|
509
|
+
render(audioData) {
|
|
510
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
511
|
+
var _a;
|
|
512
|
+
// Clear previous timeouts
|
|
513
|
+
this.timeouts.forEach((clear) => clear());
|
|
514
|
+
this.timeouts = [];
|
|
515
|
+
// Clear the canvases
|
|
516
|
+
this.canvasWrapper.innerHTML = '';
|
|
517
|
+
this.progressWrapper.innerHTML = '';
|
|
518
|
+
// Width
|
|
519
|
+
if (this.options.width != null) {
|
|
520
|
+
this.scrollContainer.style.width =
|
|
521
|
+
typeof this.options.width === 'number' ? `${this.options.width}px` : this.options.width;
|
|
533
522
|
}
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
const
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
523
|
+
// Determine the width of the waveform
|
|
524
|
+
const pixelRatio = this.getPixelRatio();
|
|
525
|
+
const parentWidth = this.scrollContainer.clientWidth;
|
|
526
|
+
const scrollWidth = Math.ceil(audioData.duration * (this.options.minPxPerSec || 0));
|
|
527
|
+
// Whether the container should scroll
|
|
528
|
+
this.isScrollable = scrollWidth > parentWidth;
|
|
529
|
+
const useParentWidth = this.options.fillParent && !this.isScrollable;
|
|
530
|
+
// Width of the waveform in pixels
|
|
531
|
+
const width = (useParentWidth ? parentWidth : scrollWidth) * pixelRatio;
|
|
532
|
+
// Set the width of the wrapper
|
|
533
|
+
this.wrapper.style.width = useParentWidth ? '100%' : `${scrollWidth}px`;
|
|
534
|
+
// Set additional styles
|
|
535
|
+
this.scrollContainer.style.overflowX = this.isScrollable ? 'auto' : 'hidden';
|
|
536
|
+
this.scrollContainer.classList.toggle('noScrollbar', !!this.options.hideScrollbar);
|
|
537
|
+
this.cursor.style.backgroundColor = `${this.options.cursorColor || this.options.progressColor}`;
|
|
538
|
+
this.cursor.style.width = `${this.options.cursorWidth}px`;
|
|
539
|
+
this.audioData = audioData;
|
|
540
|
+
this.emit('render');
|
|
541
|
+
// Render the waveform
|
|
542
|
+
if (this.options.splitChannels) {
|
|
543
|
+
// Render a waveform for each channel
|
|
544
|
+
for (let i = 0; i < audioData.numberOfChannels; i++) {
|
|
545
|
+
const options = Object.assign(Object.assign({}, this.options), (_a = this.options.splitChannels) === null || _a === void 0 ? void 0 : _a[i]);
|
|
546
|
+
this.renderChannel([audioData.getChannelData(i)], options, width, i);
|
|
547
|
+
}
|
|
548
|
+
}
|
|
549
|
+
else {
|
|
550
|
+
// Render a single waveform for the first two channels (left and right)
|
|
551
|
+
const channels = [audioData.getChannelData(0)];
|
|
552
|
+
if (audioData.numberOfChannels > 1)
|
|
553
|
+
channels.push(audioData.getChannelData(1));
|
|
554
|
+
this.renderChannel(channels, this.options, width, 0);
|
|
555
|
+
}
|
|
556
|
+
// Must be emitted asynchronously for backward compatibility
|
|
557
|
+
Promise.resolve().then(() => this.emit('rendered'));
|
|
558
|
+
});
|
|
544
559
|
}
|
|
545
560
|
reRender() {
|
|
546
|
-
|
|
561
|
+
var _a;
|
|
562
|
+
(_a = this.unsubscribeOnScroll) === null || _a === void 0 ? void 0 : _a.call(this);
|
|
547
563
|
delete this.unsubscribeOnScroll;
|
|
548
564
|
// Return if the waveform has not been rendered yet
|
|
549
565
|
if (!this.audioData)
|
|
@@ -615,24 +631,28 @@ class Renderer extends EventEmitter {
|
|
|
615
631
|
this.scrollIntoView(progress, isPlaying);
|
|
616
632
|
}
|
|
617
633
|
}
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
return
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
634
|
+
exportImage(format, quality, type) {
|
|
635
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
636
|
+
const canvases = this.canvasWrapper.querySelectorAll('canvas');
|
|
637
|
+
if (!canvases.length) {
|
|
638
|
+
throw new Error('No waveform data');
|
|
639
|
+
}
|
|
640
|
+
// Data URLs
|
|
641
|
+
if (type === 'dataURL') {
|
|
642
|
+
const images = Array.from(canvases).map((canvas) => canvas.toDataURL(format, quality));
|
|
643
|
+
return Promise.resolve(images);
|
|
644
|
+
}
|
|
645
|
+
// Blobs
|
|
646
|
+
return Promise.all(Array.from(canvases).map((canvas) => {
|
|
647
|
+
return new Promise((resolve, reject) => {
|
|
648
|
+
canvas.toBlob((blob) => {
|
|
649
|
+
blob ? resolve(blob) : reject(new Error('Could not export image'));
|
|
650
|
+
}, format, quality);
|
|
651
|
+
});
|
|
652
|
+
}));
|
|
653
|
+
});
|
|
636
654
|
}
|
|
637
655
|
}
|
|
656
|
+
Renderer.MAX_CANVAS_WIDTH = 8000;
|
|
657
|
+
Renderer.MAX_NODES = 10;
|
|
638
658
|
export default Renderer;
|
package/dist/timer.js
CHANGED
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import EventEmitter from './event-emitter.js';
|
|
2
2
|
class Timer extends EventEmitter {
|
|
3
|
-
|
|
3
|
+
constructor() {
|
|
4
|
+
super(...arguments);
|
|
5
|
+
this.unsubscribe = () => undefined;
|
|
6
|
+
}
|
|
4
7
|
start() {
|
|
5
8
|
this.unsubscribe = this.on('tick', () => {
|
|
6
9
|
requestAnimationFrame(() => {
|