# Audio Recorder

* [Bubble.io Plugin](#element-natively-audio-recorder)
* [JavaScript SDK](#nativelyaudiorecorder)

### 🧋 Bubble.io Plugin

#### \[Element] Natively - Audio Recorder 

#### Events:

* **Recorder Result Updated** - get called after finished recording
* **Recorder Cancelled** - get called after user close recorder (without recordings)
* **File Uploaded** - get called after the file was successfully uploaded on S3 (You can find a file URL in element's state)
* **File Size over limit** - Triggered when file size is more then File Size Limit param

#### States:

* **Recorder Result (Base64)** - Base64 string representation of a file, can be used for custom uploading
* **Recorder Result (Content Type)** - image/png, image/jpeg or video/mp4
* **Uploaded File URL** - Amazon S3 file URL
* **File Size** - size of latest camera result file in KB

#### Actions:

* **Show Recorder**
  * **Upload File** - checkbox (Upload file to Amazon S3)
  * **File Name** - will be used if **Upload File** is checked
  * **File Size Limit** - (in KB) prevent uploading big files to Bubble's amazon S3
  * **Max Duration (iOS) -** max duration of recording in seconds (v2.8.2)

### 🛠 JavaScript SDK

#### NativelyAudioRecorder

{% code overflow="wrap" lineNumbers="true" %}

```javascript
const recorder = new NativelyAudioRecorder()
const show_recorder_callback = function (resp) {
    console.log(resp.base64); // base64 string of media file
    console.log(resp.content_type); // "audio/m4a" for ios or "audio/wav" for android
    console.log(resp.size); // 1024 <- file size in KB
    console.log(resp.status); // "SUCCESS", "CANCELLED" - finish with recording or just closed (cancelled)
};
recorder.showRecorder(show_recorder_callback);
```

{% endcode %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.buildnatively.com/guides/integration/audio-recorder.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.