Rendering spectrums with Sound.extract() by Thibault Imbert

Yesterday I wanted to try the Sound.extract() method added in Flash Player 10, I came to this (Flash Player 10 only) little test, where a simple waveform of an external mp3 is rendered.

The power of Sound.extract() is that you can render a waveform of a sound before playing it, which was not the case of SoundMixer.computeSpectrum(). More than that, Sound.extract() is more precise than computeSpectrum().

As you can imagine, you have millions of samples in a usual sound, so if you want to render it you would normally need a huge bitmap that we could scroll.

In fact there are different approaches for handling this, mine was very simple, trick on x-axis and jump some values to get an average wave which is enough here. Just to play with it, you can select an area to loop.

Well in fact this is the kind of thing where we could never stop adding stuff :)

Sources (saved for Flash CS3 but to be compiled with Flash CS4)

Comments (51)

  1. jeanphilippe wrote::

    Hi Thibault,
    Thanks for this sources because the documentation about Sound.extract is poor.
    I like your loop function.
    Can you thing it’s possible to save on the desktop a selected area of the sound ?
    Thanks
    JP

    Tuesday, October 21, 2008 at 9:39 am #
  2. Thibault Imbert wrote::

    Hi jeanphilippe,

    Happy you like it, yes it possible to extract any samples from the playing sound and save it on the hard disk. Any filter you could also be applied to the selection made :)

    best,

    Thibault

    Tuesday, October 21, 2008 at 10:57 am #
  3. doug wrote::

    Er wow!
    Nice work Mr T.

    Tuesday, October 21, 2008 at 12:11 pm #
  4. Tek wrote::

    Good work, you keep it really simple.

    Now waiting for the real fast Fourier transform class for waveform display ?

    Tuesday, October 21, 2008 at 12:38 pm #
  5. Thibault Imbert wrote::

    Hi Tek,

    Yes ! Don’t tempt me ! :)

    Tuesday, October 21, 2008 at 4:53 pm #
  6. jeanphilippe wrote::

    Merci Thibault,
    I use FileReference to save() a part of a sound on my hard disk. But i can’t read it, it’s not a MP3
    Thanks
    JP

    Tuesday, October 21, 2008 at 6:25 pm #
  7. doug wrote::

    @Tek

    I’m with you on that one! Something that actually renders the spectrum as expected would be lovely…

    I dream of such a beautiful day!

    Tuesday, October 21, 2008 at 9:09 pm #
  8. boblemarin wrote::

    Bonjour Thibault,

    i’ve been playing with the Sound.extract() function as well, but in a scratchy way and it’s been quite fun !
    see there : http://www.minimal.be/scratch/

    @jeanphilippe : ce n’est plus du mp3, mais plutôt du wave, puisque c’est décompressé.

    Tuesday, October 21, 2008 at 11:23 pm #
  9. jeanphilippe wrote::

    merci boblemarin,
    mais je ne trouve pas de solution

    Wednesday, October 22, 2008 at 7:20 am #
  10. @Tek – It is a very usefull feature to rendering the spectrums! Thx for your comment, it gives me the opinion to understand the program a liddle bit more:)
    greets , Flug

    Thursday, October 23, 2008 at 6:05 pm #
  11. Schell wrote::

    I wrote about this some time ago as well, although by just taking one sample every so often you end up showing sympathetic frequencies to the rate of your sub-sampling, resulting in a false waveform. I discussed it on my blog here-> http://blog.efnx.com/?p=75 as well as the fact that crunching through the entire array of samples all at once causes the player to lag and refuse input. Awesome highlight and loop though, sounds great!

    Friday, October 24, 2008 at 1:53 am #
  12. Thibault Imbert wrote::

    Hi Schell,

    Nice article !

    Yes, you are right, I think it would be nice to implement a zooming feature. This way, we would be able to render the full waveform without any modification :)

    best,

    Thibault

    Friday, October 24, 2008 at 2:08 am #
  13. Schell wrote::

    Hi Thibault. I’ve just written a class that does just that! Check out my new post here-> Flash Actionscript 3 Waveform Generation Class. Let me know what you think. I used your method of looping using a Timer object, it works MUCH better than using a SampleDataEvent callback!

    Saturday, October 25, 2008 at 1:58 am #
  14. Thibault Imbert wrote::

    Hi Schell,

    Very nice demo :)
    The zooming behavior is great ! I am happy to see that you liked the looping feature ;)

    Saturday, October 25, 2008 at 1:09 pm #
  15. Devaraj wrote::

    Is there any way to control speed of the mp3 played through as3 (Normalization)

    Sunday, October 26, 2008 at 9:16 am #
  16. 16ar wrote::

    hi,

    Thank you so much for this great source Thibault.

    I see in your code you use the same instruction (samples.readFloat()*128)for left/right channel. is it normal ?
    I have some difficulties understanding of the ByteArray structure for an extracted sound. If I’m right, for example for a sound of 1 second we would extract a ByteArray.length of 44100 (44khz sound) ? Or 88200 (left/right) ?

    Thank you

    Monday, November 3, 2008 at 4:34 pm #
  17. Akane wrote::

    for one second, 88200 !
    Stereo sounds, each channel has 44100 sample per second.

    If Thimbault use twice the same instructions, that’s because both channel are in one only byteArray. The first data picked is for the left channel, then the next one, right channel, and the next one, next sample for left channel .. right .. left .. etc etc

    Monday, December 8, 2008 at 2:55 am #
  18. Alama wrote::

    Quand un ingé Flash rencontre à la cafet un ingé du département ex Syntrillium.. :D Enfin, j’imagine.. :P

    Mais cette classe permet-elle d’en retirer les FFT??

    Si oui, on peut se passer de l’ancienne classe, sinon.. ben non.

    Sunday, December 21, 2008 at 4:36 am #
  19. Borovsky wrote::

    Hey guys, i made visualizer based on Sound.extract() :)
    look: http://borovsky.pl/projects/own/visualizer
    [FP10 :) ]
    my mail: fl.borovsky [ at ] gmail.com

    Monday, January 26, 2009 at 1:08 pm #
  20. Shui wrote::

    Umm how are supposed to read the frequences out of the data the method returns ?

    For creating a visualizer or comparing samples the wavespectrum isn’t nearly as interesting as a nice FFT’d bytearray.

    Anyway, great work !

    -Shui (mal_shuir@hotmail.com)

    Tuesday, January 27, 2009 at 4:26 pm #
  21. lporiginalg wrote::

    Siiiiiiiick. Thanks for posting :D

    Thursday, January 29, 2009 at 4:23 am #
  22. Grigoriy wrote::

    Thibault, can you please advise how it is possible to extract any samples from the playing sound and save it on the hard disk? What method should be used? Thank you very much.

    Thursday, January 29, 2009 at 11:40 am #
  23. sk wrote::

    Hi there, amazing work! Although I’m having a problem with your sources both in CS3 and CS4 Flashes, when I try to publish the new .swf from it I get this error msg saying:

    “1061: Call to a possibly undefined method extract through a reference with static type flash.media:Sound.”

    It’s sourced from line 66 “var lng:Number = sound.extract(samples,extract);”

    Any ideas what I’m missing here to work with it?

    Monday, April 6, 2009 at 8:42 pm #
  24. jd wrote::

    sk- i had this problem too! In the properties for your flash project, it defaults to Flash 9 compatibility. Change it to 10, and everything will be great.

    Sunday, April 26, 2009 at 8:50 pm #
  25. Rezmason wrote::

    Oh, thank you so much for posting this.

    It didn’t hit me until today that Soundmixer.computeSpectrum() only operates on the global sound output. Sound.extract() looked promising, but thanks to you I can implement sound-specific spectrums confidently knowing I’m not barking up the wrong tree.

    Tuesday, June 30, 2009 at 4:44 am #
  26. sokavei wrote::

    First thibault, your player is awesome.

    Lately, I’ve been trying to program a progress bar in as3 that uses sound.extract, I have managed to make it show the whole song in wave but I still get a major memory system issue. If anybody could help me on that I would love it.

    http://www.levortex.tv/mp3player/mp3player.html
    that’s what it looks like for now.

    I think it’s because of my byteArray…

    Thursday, October 15, 2009 at 10:16 pm #
  27. drus wrote::

    Great , thanks a lot for share it.
    Is really nice you saved the source for CS3, I publish for player 10 from Flex, and I haven’t upgraded to CS4 :)

    Tuesday, November 10, 2009 at 6:48 pm #
  28. latcho wrote::

    please kill my previous post,
    thanks
    formatting goes terribly wrong

    Friday, November 13, 2009 at 3:50 pm #
  29. Olof wrote::

    Nice work!

    I need to use this with really long audio-files over 15 min is it possible to split the sound.extract handling in to smaller chunks?

    When i use this with a 15 min file. CPU and memory peaks and some times the browser runs out of memory.

    //Olof

    Tuesday, December 15, 2009 at 10:30 pm #
  30. Gianluca wrote::

    I have no experience with CS and Flash. Someone can tell me how to see and modify the source of this software?
    Which SDK should I use?

    Thanks
    Gianluca

    Wednesday, March 3, 2010 at 4:24 pm #
  31. Chris wrote::

    I’m having a similar question like Olof above. Is it possible to read chunks and display the rendered waveform while buffering the mp3? I’ve experimented a bit with this and been trying the SoundLoaderContext but without any luck. If you have time I would be very grateful if you could give some hint.

    Sunday, March 21, 2010 at 10:53 am #
  32. Josh wrote::

    This stuff is just a bit over my head, but it looks to me like Sound.extract() need to have the audio completely loaded before it can run – is that right? I’d like to make a visualizer that interprets streaming audio. The computeSpectrum() function doesn’t really seem to be ideal in that it fires when your timer fires, rather than based on the tempo of the song. Feel free to correct me if I’ wrong. Any guidance – pretend your guiding a 4-year-old – would be a huge help.

    Thanks,

    Josh

    Sunday, May 16, 2010 at 12:56 am #
  33. Jon wrote::

    I totally love this and all your work. This is exactly what I need for a current project. Any one know how to do something similar with video from a loaded f4v?

    Monday, June 28, 2010 at 3:47 pm #
  34. Ivan wrote::

    Big thanks!!! I search some script full day! This is simple and good code!!!

    Friday, August 20, 2010 at 9:28 pm #
  35. yansern wrote::

    For those who are struggling to understand what those ambiguous numbers meant in the source code, I’ve done my own reinterpretation with commented codes & variable names to it.

    See: http://www.copypastecode.com/42860/

    Wednesday, September 22, 2010 at 6:54 am #
  36. UncleUnvoid wrote::

    I found this code, maybe it helps…..http://gerrybeauregard.wordpress.com/2010/08/03/an-fft-in-as3/

    Sunday, October 31, 2010 at 6:18 pm #
  37. carl welch wrote::

    Hi, I just downloaded the source and tried to compile and I get this:

    1061: Call to a possibly undefined method extract through a reference with static type flash.media:Sound.

    Sunday, December 19, 2010 at 10:40 pm #
  38. Mudasir wrote::

    @carl welch: In the properties of your flash project, default player is Flash 9, Change it to 10, and everything will be great.

    Thursday, December 23, 2010 at 11:28 am #
  39. Gaggo wrote::

    Me again.
    This is so great, exaclty what I was looking for, thanks!

    When I use one of my own audio files, it still needs some time to do the analysis. I wouldn’t need it as precise as it is at the moment, just very rough.

    Do you have an idea to get the same (just less precise) result with less data being analyzed?

    Tuesday, January 25, 2011 at 8:15 pm #
  40. I have a joomla based website that is in real need for an audio player like Sound.extract(). I’m not a developer — just a tinkerer. What is the best way to get this tool working on my site.

    Duane (whitcombmusic.com)

    Tuesday, March 15, 2011 at 2:35 am #
  41. Denis wrote::

    Great work and thanks a lot for the source.

    Monday, March 28, 2011 at 3:15 pm #
  42. Dieter wrote::

    Hi Thibault.

    First of all, your example is very good and you really helpt me working with the extract()-method! (Personally I needed some more information, but Yanser – post 35 – documented it nicely)

    I’m just wondering how I would make a waveform that is drawn ‘absolute’ instead of ‘relative’ to a certain waveform width?

    example:
    I have two clip; one of 4 sec and one of 8 sec.
    When drawing those 2 waveform the length is almost identical.

    What I like to get is that the length of the wave of 8 sec is double as long as the one of 4 sec?
    Can you help me with this please? I’m making a audio-editor application for my school?

    Kind regards

    Saturday, April 2, 2011 at 1:37 pm #
  43. StauntonLick wrote::

    @Devaraj

    Try http://www.sonoport.com – AS3 pitch shifting & time stretching libraries. Been very simple to use so far.

    Monday, April 4, 2011 at 2:51 pm #
  44. Subbu wrote::

    @Dieter : I am also looking for a similar kind of requirement. Where u able to complete the task?

    Wednesday, June 1, 2011 at 10:17 am #
  45. Khaled wrote::

    Hi nice post is there a way to combine
    multiple sound data like mixing them
    and save them to hard drive ?

    Saturday, June 11, 2011 at 10:54 am #
  46. sksamy wrote::

    Hi,

    your implementation of waveform and control is excellent.

    Can you share the action script & mxml

    Wednesday, February 15, 2012 at 3:42 pm #
  47. sksamy wrote::

    can you provide flex version of this

    Thursday, February 16, 2012 at 3:59 pm #
  48. Awesome article Thibault. I decided to contribute a bit to the topic having beginner programmers in mind. Check my article: http://www.marinbezhanov.com/web-development/14/actionscript-3-sound-extract-demystified-or-how-to-draw-a-waveform-in-flash/

    Sunday, March 25, 2012 at 8:09 pm #
  49. I know, this post is soooooo old.
    But i’ve found an issue.
    If the file is shorter than one second, the extract method return 0.
    C’est fâcheux…

    Thursday, July 26, 2012 at 1:49 am #
  50. Faisal wrote::

    Hello all, i am new at bytearray. I am building an application for sound mixing. when the user upload a mp3 file the application check that weather the file is clipped or not clipped, a clipped sound file are those which touch odb again and again. have you guys any idea how to achieve this in Flash as3.

    Sunday, September 23, 2012 at 12:43 pm #
  51. song wrote::

    at first,thank you for code.
    and i have a question in your code.
    why code there”do
    {
    step–;
    }
    while (step % 4);”
    what is meanning above?would you please tell me why?thank you again.

    Wednesday, August 28, 2013 at 2:44 pm #

