
# addAudio

Audios are atomic (non-text) blocks that are used to embed audio on the webpage.

## Usage

The `addAudio` utility will help you to add audio to the editor.

```ts
addAudio(
  state: State,
  stateHandler: StateHandler,
  attributes?: AudioAttributes
) => void
```

Whenever you use an atomic block in your content, You need to [decorate](/docs/decorators/overview)
your state to make it available to render your custom non-text content.

## Example

An example of `addAudio` usage:

```ts
import { useState, useEffect } from 'react';
import { EditorState } from 'draft-js';
import { Editor, addAudio, createDecorator, findEntitiesOf } from 'contenido';

const Audio = (props) => {
  return (
    <audio controls>
      <source src={props.src} type="audio/ogg">
      Your browser does not support the audio element.
    </audio>
  );
};

const Demo = () => {
  const decorators = createDecorator([
    {
      component: Audio,
      strategy: findEntitiesOf('audio'),
    },
  ]);

  const [editorState, setEditorState] = useState(
    EditorState.createEmpty(decorators)
  );

  return (
    <>
      <Editor
        editorState={editorState}
        onChange={setEditorState}
        editorRef={editorRef}
      />
      <button
        onClick={() => {
          addAudio(editorState, setEditorState, {
            src: '', // Audio source here
          });
        }}
      >
        Add Audio
      </button>
    </>
  );
};

export default Demo;
```


Audio Block

overview

installation

getting-started

custom-styles

bold

italic

underline

line-through

overline

superscript

subscript

color

transform

inline-styles

custom-block-type

heading-1-to-6

paragraph

list

blockquote

text-alignment

block-types

link

decorators

custom-atomic-block

image-block

video-block

audio-block

file-block

atomic-count

image-count

video-count

audio-count

file-count

atomic-blocks

focus-on-editor

empty-raw-content-state

selected-blocks-map

clear-inline-styles

clear-block-types

soft-newline

clear-entities

clear

character-count

plain-text

word-array

word-count

find-entities

find-link-entities

entity-count

generate-key

helpers

shortcuts

shortcuts-map

addAudio

Usage #

Example #