katspaugh / wavesurfer.js Goto Github PK

Hello Everyone,
I am using wavesurfer.js to generate waveform.But i am faceing little bit of problem .. Needs touch the page to play audio .I have tried manually to fire touch event but still it wont works so please suggest me what should i do.
Thanks.

watch out the cursor and the bottom bar.
Here is the .gif ,which could be helpful to understand what I'm saying.

Great little lib! I only wish that it would color the waveform as it progressed

Hello,

It could be a silly question but I can't seem to figure it out.
Say I loaded buffers and I have a waveform, then I would like to clear waveform image, show it as if nothing is loaded (without reinitializing wavesurfer), how can I do it?

Thanks!

Add ability to create visual segments of audio. No UI, just programmatically (for use with ELAN markup, for instance). Segments should have customizable color overlay.

Inspiration: this nice demo.

it seems like natural behavior, and what people are used to from things like music players and soundcloud.

edit: hmmm after thinking about it i realized i can implement this in my app with an onkeyevent bound to the div holding the waveform, and then calling seek from the handler. it would still be kinda cool if this could be implemented internally.

... for that matter, a marker on hover would be cool too. same story.

Hey i tried out, this is fantastic but still remote url audio is not working. I think it could be fixed easy by you. THANKS for such a project.

1. Add two markers
2. Drag'n'drop another audio
3. No markers! Add one: the first appears in a new position, the second appears too, in a wrong position

Thanks for this plugin.

I can play a section of a file using the backend play(start, end) method, but I'm having trouble figuring out how to stop the cursor as well.

First of all, I forgot to say in another issue how great your plugin is!!! =)

Now onto the issue I am having. After I open open your example, play the audio/pause audio multiple times and then leave it for a while (sometimes less than 30 minutes, sometimes more) and try to play it again, the audio does play but the marker that shows current position does not move. By putting breakpoints and looking at it, it seems like wavesurfer.onAudioProcess does not get called anymore.

Hi katspaugh,

This may be offtopic for you at the current stage of the project, in any case I might see if I can pull this idea off myself, but I thought I’d throw the idea out there.

What about a Silence Detection plugin? This would be very useful in transcription applications, where you could play a phrase, transcribe, play another phrase, transcribe, etc.

There are analogies in other pieces of software; I believe ELAN can do it and I know there’s a plugin in Audacity that adds labels at silences:

http://manual.audacityteam.org/man/Silence_Finder_and_Sound_Finder#silence

I once wrote a simple way to do this in the old Mozilla Audio Data API, which I documented here:

http://stackoverflow.com/questions/11057429/something-like-mozaudioavailable-with-webkits-audio-api

And there is a response from Boris Smus (who wrote a book on the Web Audio API) on how it might be approached in the new standard.

One question is how one would go about handling the issue of buffering a large audio file, but I suppose you must have figured that out since you’re drawing the waveform of large files already.

Thanks,
Pat

Since RequestAnimationFrame is also available in browsers other than Chrome, could you please add a check in webaudio.js(line 28), something like:
window.RequestAnimationFrame = window.RequestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame

Hello,

I am not sure whether it's a bug or I am using stop() incorrectly. I am calling wavesurfer.stop() when user clicks on a button and i expect play position of a waveform to go back to the beginning, however, the marker does not always go back to the start of a waveform (although audio always stops playing). It could be that onaudioprocess (https://github.com/katspaugh/wavesurfer.js/blob/master/src/webaudio.js#L37) gets called in between "this.playAt(0)" and "this.pause()" (https://github.com/katspaugh/wavesurfer.js/blob/master/src/wavesurfer.js#L89).

So i want to set my minPxPerSec to 100 because I'm making horizontal music thing and it would be nice if the waveform matched everything else but as i have discovered that if minPxPerSec is set to anything more than 59, the waveform it outputs is transparent. Thanks :)

  wave.init({
    container: document.querySelector("#"+id),
    waveColor: 'violet',
    progressColor: 'purple',
    renderer: 'SVG',
    audioContext: context
  });
wave.bindDragNDrop();

