Revision as of 21:10, 5 April 2021 by TheTrillion (talk | contribs) (Reworded some things.)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

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

An audio visualizer is a project that will display a graph measuring the value from the loudness block. This tutorial explains three different methods to program an audio visualizer.

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


First Method

  1. Create a new sprite.
  2. Click the Add Extension in the blocks tab.
  3. Select the Pen Extension.

This script will run the audio visualizer.

when green flag clicked
forever
    play sound [... v] 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 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
end

Once done, create 3 variables. For this example, the variables will be named variable1, variable2, and variable3. Add these scripts with the 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))
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. 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
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, 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 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.

Cookies help us deliver our services. By using our services, you agree to our use of cookies.