wavesurfer.js

问题 For my project I record user audio using MediaRecorder and it almost works fine. My problem rises when I wish to display a waveform of the user recording using Wavesurfer.js, which doesn't load my recording. Playing the recording with an Audio element works fine, though. After trying different sources, it seams that it is because the final .webm file doesn't have much metadata, not even a duration or bitrate (even though I set it in the MediaRecorder options). Here is the output from ffprobe

问题 For my project I record user audio using MediaRecorder and it almost works fine. My problem rises when I wish to display a waveform of the user recording using Wavesurfer.js, which doesn't load my recording. Playing the recording with an Audio element works fine, though. After trying different sources, it seams that it is because the final .webm file doesn't have much metadata, not even a duration or bitrate (even though I set it in the MediaRecorder options). Here is the output from ffprobe

问题 I want to play the region specified on the below code; not the whole mp3 file. This will be useful on the project I am currently working on; am build an e-commerce store. I want customers to stream that portion only before they can make a purchase. //Draws the waveform var wavesurfer = WaveSurfer.create({ container : '#waveform', barWidth : 3, barHeight : 2, fillParent : true, hideScrollbar : true, responsive : true, height : 50, waveColor : '#cccccc', progressColor : '#666666', cursorColor :

问题 I want to play the region specified on the below code; not the whole mp3 file. This will be useful on the project I am currently working on; am build an e-commerce store. I want customers to stream that portion only before they can make a purchase. //Draws the waveform var wavesurfer = WaveSurfer.create({ container : '#waveform', barWidth : 3, barHeight : 2, fillParent : true, hideScrollbar : true, responsive : true, height : 50, waveColor : '#cccccc', progressColor : '#666666', cursorColor :

问题 Not sure I'm wording this correctly but here is what I'm trying to do. I am using a function to render multiple instances of wavesurfer on a page. Out of the box this is straight forward, as you just declare each separate instance of wavesurfer : var wavesurfer1 = WaveSurfer.create({ container: domEl, barWidth: 3, ..... var wavesurfer2 = WaveSurfer.create({ container: domEl, barWidth: 3, ..... But I'm preloading JSON stored waveform data and NOT loading any audio file at page load, only when

问题 Not sure I'm wording this correctly but here is what I'm trying to do. I am using a function to render multiple instances of wavesurfer on a page. Out of the box this is straight forward, as you just declare each separate instance of wavesurfer : var wavesurfer1 = WaveSurfer.create({ container: domEl, barWidth: 3, ..... var wavesurfer2 = WaveSurfer.create({ container: domEl, barWidth: 3, ..... But I'm preloading JSON stored waveform data and NOT loading any audio file at page load, only when

问题 I am using wavesurfer.js to create a multitrack player online and want to export a remixed version of the combined tracks with levels panning etc. First I have an array of audioFiles and use this to create an array of wavesurfer elements. for(var i=0; i<audiofiles.length; i++){ spectrum[i] = WaveSurfer.create({ }); } I then create a buffer for each of these from wavesurfer backend for(var i=0; i<audiofiles.length; i++){ var ctx = spectrum[i].backend.ac; var length = spectrum[i].getDuration()

问题 I'm running this wavesurfer microphone instance and i'm running into a problem called this.stop.stream is not a function whenever i'm trying to stop the microphone after starting it. This mic does not record anything - it's just visualizing. But in chrome the mic just stays open until reload. Which is not fun for users. And m. I have found why that happens here => https://wavesurfer-js.org/api/file/src/plugin/microphone.js.html#lineNumber199 all the methods that are called after starting the

问题 I have run into a roadblock on my web project that uses Wavesurfer. I have installed wavesurfer.js and react-wavesurfer as node modules in my project. Wavesurfer.js seems to be working fine, but react-wavesurfer seems to be encountering issues that I am finding difficult to debug. The following code: import React from "react"; import WaveSurfer from "wavesurfer.js" import ReactWavesurfer from "react-wavesurfer"; class Waveform extends React.Component { makeWave() { var wavesurfer = WaveSurfer

问题 I have run into a roadblock on my web project that uses Wavesurfer. I have installed wavesurfer.js and react-wavesurfer as node modules in my project. Wavesurfer.js seems to be working fine, but react-wavesurfer seems to be encountering issues that I am finding difficult to debug. The following code: import React from "react"; import WaveSurfer from "wavesurfer.js" import ReactWavesurfer from "react-wavesurfer"; class Waveform extends React.Component { makeWave() { var wavesurfer = WaveSurfer