|
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 |
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. |
First Method
Create a new sprite, and then click 'Add Extension' in the blocks tab. Select the Pen Extension. Then run this script:
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
Second Method
For the second method, start by adding the script that will play the sounds that should be visualized.
when green flag clicked
forever
play sound (. . .::grey) until done
end
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. |
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
Now go into the sprite's 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:
when flag clicked delete all of [Audio History v] ...
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.
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 number 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
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
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
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. Here is an example.
Insert the "when flag clicked" block, then attach the "pen up" block.
when flag clicked pen up
First, create a custom block named "Draw". Click the box titled 'run without screen refresh'.
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 number 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] ...
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.