I drag an audio file onto the page, and chrome goes to the page of the dropped file's url on my system, like so: "file:///home/kane/projects/beatfn-music/Chasing-The-Sun-Hardwell-Remix.mp3"
rather than loading it into wave.

i feel like i'm missing something - any suggestions or pointers?

Hello,

I noticed that if currentBuffer's max value is 0, then drawPeaks is passed value of 0 for max and factor becomes Infinity (https://github.com/katspaugh/wavesurfer.js/blob/master/src/drawer.js#L113). This causes data to contain Nan values which prevents from drawing a waveform.

Thanks!

Would it be possible to play the audio through an audio element and do only the visualization through canvas?

This would be far more accessible and gives you the option to use the HTML5 audio API.

Hello,

Is there an option somewhere that sets whether or not progress path is displayed?

Thanks!

Hi,

How is it possible to know or throw event when the playing cursor has reached a mark?

Thanks

It is possible that the example provided in:http://katspaugh.github.com/wavesurfer.js/examples/ex.fm/

not work in IE 9?

Regards

Hi,

Thanks for this great plugin.
After loading a waveform into canvas, I can't load a new waveform.
I try to clear the canvas, and then use wavesurfer.load(url) again, but I get the loading indication and then an empty canvas.
I also tried to create a new wavesurfer instance but it doesn't work as well.
How can it be done?

or at least not from my tests. (but bindDragNDrop works beautifully now :D)

this does not emit console logs (after dropping waveform and confirming it loaded successfully in the browser):

wave.bindDragNDrop($(selector+' .waveform')[0]);

  // progress bar
  wave.on('loading', function(percent, xhr) {
    console.log(percent);
    $(selector+' .loadText').hide();
    console.log($(selector+' .loadText'));
  });

this does emit console logs:

  // progress bar
  wave.on('loading', function(percent, xhr) {
    console.log(percent);
    $(selector+' .loadText').hide();
    console.log($(selector+' .loadText'));
  });
  wave.load('songs/the sky.mp3');

Hi,

Have you tried to use wavesurfer on a mobile device? I'm trying to get my app working on an Retina iPad (iOS6). Functionally everything is working fine but re-rendering the entire canvas to display the progress every audio frame is killing performance, making the app unusable.

Unfortunately my canvas expertise is limited so I have not come across a solution for this that I can share. Do you have any plans or ideas for performance improvements particularly with the drawer?

Best,
Stan

@jabr, I temporarily removed the scrollParent option and the associated functions, will reinstall them later.

Need to get back Math.abs to include negative peaks as noted by @chromakode here.

... to avoid the jerking.

So I have stored two positions marked using the following code:

startTime = wavesurfer.drawer.markers["start"].position
endTime   = wavesurfer.drawer.markers["end"].position
// Storing logic...

When I load wavesurfer I would like to be able to mark these two positions again, but can't find a way of doing it.
I tried creating marker objects and adding them to the wavesurfer.drawer.markers object, but couldn't find a way to calculate the percentage property (since I don't know when the audio has been loaded).

Is there a way of doing this easily, or could this perhaps be added as a feature?

Will need to use scrollParent.

Hi Katspaugh,

I LOVE this tool and I'm having a lot of fun playing with it. I'm working on a project using wavesurfer to look at a long audio file and then cut a section from it. That part's all easy - but I'm trying to make a dual range slider to control the "in" point and "out" point of the section I'm cutting/copying.

I use the green marker for in and the red for out, and have it set up to not allow more than one of each, and I have the time values for each go into the input boxes for "in" and "out". That's all good. But I can't seem to figure out how to MOVE a marker that has already been set. I'd like to be able to have the green marker move as soon as the value in the "in" input box is changed, so that its position on the waveform matches the value in the box.. is there a way to do this? I've spent hours playing with it and can't figure it out..

Thanks so much for making such a great tool!

Best, John

Hi katspaugh, cool library.

Question: have you had a chance to mess around with getting this running with Firefox? I know Web Audio API support isn't in the main branch yet, but it's already in Firefox Aurora so perhaps it’s a good time to look into it?

I haven’t succeeded in getting it running, but I found two things -- here -- involving renamed nodes:

