search

interactiveaudiolab / voogle

This is code for an audio search engine that uses vocal imitations of the desired sound
MIT License
37 stars 3 forks source link

wave surfer problem on stopping recording on MacOS Chrome and and Safari #35

Open interactiveaudiolab opened 5 years ago

interactiveaudiolab commented 5 years ago

When recording ends, you get a problem that crashes the frontend. Also...during recording, the waveform is not being drawn.

I'm running MacOS 10.14.1 I have the latest LTS support version of npm installed.

[Error] TypeError: null is not an object (evaluating 'this.buffer.length') value (wavesurfer.min.js:6:10452) value (wavesurfer.min.js:6:24341) (anonymous function) (wavesurfer.min.js:6:19392) (anonymous function) (wavesurfer.min.js:6:3398) forEach value (wavesurfer.min.js:6:3378) (anonymous function) (wavesurfer.min.js:6:16880) l (wavesurfer.min.js:6:31244) [Error] TypeError: null is not an object (evaluating '_this.wavesurfer.backend.buffer.getChannelData') (anonymous function) (voogle.js:148) componentDidUpdate (voogle.js:619) commitLifeCycles (react-dom.development.js:14693) commitAllLifeCycles (react-dom.development.js:15905) callCallback (react-dom.development.js:145) dispatchEvent invokeGuardedCallbackDev (react-dom.development.js:195) invokeGuardedCallback (react-dom.development.js:248) commitRoot (react-dom.development.js:16075) completeRoot (react-dom.development.js:17463) performWorkOnRoot (react-dom.development.js:17391) performWork (react-dom.development.js:17295) performSyncWork (react-dom.development.js:17267) requestWork (react-dom.development.js:17155) scheduleWork (react-dom.development.js:16949) enqueueSetState (react-dom.development.js:11623) setState (react.development.js:413) (anonymous function) (voogle.js:599) [Error] The above error occurred in the component: in Voogle

Consider adding an error boundary to your tree to customize error handling behavior. Visit https://fb.me/react-error-boundaries to learn more about error boundaries. logCapturedError (react-dom.development.js:14550) logError (react-dom.development.js:14586) callback (react-dom.development.js:15273) callCallback (react-dom.development.js:11133) commitUpdateEffects (react-dom.development.js:11172) commitUpdateQueue (react-dom.development.js:11160) commitLifeCycles (react-dom.development.js:14721) commitAllLifeCycles (react-dom.development.js:15905) callCallback (react-dom.development.js:145) dispatchEvent invokeGuardedCallbackDev (react-dom.development.js:195) invokeGuardedCallback (react-dom.development.js:248) commitRoot (react-dom.development.js:16075) completeRoot (react-dom.development.js:17463) performWorkOnRoot (react-dom.development.js:17391) performWork (react-dom.development.js:17295) performSyncWork (react-dom.development.js:17267) requestWork (react-dom.development.js:17155) scheduleWork (react-dom.development.js:16949) enqueueSetState (react-dom.development.js:11623) setState (react.development.js:413) (anonymous function) (voogle.js:599) [Error] TypeError: null is not an object (evaluating '_this.wavesurfer.backend.buffer.getChannelData') finishRendering (react-dom.development.js:148) performWork (react-dom.development.js:17317) performSyncWork (react-dom.development.js:17267) requestWork (react-dom.development.js:17155) scheduleWork (react-dom.development.js:16949) enqueueSetState (react-dom.development.js:11623) setState (react.development.js:413) (anonymous function) (voogle.js:599)

maxrmorrison commented 5 years ago

This is my best guess as to what's going on. It agrees with my suspicion that somehow the timing of events is off: drawing is trying to take place before the buffer has been filled.

maxrmorrison commented 5 years ago

The new interface solves the problem by not having WaveSurfer as a dependency :)