Audio Dialogs

• Aug 01, 2019
• 2 minutes to read

Audio dialogs include the Insert Audio and Change Audio dialogs that allow end users to insert audio content to the editor and change it, respectively.

A dialog can be invoked in the design view in the following ways.

• By clicking the Insert Audio menu toolbar or ribbon button (that is an instance of the ToolbarInsertAudioDialogButton or HEInsertAudioDialogRibbonCommand class, respectively).
• By double clicking an audio element in the editor.
• By clicking the Change Audio… context menu item.
• Programmatically, by passing the ASPxClientCommandConsts.INSERTAUDIO_DIALOG_COMMAND or ASPxClientCommandConsts.CHANGEAUDIO_DIALOG_COMMAND property value to the ASPxClientHtmlEditor.ExecuteCommand method.

Dialog Structure

An audio dialog contains three tabs listed below.

Tab caption	Tab visibility	Description
From your computer	HtmlEditorInsertMediaDialogSettings.ShowFileUploadSection	Allows end-users to upload their local files.
From the gallery	HtmlEditorFileManagerSettingsBase.Enabled	Allows end-users to add to editor content audio files from the predefined gallery. You can customize the gallery settings using the HtmlEditorInsertAudioDialogSettings.SettingsAudioSelector and HtmlEditorInsertAudioDialogSettings.SettingsAudioUpload properties.
From the web (URL)	HtmlEditorInsertMediaDialogSettings.ShowInsertFromWebSection	Allows end-users to upload files from the web.

When the More options check box is selected, the dialog displays the settings section, which allows end-users to customize audio element settings (size, position, description and style settings such as margins, border and CSS class). You can hide the check box by setting the HtmlEditorInsertMediaDialogSettingsBase.ShowMoreOptionsButton property to false.

Dialog Customization

You can customize dialog settings programmatically by using the HtmlEditorDefaultDialogSettings.InsertAudioDialog property; or using the design-time ASPxHtmlEditor Designer.

Online Demo

Insert Media Content

Related Client API

ASPxHtmlEditor provides a comprehensive API, allowing you to operate with the opened dialog programmatically on the client side.

Dialog UI elements	Client method
Common Dialog UI elements	ASPxClientHtmlEditorMediaDialogBase.GetMoreOptionsCheckBox ASPxClientHtmlEditorDialogBase.GetOkButton ASPxClientHtmlEditorDialogBase.GetCancelButton
“From the web (URL)” Tab UI elements	ASPxClientHtmlEditorLinkDialog.GetUrlTextBox
“Common Settings” Tab UI elements	ASPxClientHtmlEditorMediaDialogBase.GetWidthSpinEdit ASPxClientHtmlEditorMediaDialogBase.GetHeightSpinEdit ASPxClientHtmlEditorMediaDialogBase.GetPositionComboBox ASPxClientHtmlEditorAudioDialog.GetPreloadModeComboBox ASPxClientHtmlEditorAudioDialog.GetAutoPlayCheckBox ASPxClientHtmlEditorAudioDialog.GetLoopCheckBox ASPxClientHtmlEditorAudioDialog.GetShowPlayerControlsCheckBox
“Style Settings” Tab UI elements	ASPxClientHtmlEditorEditElementDialog.GetTopMarginTextBox ASPxClientHtmlEditorEditElementDialog.GetRightMarginTextBox ASPxClientHtmlEditorEditElementDialog.GetBottomMarginTextBox ASPxClientHtmlEditorEditElementDialog.GetLeftMarginTextBox ASPxClientHtmlEditorEditElementDialog.GetBorderWidthSpinEdit ASPxClientHtmlEditorEditElementDialog.GetBorderColorColorEdit ASPxClientHtmlEditorEditElementDialog.GetBorderStyleComboBox