Audio

An audio shape keeps an audio file on the board, as a card you can play:

• Sound: the file travels with the board and can be downloaded again. It comes from an audio file or its web address, from a file card that holds one, or from your microphone.
• Card: a play button, the name, the time, the waveform of the sound, and its markers.
• Playback: a clip you choose, a volume, and an animation block that plays it at a given moment and can change its volume as it plays.
• Editing the sound: it can be cut, cleaned up, and reshaped in the audio editor.

Creating an audio shape

An audio shape reaches the board in one of five ways:

• Imported from an audio file or its web address.
• Created empty with the Audio shape tool, then given a sound.
• Recorded into a new card with a double-click.
• Converted from a file card that holds an audio file.
• Created from a sound in the audio editor.

Importing an audio file

A card made from an audio file on your device or on the web.

• Operation: drop the file on the board, or choose Import file in the App menu and pick it. Like any file, it can also be pasted, or added from its web address. See Imports.
• Needs: an MP3, WAV, or M4A file of up to 50 MB.
• Result: the card, centered where you dropped the file, with its name and the waveform of the sound.
  • The clip covers the whole file.
  • The play button turns on when the upload finishes.
• Tip: audio in another format, such as Ogg or FLAC, is added as a file card and a notice says why. Convert it to MP3, WAV, or M4A to get a player.

Creating an empty audio shape

A card with no sound yet, to record into or give a file.

• Operation:
  1. Pick Audio shape in the board objects multi-button of the Tools panel.
  2. Click where the card should go for the default size, 320 by 72, or drag to draw the box it will occupy.
• Result: an empty card that reads No file, centered on the point you clicked or at the size you drew.
  • It takes the styles set in the Attributes panel while the tool is active, the same ones a selected card offers.
• Tip: give it a sound with Replace audio in the Audio Settings section, or record into it. See Recording.

Recording into a new card

A card created and recorded into with one gesture.

• Operation:
  1. Pick Audio shape in the board objects multi-button of the Tools panel.
  2. Double-click the board. Allow microphone access if your browser asks.
  3. Record, then choose Save recording in the floating recorder to keep the take, or Cancel recording to leave the card empty.
• Result: a card of the default size, centered on the point, holding the take.
  • The tool stays active, so each double-click records into another new card.
• Tip: the recorder works as described in Recording.

Converting a file card

A card made from an audio file that is already on the board as a file card.

• Operation: select a file card that holds an MP3, WAV, or M4A file and click Convert to audio in the Actions panel.
• Result: an audio shape in the card's place, with its name and styles. The clip covers the whole file.

Creating from the audio editor

A card made from a sound you are editing.

• Operation:
  1. Select a passage, or clear the selection to use the whole sound.
  2. Choose Create shape.
• Result: a new audio card with the edited sound appears, selected:
  • Starts with the default style: and no markers.
  • Appears below the original: under the original card or table, lined up on its left edge. Each new card goes in the next free spot below.
  • Takes a numbered name: the original file name with a number, starting at 2 each time you open the editor.
• Tip: the editor stays open with your edits, so you can create more cards.

Playing

Plays the sound from the card.

• Operation: click the play button on the card.
• Result: the sound plays from the playhead to the end of the clip. Playing and the playhead are yours alone, on your device.
  • Playing a card pauses the animation and any other sound, since one sound plays at a time.
  • A card whose sound can't play reads Can't play.
• Tip: select the card and click or drag on the waveform to move the playhead.
• Tip: with the waveform focused, the arrow keys move the playhead one second, or five with Shift. Home and End jump to the ends of the clip.

Clip

Chooses the part of the file that plays.

• Operation: select the card and drag the handle at either end of the waveform, or set Clip start and Clip end in the Audio Settings section.
• Result: only the part between the two handles plays, on the card and in new Audio Animation blocks. The rest of the file is kept, and its waveform fades.
• Tip: with a handle focused, the arrow keys move it a tenth of a second, or one second with Shift.
• Tip: when the sound is replaced, a clip that played to the end plays to the new end, and a start past the new end goes back to the beginning.

Markers

Colored marks at moments of the sound, to find those moments again on the card and on the timeline.

• Operation: add, move, color, and remove them in the audio editor, then choose Apply.
• Result: each marker shows as a colored line:
  • On the card's waveform, faded when it falls outside the clip.
  • On the card's Audio Animation blocks, at the moment the block plays it.
• Each card keeps its own markers, and a duplicate starts with a copy.
• Tip: replacing the card's sound or recording over it keeps the markers that still fall inside the new sound.

