5/5/2023 0 Comments Wavesurfer vue![]() ![]() I'm using an array of wavesurfer elements, this method is called after a recording is made by the user, and the blob data is sent to this method. ![]() Installation npm install vue-wavesurfer Module As a global vue-cli plugin import Vue from 'vue' import VueWaveSurfer from 'vue-wavesurfer' Vue.use(VueWaveSurfer) As a nuxt global plugin // plugins/vue-wavesurfer.js import Vue from 'vue' import VueWaveSurfer from 'wavesurfer-vue' Vue. It can be either a unique CSS3 selector, or a DOM element. My Vue method that handles audio loading: setupRecentRecordingandSave(data, num, name) ) wavesurfer-vue Vue Wrapper for wavesurfer.js. npm install wavesurfer.js To use the library, you will need to include it from your code using CommonJS: var WaveSurfer require ( 'wavesurfer.js' ) Or ES6 syntax: import WaveSurfer from 'wavesurfer.js' Parameters The only required parameter is container. This is exactly what i'm experiencing, audio can be played and a thin line shows up, but i assume waveform never finishes downloading/decoding. A thin line will be displayed until the whole audio file is downloaded and decoded to draw the waveform.". The audio will start playing as you press play. ![]() I read into the wavesurfer doc a bit and according the the FAQ: "if you use the backend: 'MediaElement' option. Using the backend however, i can play the audio, but the waveform still never loads. Create a wavesurfer. wavesurfer examples - CodeSandbox Wavesurfer Examples and Templates Use this online wavesurfer playground to view and fork wavesurfer example apps and templates on CodeSandbox. Without using backend: "MediaElement", the component just shows up blank. On IOS Safari (and IOS Safari only, as far as i can tell), my wavesurfer component can't finish decoding the audio/loading the waveform, and a thin straight line just shows up. I'm using WavesurferJS in my VueJS application, and i've been trying to solve this issue for the past week. ![]()
0 Comments
Leave a Reply. |