diff --git a/src/webaudio.js b/src/webaudio.js
index 96b1f4a..8485331 100644
--- a/src/webaudio.js
+++ b/src/webaudio.js
@@ -11,7 +11,7 @@ WaveSurfer.WebAudio = {

     createScriptNode: function () {
         var my = this;
-        this.scriptNode = this.ac.createJavaScriptNode(256);
+        this.scriptNode = this.ac.createScriptProcessor(256);
         this.scriptNode.connect(this.ac.destination);
         this.scriptNode.onaudioprocess = function () {
             if (my.source && !my.isPaused()) {
@@ -25,7 +25,7 @@ WaveSurfer.WebAudio = {
      */
     createVolumeNode: function () {
         // Create gain node using the AudioContext
-        this.gainNode = this.ac.createGainNode();
+        this.gainNode = this.ac.createGain();

         // Add the gain node to the graph
         this.gainNode.connect(this.ac.destination);

Those two changes made some errors go away, but right now I’m getting this in the console:

[15:45:31.746] InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable @ http://glyph.local/~pat/lingapp/js/lib/wavesurfer/src/wavesurfer.js:199

The current time indicator does not work,besides,the waveform is always in this light pink style,which should become darker when the audio is being playing.

Calling wavesurfer.skipBackward() causes playback to start immediately after moving. It would be better IMHO if the current playing state was observed - i.e. if the track is currently paused, after seeking it should remain paused.

Looks like a really good project.

Hello,

I noticed that waveform is shown such that maximum pcm value in the audio buffer would occupy the whole height of the svg, thus, audio that contains only quiet sounds will look similar to the one that contains loud sounds. I think sometimes it's useful to keep max value at 1.0 instead of using max value of audio buffer. I am not sure if this is a valid use case. Let me know if my explanation does not make any sense!

Thanks!

Hi there,

I absolutely love this plugin. It works great when I try to play small MP3 files.

However, when I try to load a larger MP3 file (51 MB), I get an JS error: DOM Exception 12.
The MP3 file seems to load fine in the beginning, but in the end it's slowing down (the line which indicates that it's loading moves at a much slower rate). My Chrome browser tab also crashes at the end (gives me a purple error message).

This is the error I'm getting:

Uncaught Error: SyntaxError: DOM Exception 12 webaudio.js:66
WaveSurfer.WebAudio.loadData webaudio.js:66
(anonymous function)

When I'm looking at webaudio.js it seems to be an issue with the decodeAudioData() method.

Is this a known issue? And how can I fix this problem?

Help would be appreciated, since I'm stuck with my project right now.

Thanks in advance!

window.webkitAudioContext is not a constructor

in the documentation:

"

• loading – fires continuously when loading via XHR. Callback recieves loading progress in percents
  "

is there a way to cancel a buffer load once it's started? it's something i was hoping to be able to do and wasn't sure if you had plans for it. it's particularly useful in the case where you're streaming audio from the cloud - ie dropbox, s3, etc

(ps this library is incredible, thanks so much for making it!)

D'oh.

I dont really see any methods to get the length of the song since i would like to make the size of my container change accordingly with the length of the song. Would be very helpful if there is a method to provide the length of the song i'm sure there is one internally somewhere thanks. :)

i kept getting this error when making a wave but not initing it with a container:

TypeError: Cannot read property 'clientWidth' of null

i'm pretty sure now this is because the default container in the source code is null. this doesn't affect me, but i figured maybe i'd let you know in case you want wavesurfer to handle this more cleanly than just erroring?

I'm just wondering whether we can use the audio APis to generate a static waveform image using Node.js. For long audio files, the waveform generation takes a long time client side, so I am wondering if it's possible to move the processing to the server side, so that the audio can be pre-processed.

Hi it's me again XD so I was able to get SVG to render the waveform at 100px per second. however the SVG renderer doesn't result in an image that's as sharp as the canvas renderer but the main problem is when i try to play the music and also run other javascript, it results in a massive amount of lag for my other javascript. this didn't happen when I was using the Canvas renderer. Thanks.

PS: the music itself didn't lag but everything else did

Need to rollback 77809ac.

A regression since adding colored progress.