Recording

Records your microphone into the card, in place of its sound or after it.

An audio item in a table cell records the same way: select it in the open table and use the same buttons in its Audio Settings.

Replacing the sound

• Operation:
  1. Select the card.
  2. Click Record audio next to the file in the Audio Settings section. The first time, the browser asks to use the microphone.
  3. Talk or play your sound. The floating recorder shows bars that move with your voice and the length of the take. Use Pause recording and Resume recording to leave a break out of the take.
  4. Choose Save recording (the check mark) to keep the take, or Cancel recording (the cross) to drop it. The card reads Saving recording until the take is ready.
• Result: the recording replaces the card's sound, and the clip covers all of it.
  • A name that came from the old file changes to the take's file name: Recording, followed by the date and time. A name you typed stays.
  • With several cards selected, one take goes into all of them.
• Tip: the floating recorder:
  • Drag it by its bar to move it. It remembers its position on this device.
  • Selecting another card or closing the Attributes panel keeps it open, and saving still writes to the card you started on.
• Tip: messages you may see:
  • Microphone blocked or No microphone found: the recording can't start.
  • Recording stopped: the microphone went away during a take, which keeps what was recorded until then.

Adding to the sound

• Operation: follow the same steps with Record and add.
• Needs: a single card with a sound of up to 15 minutes.
• Result: the recording is added after the card's sound.
  • The card keeps its file name, with the extension of the recording's format, .m4a or .wav.
  • A clip that reached the end of the sound now reaches the end of the recording.
• Tip: for both kinds of recording:
  • A recording stops on its own when it reaches the 50 MB limit for audio files.
  • With Record and add, the card's sound and the take count together toward that limit. In a browser that saves audio as WAV, a few minutes of sound fill it.
  • When the sound already fills it, Record and add shows No room to add a recording.
  • If a recording can't reach the card, for example because the upload fails, it is offered as a download so you don't lose it.

Exporting an audio shape

An image export or a print draws the card at rest: its frame, play button, name, clip length, waveform, and markers.

Editing

Changes the name shown on the card.

• Operation: double-click the card's name and type a new one. Enter or a click elsewhere keeps it; Escape cancels.
• Result: the card shows the new name in the editor, the Player, and exports.
  • An empty name keeps the previous one.
  • The file keeps its own name.

Sizing

• Dragging a corner scales the whole card.
• Dragging the left or right side changes how wide the name and the waveform are.
• Dragging the top or bottom side changes the height, which scales the name, the play button, and the waveform; the width stays.

Attributes

A selected audio shape shows these sections of the Attributes panel.

Selection info

The attributes that affect the shape as a whole.

• X: the horizontal position of the shape's pivot. Inside a frame, it's measured from the frame.
• Y: the vertical position of the pivot, also measured from the frame inside one. Which way it grows depends on the Y axis direction in the UI settings.
• W: the width of the shape.
• H: the height of the shape.
• Rotation: the angle around the pivot.
• Opacity: the transparency of the whole shape, stroke and fill included.
• Corners radius: rounds the corners of the shape.

Audio Settings

The clip, the volume, the color of the icons and the waveform, and the file.

• Clip start and Clip end: where the clip starts and ends in the file, in seconds.
• Volume: how loud the sound is, from 0 to 1.
• Icon color: the color of the waveform and the play button, beside Volume.
• File: the file behind the card.
  • Replace audio: swaps the file for another audio file and keeps the card's size and style. A name you never changed follows the new file; a renamed one stays. A clip that no longer fits the new file is shortened, with a notice.
  • Record audio: records your microphone into the card instead. See Recording.
  • Record and add: records your microphone and adds the take after the card's sound. Works with one card selected whose sound is 15 minutes or shorter.
• Info, a read-only group about the file, shown with a single card selected:
  • Original file name: the name of the file as it was added.
  • File type: its format.
  • Size: its size.
  • Duration: how long the sound is.

Text Style

The typeface and size of the name.

Font style and family

• Font style: the family of typefaces to choose from.
  • Sans Serif: plain letterforms without finishing strokes.
  • Serif: letterforms with finishing strokes, as in print.
  • Handwriting: letterforms that look written by hand.
  • Mono: every character takes the same width, as in code.
  • Display: decorative typefaces for titles.
• Font family: the typeface, within the chosen style.

Font variant

• Font variant: the weight or slant of that typeface.

Font size

• Font size: the size of the text.

Letter spacing

• Letter spacing: for text on a path, the extra space between characters along the path.

Text Fill

