Document stub.png This article or section may not have content matching Scratch Wiki editing standards. Please improve it according to Scratch Wiki:Guidelines and Scratch Wiki:Editing Conventions. (February 2019)
Reason: The writing could be improved

This tutorial will show three different ways to make an audio visualizer, which is a project that will display sound on a screen as a line (or any other kind of graph) by measuring the level of sound picked up by the microphone on the users computer.

Note Note: A microphone is required to do this tutorial.


First Method

  1. Create a new sprite.
  2. Go to the blocks area, and click the "'Add Extension" button.
  3. Select the Pen Extension
  4. Add this code to the sprite:
when green flag clicked
forever
play sound [... v] until done
when green flag clicked
forever
erase all
go to x: (0) y: (0) // you can change the x and y value to where you want the visualizer to start
pen down
move (loudness) steps

Second Method

For this method, start by adding the script that will play the sounds that should be visualized.

when green flag clicked
forever
play sound [... v] until done

Once done, create 3 variables. For this example, the variables will be named variable1, variable2, and variable3. Add these scripts with your variables:

Note Note: Make sure the Pen Extension is loaded.
when green flag clicked
forever
Set [variable1 v] to ((loudness) + (pick random ( ) to ( )))
set [variable2 v] to ((loudness) * (1))
set [variable3 v] to ((variable2) / (2))

when green flag clicked
forever
change pen color by (variable3)

when green flag clicked
set pen color to ( )
forever
pen down
change pen size by ( )
change pen size by (- )

when green flag clicked
forever
change [color v] effect by (Variable 3)

when green flag clicked
go to x: (-6) y: (16)
set size to (100)%
forever
turn right (variable2) degrees
when green flag clicked
forever
next costume
wait (0.5) seconds

Now go into the sprite's costume editor, select the "circle" tool, and pick a color. Set the "Outline" to 0. Then, right-click the costume and select "Duplicate" 5 times. Next, use the reshape tool to reshape the circle to look like a lumpy circle for costumes 2-6. (not costume 1)

Third Method

This method can be used to graph any variable, but in this tutorial, loudness specifically.

Audio History Recorder

Recording audio history keeps track of the sound level at different intervals and adds it to a list.

The pen extension, microphone access, a list called “Audio History”, and 2 sprites for this section are required.

First, create a "when flag clicked" block with a "delete all of [Audio History]" block attached, then the rest will follow.

when flag clicked
delete all of [Audio History v]
...

Second, make a forever block with a "add (volume) to [Audio History]" and an "if <> then" after the "add" block containing a "delete (1) of [Audio History]" within it.

forever
add (loudness) to [Audio History v]
if <> then
delete (1) of [Audio History v]
end

Insert "(length of [Audio History v]) > 480" (480 is the amount of pixels this tutorial uses and can be changed, 480 will fill the whole screen) into the if statement, and add a new if statement on the end.

forever
add (loudness) to [Audio History v]
if <(length of [Audio History v]) > [480]> then
delete (1) of [Audio History v]
end
if <> then
end

Add the operation "(length of [Audio History v]) = 480" to the second if statement, and place a "broadcast(draw)" inside the if statement.

forever
add (loudness) to [Audio History v]
if <(length of [Audio History v]) > [480]> then
delete (1) of [Audio History v]
end
if <(length of [Audio History v]) = [480]> then
broadcast (draw v)
end

The script should look like this:

when flag clicked
delete all of [Audio History v]
forever
add (loudness) to [Audio History v]
if <(length of [Audio History v]) > [480]> then
delete (1) of [Audio History v]
end
if <(length of [Audio History v]) = [480]> then
broadcast [draw v]
end

Visualizer

To monitor sound levels, a graph will need to be displayed on the screen. This is the line method. In this section, the second sprite will be used. A sprite-only variable called "Visualizer Scroll", the list "Audio History" from the previous section, and the pen extension are required.

Insert the "when flag clicked" block, then attach the "pen up" block.

when flag clicked
pen up

First, add a define block with screen refresh off, it can have any name but in this tutorial, it is simply called "Draw".

define Draw
...

Add the following on the end of the define block.

pen up
erase all
set [Visualizer Scroll v] to [1]
go to x: [-240] y: (item [1] of [Audio History v]) // The X is the amount of pixels across you want your line to be divided by two if you want to center your line, but it can be any value you want.
set pen color to [#000000]
...

Add a "repeat (480)" block on the end containing a "pen down" and a "set y to: ()" block inside.

repeat (480)
pen down
set y to: []
end

Insert "(item (Visualizer Scroll) of [Audio History])" into the "set y to: ()" block, then add "pen up" and "set x to: ()" on the end.

repeat (480)
pen down
set y to: (item (Visualizer Scroll) of [Audio History v])
pen up
set x to: []
end

Place a "((Visualizer Scroll) - [240])" in the "set x to: ()" block, and add a "change (Visualizer Scroll) by (1)".

repeat (480)
pen down
set y to: (item (Visualizer Scroll) of [Audio History v])
pen up
set x to: ((Visualizer Scroll) - [240])
change [Visualizer Scroll v] by [1]
end

The script should look like this:

when flag clicked
pen up
define Draw
pen up
erase all
set [Visualizer Scroll v] to [1]
go to x: [-240] y: (item [1] of [Audio History v])
set pen color to [#000000]
repeat (480)
pen down
set y to: (item (Visualizer Scroll) of [Audio History v])
pen up
set x to: ((Visualizer Scroll) - [240])
change [Visualizer Scroll v] by [1]
end

Finally, add the script below:

when I receive [Draw v]
Draw :: #ff6580

If the scripts look like this ↓, it is finished.

when flag clicked
pen up
define Draw
pen up
erase all
set [Visualizer Scroll v] to [1]
go to x: [-240] y: (item [1] of [Audio History v])
set pen color to [#000000]
repeat (480)
pen down
set y to: (item (Visualizer Scroll) of [Audio History v])
pen up
set x to: ((Visualizer Scroll) - [240])
change [Visualizer Scroll v] by [1]
end
when I receive [Draw v]
Draw :: #ff6580

The audio visualizer is now complete.

See Also