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 (33)

  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 #

Trackbacks/Pingbacks (5)

  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 [...]