The color of the name's letters and its opacity.

• Text fill style: whether the characters are filled. The style decides which of the controls below appear.
  • No fill: the characters are hollow.
  • Solid fill: the characters are filled with one flat color.

Text fill color

Shown with solid text fill.

• Text fill color: the color of the characters.

Text fill opacity

Shown with solid text fill.

• Text fill opacity: the transparency of that color.

Text Outline

The outline drawn around the name's letters.

• Text stroke style: whether the characters have an outline. The style decides which of the controls below appear.
  • No stroke: no outline.
  • Solid stroke: a continuous outline.
• For solid strokes only:
  • Text stroke color: the color of the outline.
  • Text stroke opacity: the transparency of the outline.
  • Text stroke width: the thickness of the outline.
  • Over Fill: draws the outline over the fill instead of behind it, so it covers part of each character. Texts, arrows, and geometry shapes have it, while the text has a fill.

Stroke

The line around the card, with the same styles as a rectangle: none, solid, dashed, or freehand, and a roughness for a sketched look.

• Stroke style: the kind of line. The style decides which of the controls below appear.
  • No stroke: no line at all. Arrows don't offer it.
  • Solid stroke: a continuous line.
  • Dashed stroke: a line made of dashes.
• Stroke color: the color of the line.
• Stroke opacity: the transparency of the line alone.
• Stroke width: the thickness of the line.
• Stroke gap: the space between dashes.
• Stroke dash length: the length of each dash.
• Freehand stroke: a line that imitates a hand-drawn one. It adds:
  • Stroke thinning: how much the width varies along the line, from 0 to 1.
• Stroke roughness: how far the line wanders from the exact shape, as if sketched. Two more options appear when it is greater than 0:
  • Multiple strokes: draws the line twice, as a sketch would.
  • Rough vertices: lets roughness move the corners too.

Fill

How the inside of the card is painted.

• Fill style: the kind of fill. The style decides which of the controls below appear.
  • No fill: the inside stays empty.
  • Solid fill: one flat color.

Fill color

• Fill color: the color of the fill.

Fill opacity

• Fill opacity: the transparency of the fill alone.

Filter

A chain of SVG filter primitives applied to how the shape is drawn. See Shape filters.

Mask

An audio shape can be masked. See Masks.

Actions

Besides the actions every shape has, covered in What every shape shares, an audio shape offers these in the Actions panel.

Edit audio

Changes the sound itself in the audio editor: cutting, recording, levels, voice cleanup, speed, tone, and loops.

• Operation:
  1. Select an audio card, or open a table and select its audio item.
  2. Choose Edit audio in the Actions panel or the table's cell commands.
• Needs: a sound file in a format the editor can open. See Limits.
• Result: the Audio Editor panel opens with the sound, and the audio card shows as processing:
  • See the whole file: the waveform shows all of it, including sound outside the card's clip.
  • Keep working on the board: the panel stays open beside it.
  • Move or resize the panel: drag its title bar or its edges.
• Tip:
  • Only one sound opens at a time. Apply or cancel your edits before opening another.
  • Edits you haven't applied are lost if you leave the board.
  • Switching to Player mode or hiding the interface hides the editor and keeps its edits. Playback stops, and a recording in progress finishes.

Convert to file card

Turns the card into a file card that keeps the sound as a file to store or hand out.

• Operation: click Convert to file card.
• Result: a file card in the audio shape's place, titled with its name. The card's look and its animation blocks are not kept.

Download source asset

Saves the card's file to your device.

• Operation: click Download source asset.
• Needs: a card whose file has finished loading.
• Result: the file the shape uses downloads.
  • With several shapes selected, every file downloads once, in selection order, whatever kinds of shapes they are.
  • Shapes without a file are skipped.

Player interaction

• A visible card plays when clicked, in play mode and in the Player, and starting it pauses the animation.
• In the Player, clicking or dragging the waveform moves the playhead without selecting the card, and the clip handles don't show.
• A hidden card is not drawn, and its sound plays only through its animation blocks.

Animating audio

• Audio Animation: plays the sound at a moment of the animation, with fades, a speed, and a volume that can change as it plays. See Animating audio.
• Transform and opacity: the card also takes the position, rotation, resize, and opacity animations. See Transforming shapes and Revealing and hiding shapes.
• Attributes Animation: changes the card's Icon color, which colors the play button and the waveform. See Animating attributes.

Limits

• Audio files up to 50 MB, in MP3, WAV, or M4A. Other formats stay as file cards.
• The audio editor opens sounds up to 15 minutes long.