Audio Editor Showcase
Edit Audio
No account being used
Seed Audio
Storage Picker
Locally Uploaded Files
Drag and drop file(s) here or
No locally uploaded files found
Storage Files
No folders found
No files-to-upload found
Audio File:
Storage Picker
Locally Uploaded Files
Drag and drop file(s) here or
No locally uploaded files found
Storage Files
No folders found
No files-to-upload found
File Name:
Metatags (optional)
Title:
Album Title:
Cover Image:
Storage Picker
Locally Uploaded Files
Drag and drop file(s) here or
No locally uploaded files found
Storage Files
No folders found
No files-to-upload found
Artist:
Lyrics:
Release Year:
Language:
Additional Metatags
Component Documentation
Component Name
AudioEditor
Builder Function Name
create_audio_editor_manager
Description
Manages audio metadata editing, allowing users to seed data, modify tags, and optionally generate new audio from text
Use like example
Config
| Property | Type | Default | Description |
|---|---|---|---|
| account | object | an account object used for saving new audio to a specific user or namespace | |
| storage | object | storage definition for retrieving/saving audio and images | |
| locally_uploaded_files | any | reference to any local file state you want to pass in | |
| is_disabled | boolean | false | disables certain inputs and buttons if true |
| api_prefix | string | https://www.contibase.com/api/v1 | base api url for audio metadata endpoints |
| fetch_path_audio_read_tags | string | https://www.contibase.com/api/v1/audio/read_tags | endpoint to read audio tags (id3 metadata) from an uploaded file |
| fetch_path_audio_post | string | https://www.contibase.com/api/v1/audio | endpoint to post new or modified audio (e.g. updating metadata) |
| file_prefix | string | https://www.contibase.com/api/v1/storage/ | template path for retrieving resulting audio files by id |
| storage_default_folder_path | string | if using a storage system, sets the default folder path for picking files | |
| on_finish | function | callback triggered upon finishing (e.g., passing the newly generated audio file object) |
Methods
| Method | Description | Parameters | Returns |
|---|---|---|---|
| init | initializes the manager state and sub-managers with config values | config: object | void |
| seed | loads existing audio data or text-based info into the manager | input: object | void |
| get_audio_metadata | reads metadata (id3 tags, cover image) from a given audio file via api call | audio_file: file | promise<object> |
| resize_and_convert_image | resizes and converts an image to dataurl with a specified format | src: string max_width: number max_height: number output_format: string | promise<string> |
| set_text_to_audio_input | updates the text content used to generate audio via text-to-speech | val: string | void |
| generate_new_audio | submits form data to server to either re-tag existing audio or generate a text-to-audio file | No Params | promise<void> |
| download_audio_file | locally downloads the generated audio file to the user's machine | No Params | void |
| set_is_text_to_audio | toggles whether the editor is using text-to-audio or a standard audio file | is_text_to_audio_input: boolean | void |
| clear | resets the form fields and metadata within the manager | No Params | void |
| finish | invokes on_finish callback with the final generated audio file object | No Params | void |
Returned Properties
| Property | Type | Description |
|---|---|---|
| id | string | unique id for the audio editor instance |
| account | object | the currently set account if any |
| is_text_to_audio | boolean | true if text-to-speech is being used instead of a file |
| error_message | string | captures any error output from generating or tagging audio |
| success_message | string | captures any success message after generating or tagging audio |
| generate_audio_changes_button_manager | object | button manager controlling the 'generate audio changes' action |
| use_text_to_audio_button_manager | object | button manager controlling the switch to text-to-audio |
| select_file_from_storage_button_manager | object | button manager for opening the storage picker to choose an audio file |
| use_mp3_file_button_manager | object | button manager controlling the switch to a standard mp3 file instead of text-to-audio |
| text_to_audio_text_input_manager | object | text input manager for user-provided text that will be converted to audio |
| file_name_text_input_manager | object | text input manager for specifying the resulting mp3 file name |
| additional_tags_input_prepped | object | an object keyed by extra id3 tag frames, each containing a text_input_manager |
| additional_tag_keys_ordered | array | list of additional tag keys in the display order |
| audio_storage_picker_manager | object | storage picker manager for the main audio file |
| title_text_input_manager | object | text input manager for the 'title' id3 tag (TIT2) |
| album_title_text_input_manager | object | text input manager for the 'album' id3 tag (TALB) |
| image_storage_picker_manager | object | storage picker for the embedded album/cover image |
| image_description_text_input_manager | object | text input manager for the embedded image's description field |
| artist_text_input_manager | object | text input manager for the 'artist' id3 tag (TPE1) |
| lyrics_text_input_manager | object | text area manager for the USLT lyrics tag |
| release_year_text_input_manager | object | numeric input manager for the 'release year' tag (TYER) |
| language_dropdown_manager | object | dropdown manager for the TLAN language tag |
| is_popover | boolean | determines whether the audio editor is displayed within a popover |
| popover_manager | object | controls the main popover for editing audio |
| text_to_audio_time_in_minutes | number | estimates how long the text might take to generate as audio |
| voice_options | array | list of predefined voice profiles available for text-to-audio |
| voice_id | string | selected voice identifier for text-to-audio generation |
| edit_voice_popover_manager | object | popover manager for selecting a voice from a list |
| edit_voice_button_manager | object | button manager for triggering the voice selection popover |
| seed_from_input_popover_manager | object | popover manager for seeding audio data from another file |
| seed_from_input_popover_button_manager | object | button manager for opening the seed-from-input popover |
| seed_audio_storage_picker_manager | object | storage picker used within the seed-from-input popover |
| is_loading_generate_audio | boolean | indicates if the component is currently generating new audio or applying tags |
| generated_audio_file_obj | object | represents the newly generated audio file, including file, src, and metadata |
| audio_manager | object | an instance of create_audio_manager that can play the generated audio |
| clear_generated_audio_button_manager | object | button manager to clear any existing generated audio |
| download_audio_file_button_manager | object | button manager to download the newly generated audio file |
| clear_button_manager | object | button manager to reset/clear the entire audio editor |
| finish_button_manager | object | button manager to finalize/close the editor and invoke on_finish callback |
| additional_metatags_dropdown_manager | object | dropdown manager for selecting additional id3 frames to expose |
