View source for How to Make an Audio Visualizer

{{Wiki Standards|The writing could be improved|date=February 2019}}

An '''audio visualizer''' is a type of project that displays a graph that measures the value from the loudness block. This tutorial explains three different methods to program an audio visualizer.
{{note|A microphone is required to follow and complete this tutorial.}}

<!-- Please move these examples to the corresponding methods
I don't think the below match any methods.
* https://scratch.mit.edu/projects/186791729/
* https://scratch.mit.edu/projects/250077178/ -->

==First Method==
Create a new [[sprite]], and then click 'Add Extension' in the blocks tab. Select the [[Pen Extension]].
Then run this [[script]]:
<scratchblocks>
when green flag clicked
forever
    play sound (. . .::grey) until done
end

when green flag clicked
forever
    erase all
    go to x: (0) y: (0) //The x and y value can be changed to where the line is wanted.
    pen down
    move (loudness) steps
end
</scratchblocks>

==Second Method==
For the second method, start by adding the script that will play the [[sounds]] that should be visualized.
<scratchblocks>
when green flag clicked
forever
    play sound (. . .::grey) until done
end
</scratchblocks>

Then, create three [[variables]]. For this example, the variables will be named variable1, variable2, and variable3. Add these scripts to the variables:
{{note|Double check that the Pen extension is loaded.}}
<scratchblocks>
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))
end

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

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

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

when green flag clicked
go to x: (-6) y: (16)
set size to (100)%
forever
    turn right (variable2) degrees
end

when green flag clicked
forever
    next costume
    wait (0.5) seconds
end
</scratchblocks>
Now go into the sprite's [[Paint Editor|costume editor]], select the "circle" tool, and pick a color to fill the circle. Set the "Outline" to 0. Create the circle. Then, right-click the [[costume]] and select "Duplicate" five 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 this tutorial is specifically for loudness.

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

Start with creating a list called "Audio History". Enable pen extension and microphone access. Then, create two sprites and a "when flag clicked" block with a "delete all of [Audio History]" block attached, and add the following scripts:

<scratchblocks>
when flag clicked
delete all of [Audio History v]
...
</scratchblocks>

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

<scratchblocks>
forever
    add (loudness) to [Audio History v]
    if <> then
        delete (1) of [Audio History v]
    end
</scratchblocks>
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.
<scratchblocks>
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
end
</scratchblocks>
Add the operation "(length of [Audio History v]) = 480" to the second if statement, and place a "broadcast(draw)" inside the if statement.
<scratchblocks>
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
end
</scratchblocks>
The script should look like this:
<scratchblocks>
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
end
</scratchblocks>

===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. [[projects:377495528|Here]] is an example.

Insert the "when flag clicked" block, then attach the "pen up" block.
<scratchblocks>
when flag clicked
pen up
</scratchblocks>

First, create a custom block named "Draw". Click the box titled 'run without screen refresh'.
<scratchblocks>
define Draw
...
</scratchblocks>
Add the following on the end of the define block.
<scratchblocks>
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 the line to be divided by two if it is wanted to center the line, but it can be any value that is wanted.
set pen color to [#000000]
...
</scratchblocks>
Add a "repeat (480)" block on the end containing a "pen down" and a "set y to: ()" block inside.
<scratchblocks>
repeat (480)
pen down
set y to: []
end
</scratchblocks>
Insert "(item (Visualizer Scroll) of [Audio History])" into the "set y to: ()" block, then add "pen up" and "set x to: ()" on the end.
<scratchblocks>
repeat (480)
pen down
set y to: (item (Visualizer Scroll) of [Audio History v])
pen up
set x to: []
end
</scratchblocks>
Place a "((Visualizer Scroll) - [240])"  in the "set x to: ()" block, and add a "change (Visualizer Scroll) by (1)".
<scratchblocks>
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
</scratchblocks>
The script should look like this:
<scratchblocks>
when flag clicked
pen up
</scratchblocks>
<scratchblocks>
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
</scratchblocks>
Finally, add the script below:
<scratchblocks>
when I receive [Draw v]
Draw :: #ff6580
</scratchblocks>
If the scripts look like this ↓, it is finished.
<scratchblocks>
when flag clicked
pen up
</scratchblocks>
<scratchblocks>
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
</scratchblocks>
<scratchblocks>
when I receive [Draw v]
Draw :: #ff6580
</scratchblocks>
The audio visualizer is now complete.

[[Category:Drawing and Animation Tutorials]]