: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
class ET_Builder_Module_Audio extends ET_Builder_Module {
$this->name = esc_html__( 'Audio', 'et_builder' );
$this->plural = esc_html__( 'Audios', 'et_builder' );
$this->slug = 'et_pb_audio';
$this->vb_support = 'on';
$this->main_css_element = '%%order_class%%.et_pb_audio_module';
$this->settings_modal_toggles = array(
'main_content' => et_builder_i18n( 'Text' ),
'audio' => esc_html__( 'Audio', 'et_builder' ),
'image' => et_builder_i18n( 'Image' ),
'title' => et_builder_i18n( 'Image' ),
'title' => et_builder_i18n( 'Text' ),
$this->advanced_fields = array(
'label' => et_builder_i18n( 'Title' ),
'main' => "{$this->main_css_element} h2, {$this->main_css_element} h1.et_pb_module_header, {$this->main_css_element} h3.et_pb_module_header, {$this->main_css_element} h4.et_pb_module_header, {$this->main_css_element} h5.et_pb_module_header, {$this->main_css_element} h6.et_pb_module_header",
'important' => 'plugin_only',
'label' => esc_html__( 'Caption', 'et_builder' ),
'line_height' => "{$this->main_css_element} p",
'main' => "{$this->main_css_element} p",
'limited_main' => "{$this->main_css_element} p, {$this->main_css_element} p strong",
'background_color' => array(
'default' => et_builder_accent_color(),
'border_radii' => '%%order_class%% .et_pb_audio_cover_art',
'border_styles' => '%%order_class%% .et_pb_audio_cover_art',
'label_prefix' => et_builder_i18n( 'Image' ),
'tab_slug' => 'advanced',
'toggle_slug' => 'image',
'label' => esc_html__( 'Image Box Shadow', 'et_builder' ),
'option_category' => 'layout',
'tab_slug' => 'advanced',
'toggle_slug' => 'image',
'main' => '%%order_class%% .et_pb_audio_cover_art',
'default_on_fronts' => array(
'margin_padding' => array(
'padding' => '.et_pb_column %%order_class%% .et_pb_audio_module_content',
'module_alignment' => '%%order_class%%.et_pb_audio_module.et_pb_module',
'use_background_layout' => true,
'text_orientation' => '%%order_class%% .et_pb_audio_module_content',
'text_shadow' => '%%order_class%% .et_pb_audio_module_content',
'text_orientation' => array(
'default_on_front' => 'center',
'background_layout' => array(
'default_on_front' => 'dark',
'main' => '%%order_class%%',
'child_filters_target' => array(
'tab_slug' => 'advanced',
'toggle_slug' => 'image',
'main' => '%%order_class%% .et_pb_audio_cover_art',
'position_fields' => array(
$this->custom_css_fields = array(
'audio_cover_art' => array(
'label' => esc_html__( 'Audio Cover Art', 'et_builder' ),
'selector' => '.et_pb_audio_cover_art',
'audio_content' => array(
'label' => esc_html__( 'Audio Content', 'et_builder' ),
'selector' => '.et_pb_audio_module_content',
'label' => esc_html__( 'Audio Title', 'et_builder' ),
'selector' => '.et_pb_audio_module_content h2',
'label' => esc_html__( 'Audio Meta', 'et_builder' ),
'selector' => '.et_audio_module_meta',
'audio_buttons' => array(
'label' => esc_html__( 'Player Buttons', 'et_builder' ),
'selector' => "{$this->main_css_element} .mejs-button.mejs-playpause-button button:before,{$this->main_css_element} .mejs-button.mejs-volume-button.mejs-mute button:before",
'label' => esc_html__( 'Player Timer', 'et_builder' ),
'selector' => '.mejs-time.mejs-duration-container .mejs-duration',
'audio_sliders' => array(
'label' => esc_html__( 'Player Sliders', 'et_builder' ),
'selector' => "{$this->main_css_element} .et_audio_container .mejs-controls .mejs-time-rail .mejs-time-total,{$this->main_css_element} .et_audio_container .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total",
'audio_sliders_current' => array(
'label' => esc_html__( 'Player Sliders Current', 'et_builder' ),
'selector' => "{$this->main_css_element} .et_audio_container .mejs-controls .mejs-time-rail .mejs-time-current,{$this->main_css_element} .et_audio_container .mejs-controls .mejs-time-rail .mejs-time-handle,{$this->main_css_element} .et_audio_container .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current,{$this->main_css_element} .et_audio_container .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-handle",
$this->help_videos = array(
'name' => esc_html__( 'An introduction to the Audio Player module', 'et_builder' ),
public function get_transition_fields_css_props() {
$title = "{$this->main_css_element} .et_pb_module_header";
$meta = "{$this->main_css_element} .et_audio_module_meta";
$container = "{$this->main_css_element} .et_audio_container";
$fields = parent::get_transition_fields_css_props();
$fields['background_layout'] = array(
'color' => implode( ', ',
"{$container} .mejs-playpause-button button:before",
"{$container} .mejs-volume-button button:before",
"{$container} .mejs-container .mejs-controls .mejs-time span",
'background-color' => implode( ', ',
"{$container} .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total",
"{$container} .mejs-controls .mejs-time-rail .mejs-time-total",
"{$container} .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current",
"{$container} .mejs-controls .mejs-time-rail .mejs-time-current",
"{$container} .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-handle",
$fields['text_shadow_style'] = array(
'text-shadow' => implode( ', ',
"{$this->main_css_element} .et_audio_container .mejs-container .mejs-controls .mejs-time span",
'label' => esc_html__( 'Audio File', 'et_builder' ),
'option_category' => 'basic_option',
'upload_button_text' => esc_attr__( 'Upload an audio file', 'et_builder' ),
'choose_text' => esc_attr__( 'Choose an Audio file', 'et_builder' ),
'update_text' => esc_attr__( 'Set As Audio for the module', 'et_builder' ),
'description' => esc_html__( 'Define the audio file for use in the module. To remove an audio file from the module, simply delete the URL from the settings field.', 'et_builder' ),
'toggle_slug' => 'audio',
'computed_affects' => array(
'label' => et_builder_i18n( 'Title' ),
'option_category' => 'basic_option',
'description' => esc_html__( 'Define a title.', 'et_builder' ),
'toggle_slug' => 'main_content',
'dynamic_content' => 'text',
'mobile_options' => true,
'label' => esc_html__( 'Artist', 'et_builder' ),
'option_category' => 'basic_option',
'description' => esc_html__( 'Define an artist name.', 'et_builder' ),
'toggle_slug' => 'main_content',
'dynamic_content' => 'text',
'mobile_options' => true,
'label' => esc_html__( 'Album', 'et_builder' ),
'option_category' => 'basic_option',
'description' => esc_html__( 'Define an album name.', 'et_builder' ),
'toggle_slug' => 'main_content',
'dynamic_content' => 'text',
'mobile_options' => true,
'label' => et_builder_i18n( 'Image' ),
'option_category' => 'basic_option',
'upload_button_text' => et_builder_i18n( 'Upload an image' ),
'choose_text' => esc_attr__( 'Choose an Image', 'et_builder' ),
'update_text' => esc_attr__( 'Set As Image', 'et_builder' ),
'description' => esc_html__( 'Upload your desired image, or type in the URL to the image you would like to display.', 'et_builder' ),
'toggle_slug' => 'image',
'computed_affects' => array(
'dynamic_content' => 'image',
'mobile_options' => true,
'computed_callback' => array( 'ET_Builder_Module_Audio', 'get_audio' ),
'computed_depends_on' => array(
'computed_minimum' => array(
static function get_audio( $args = array(), $conditional_tags = array(), $current_page = array() ) {
$args = wp_parse_args( $args, $defaults );
// remove all filters from WP audio shortcode to make sure current theme doesn't add any elements into audio module
remove_all_filters( 'wp_audio_shortcode_library' );
remove_all_filters( 'wp_audio_shortcode' );
remove_all_filters( 'wp_audio_shortcode_class' );
return do_shortcode( sprintf( '[audio src="%s" /]', $args['audio'] ) );
function render( $attrs, $content = null, $render_slug ) {
$multi_view = et_pb_multi_view_options( $this );
$audio = $this->props['audio'];
$title = $multi_view->render_element( array(
'tag' => et_pb_process_header_level( $this->props['title_level'], 'h2' ),
'content' => '{{title}}',
'class' => 'et_pb_module_header',
$artist_name = $this->_esc_attr( 'artist_name' );
$album_name = $this->_esc_attr( 'album_name' );
$image_url = $multi_view->render_element( array(
'background-image' => 'url({{image_url}})',
'et_pb_audio_cover_art' => array(
'image_url' => '__not_empty',
'required' => 'image_url',
// Background layout data attributes.
$data_background_layout = et_pb_background_layout_options()->get_background_layout_attrs( $this->props );
$artist_name = $multi_view->render_element( array(
'content' => '{{artist_name}}',
et_get_safe_localization( _x( 'by %1$s', 'Audio Module meta information', 'et_builder' ) ),
et_core_esc_previously( $artist_name )
$album_name = $multi_view->render_element( array(
'content' => '{{album_name}}',
$meta = sprintf( '<p class="et_audio_module_meta">%1$s</p>', implode( ' | ', $metas ) );
$parallax_image_background = $this->get_parallax_image_background();
// some themes do not include these styles/scripts so we need to enqueue them in this module
wp_enqueue_style( 'wp-mediaelement' );
wp_enqueue_script( 'et-builder-mediaelement' );
// remove all filters from WP audio shortcode to make sure current theme doesn't add any elements into audio module
remove_all_filters( 'wp_audio_shortcode_library' );
remove_all_filters( 'wp_audio_shortcode' );
remove_all_filters( 'wp_audio_shortcode_class' );
$video_background = $this->video_background();
$this->add_classname( array(
// Background layout class names.
$background_layout_class_names = et_pb_background_layout_options()->get_background_layout_class( $this->props, false, true );
$this->add_classname( $background_layout_class_names );
if ( '' === $image_url ) {
$this->add_classname( 'et_pb_audio_no_image' );
// Remove automatically added module (backward compat)
$this->remove_classname( $render_slug );
// Images: Add CSS Filters and Mix Blend Mode rules (if set)
if ( array_key_exists( 'image', $this->advanced_fields ) && array_key_exists( 'css', $this->advanced_fields['image'] ) ) {
$this->add_classname( $this->generate_css_filters(
self::$data_utils->array_get( $this->advanced_fields['image']['css'], 'main', '%%order_class%%' )
// WP 4.8 or lower compatibility
if ( version_compare( $wp_version, '4.9' ) === -1 ) {
$this->add_classname( 'et_pb_audio_legacy' );
$muti_view_data_attr = $multi_view->render_attrs( array(
'et_pb_audio_no_image' => array(
'image_url' => '__empty',
'<div%6$s class="%4$s"%9$s%10$s>
<div class="et_pb_audio_module_content et_audio_container">
et_core_esc_previously( $meta ), // #2
$this->module_classname( $render_slug ), // #4
et_core_esc_previously( $image_url ), // #5
$this->module_id(), // #6
$parallax_image_background, // #8
et_core_esc_previously( $data_background_layout ), // #9
et_core_esc_previously( $muti_view_data_attr ) // #10
* Filter multi view value.
* @see ET_Builder_Module_Helper_MultiViewOptions::filter_value
* @param mixed $raw_value Props raw value.
* @type string $context Context param: content, attrs, visibility, classes.
* @type string $name Module options props name.
* @type string $mode Current data mode: desktop, hover, tablet, phone.
* @type string $attr_key Attribute key for attrs context data. Example: src, class, etc.
* @type string $attr_sub_key Attribute sub key that availabe when passing attrs value as array such as styes. Example: padding-top, margin-botton, etc.
* @param ET_Builder_Module_Helper_MultiViewOptions $multi_view Multiview object instance.
public function multi_view_filter_value( $raw_value, $args, $multi_view ) {
$name = isset( $args['name'] ) ? $args['name'] : '';
$mode = isset( $args['mode'] ) ? $args['mode'] : '';
$fields_need_escape = array(
if ( $raw_value && in_array( $name, $fields_need_escape, true ) ) {
return $this->_esc_attr( $multi_view->get_name_by_mode( $name, $mode ), 'none', $raw_value );
new ET_Builder_Module_Audio;