Trackbacks/Pingbacks (6)

  1. Sexed up AS3 Visualization « Deceptive Resolution on Tuesday, October 21, 2008 at 9:11 pm

    [...] came across Using Sound.extract() in FP10 which is damn [...]

     
  2. [...] > Rendering spectrums with Sound.extract() [ by Thibault Imbert ] < ByteArray.org [...]

     
  3. [...] to the Summit Projects Flash Blog and Thibault Imbert at ByteArray for their comments and input on the different techniques that went into my [...]

     
  4. Working with the Flash Sound Object as a ByteArray « blog on Thursday, February 4, 2010 at 6:24 am

    [...] sound.extract();  This can take the sound object and turn it into a byteArray.  I came across an example by Thibault Imbert and of course the example worked very well to visualize a sound spectrum from a byte array – [...]

     
  5. Sound Visualization and Flash « OhNit on Friday, March 26, 2010 at 3:53 am

    [...] Sound.extract() ( http://www.bytearray.org/?p=329): apparently with flashplayer 10 it is possible to analyze sounds before they are [...]

     
  6. Waveform aus mp3 erzeugen!? - Seite 2 - Flashforum on Tuesday, January 25, 2011 at 6:23 pm

    [...] jetzt hab ich doch glatt was gefunden: Rendering spectrums with Sound.extract() – ByteArray.org Da wird alles beim Laden ausgelesen. Juhuuu! __________________ -> Showcase | Nonverblog [...]