✏️ Editing: audio.php Writable

<?php

use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Group_Control_Typography;
use Elementor\Utils;
use Elementor\Group_Control_Border;

if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly

class Nighty_Elementor_Audio extends Widget_Base {

public function get_name() {
		return 'nighty_elementor_audio';
	}

public function get_title() {
		return esc_html__( 'Audio', 'nighty' );
	}

public function get_icon() {
		return 'eicon-play';
	}

public function get_categories() {
		return [ 'nighty' ];
	}

public function get_script_depends() {
		wp_enqueue_media();
		return [ 'nighty-elementor-audio' ];
	}
	
	protected function register_controls() {

/*TAB_CONTENT*/
		$this->start_controls_section(
			'content_section',
			[
				'label' => esc_html__( 'Content', 'nighty' ),
				'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
			]
		);

$repeater = new \Elementor\Repeater();

$repeater->add_control(
				'list_music',
				[
					'label' => esc_html__( 'Mp3 Link', 'nighty' ),
					'type' => \Elementor\Controls_Manager::URL,
					'placeholder' => esc_html__( 'https://your-link.com', 'nighty' ),
					'options' => [ 'url', 'is_external', 'nofollow' ],
					'default' => [
						'url' => '',
						'is_external' => false,
						'nofollow' => true,
					],
					'label_block' => true,
				]
			);

$repeater->add_control(
				'list_title',
				[
					'label' => esc_html__( 'Name', 'nighty' ),
					'type' => \Elementor\Controls_Manager::TEXT,
					'default' => esc_html__( 'Esther Howar' , 'nighty' ),
					'label_block' => true,
				]
			);

$this->add_control(
				'list',
				[
					'label' => esc_html__( 'Music List', 'nighty' ),
					'type' => \Elementor\Controls_Manager::REPEATER,
					'fields' => $repeater->get_controls(),
					'default' => [
						[
							'list_title' => esc_html__( 'Esther Howar', 'nighty' ),
						],
						[
							'list_title' => esc_html__( 'Jessie Werner', 'nighty' ),
						],
						[
							'list_title' => esc_html__( 'Wade Earners', 'nighty' ),
						],
						[
							'list_title' => esc_html__( 'Jenny Wileso', 'nighty' ),
						],
					],
				],
			);

$this->add_control(
				'download_icon',
				[
					'label' => esc_html__( 'Download Icon', 'nighty' ),
					'type' => \Elementor\Controls_Manager::ICONS,
					'default' => [
						'value' => 'fas fa-arrow-down',
						'library' => 'fa-solid',
					],
				]
			);

$this->add_control(
				'text_download',
				[
					'label' => esc_html__( 'Text Download', 'nighty' ),
					'type' => \Elementor\Controls_Manager::TEXT,
					'default' => esc_html__( 'Download', 'nighty' ),
				]
			);

$this->end_controls_section();
		/*TAB_CONTENT*/

$this->start_controls_section(
			'music_general',
			[
				'label' => esc_html__( 'Music General', 'nighty' ),
				'tab' => \Elementor\Controls_Manager::TAB_STYLE,
			]
		);

$this->add_control(
				'music_general_margin',
				[
					'label' => esc_html__( 'Margin', 'nighty' ),
					'type' => \Elementor\Controls_Manager::DIMENSIONS,
					'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
					'selectors' => [
						'{{WRAPPER}} .ova-audio-wrap .list-audio .item' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
					],
				]
			);

$this->add_control(
				'music_general_padding',
				[
					'label' => esc_html__( 'Padding', 'nighty' ),
					'type' => \Elementor\Controls_Manager::DIMENSIONS,
					'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
					'selectors' => [
						'{{WRAPPER}} .ova-audio-wrap .list-audio .item' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
					],
				]
			);

$this->add_control(
				'music_general_background_color',
				[
					'label' => esc_html__( 'Background Color', 'nighty' ),
					'type' => \Elementor\Controls_Manager::COLOR,
					'selectors' => [
						'{{WRAPPER}} .ova-audio-wrap .list-audio .item' => 'background-color: {{VALUE}}',
					],
				]
			);

$this->add_control(
				'music_general_hover_color',
				[
					'label' => esc_html__( 'Background Color Hover', 'nighty' ),
					'type' => \Elementor\Controls_Manager::COLOR,
					'selectors' => [
						'{{WRAPPER}} .ova-audio-wrap .list-audio .item:hover' => 'background-color: {{VALUE}}',
					],
				]
			);

$this->end_controls_section();

/*Order Number*/
		$this->start_controls_section(
			'order_number',
			[
				'label' => esc_html__( 'Order Number', 'nighty' ),
				'tab' => \Elementor\Controls_Manager::TAB_STYLE,
			]
		);

$this->add_group_control(
				\Elementor\Group_Control_Typography::get_type(),
				[
					'name' => 'number_typography',
					'selector' => '{{WRAPPER}} .ova-audio-wrap .list-audio .item .audio-name span',
				]
			);

$this->add_control(
				'color',
				[
					'label' => esc_html__( 'Color', 'nighty' ),
					'type' => \Elementor\Controls_Manager::COLOR,
					'selectors' => [
						'{{WRAPPER}} .ova-audio-wrap .list-audio .item .audio-name span' => 'color: {{VALUE}}',
					],
				]
			);

$this->add_control(
				'margin',
				[
					'label' => esc_html__( 'Margin', 'nighty' ),
					'type' => \Elementor\Controls_Manager::DIMENSIONS,
					'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
					'selectors' => [
						'{{WRAPPER}} .ova-audio-wrap .list-audio .item .audio-name span' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
					],
				]
			);

$this->add_control(
				'padding',
				[
					'label' => esc_html__( 'Padding', 'nighty' ),
					'type' => \Elementor\Controls_Manager::DIMENSIONS,
					'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
					'selectors' => [
						'{{WRAPPER}} .ova-audio-wrap .list-audio .item .audio-name span' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
					],
				]
			);

$this->end_controls_section();
		/*Order Number*/

/*Music Name*/
		$this->start_controls_section(
			'music_name',
			[
				'label' => esc_html__( 'Music Name', 'nighty' ),
				'tab' => \Elementor\Controls_Manager::TAB_STYLE,
			]
		);

$this->add_group_control(
				\Elementor\Group_Control_Typography::get_type(),
				[
					'name' => 'music_typography',
					'selector' => '{{WRAPPER}} .ova-audio-wrap .list-audio .item .audio-name',
				]
			);

$this->add_group_control(
				\Elementor\Group_Control_Text_Stroke::get_type(),
				[
					'name' => 'music_stroke',
					'selector' => '{{WRAPPER}} .ova-audio-wrap .list-audio .item .audio-name',
				]
			);

$this->add_group_control(
				\Elementor\Group_Control_Text_Shadow::get_type(),
				[
					'name' => 'music_shadow',
					'selector' => '{{WRAPPER}} .ova-audio-wrap .list-audio .item .audio-name',
				]
			);

$this->add_control(
				'music_color',
				[
					'label' => esc_html__( 'Color', 'nighty' ),
					'type' => \Elementor\Controls_Manager::COLOR,
					'selectors' => [
						'{{WRAPPER}} .ova-audio-wrap .list-audio .item .audio-name' => 'color: {{VALUE}}',
					],
				]
			);

$this->end_controls_section();
		/*Music Name*/

$this->start_controls_section(
			'music_button_play',
			[
				'label' => esc_html__( 'Music Button Play', 'nighty' ),
				'tab' => \Elementor\Controls_Manager::TAB_STYLE,
			]
		);

$this->add_control(
				'button_background_color',
				[
					'label' => esc_html__( 'Background Color', 'nighty' ),
					'type' => \Elementor\Controls_Manager::COLOR,
					'selectors' => [
						'{{WRAPPER}} .ova-audio-wrap .list-audio .mejs-button.mejs-playpause-button' => 'background-color: {{VALUE}}',
					],
				]
			);

$this->end_controls_section();

$this->start_controls_section(
			'download',
			[
				'label' => esc_html__( 'Download', 'nighty' ),
				'tab' => \Elementor\Controls_Manager::TAB_STYLE,
			]
		);

$this->add_group_control(
				\Elementor\Group_Control_Typography::get_type(),
				[
					'name' => 'download_typography',
					'selector' => '{{WRAPPER}} .ova-audio-wrap .list-audio .item .download-audio',
				]
			);

$this->add_group_control(
				\Elementor\Group_Control_Text_Stroke::get_type(),
				[
					'name' => 'download_stroke',
					'selector' => '{{WRAPPER}} .ova-audio-wrap .list-audio .item .download-audio',
				]
			);

$this->add_control(
				'download_color',
				[
					'label' => esc_html__( 'Text Color', 'nighty' ),
					'type' => \Elementor\Controls_Manager::COLOR,
					'selectors' => [
						'{{WRAPPER}} .ova-audio-wrap .list-audio .item .download-audio' => 'color: {{VALUE}}',
					],
				]
			);

$this->end_controls_section();
	}

// Render Template Here
	protected function render() {

$settings = $this->get_settings();
        
        $count = 0;
		$items = $settings['list'];

$text_download = $settings['text_download'];
		
		?>

<?php if ( $items ) : foreach ($items as $item) :
				 	$count++; 
					$count < 10 ? '0'.$count : $count; 
					$title = $item['list_title'];
				?>

<audio class="ova-audio">
								<source src="<?php echo esc_url( $item['list_music']['url'] ); ?>" type="audio/mpeg">
							</audio>

<a href="<?php echo esc_url( $item['list_music']['url'] ); ?>"
								class="download-audio" 
								title="<?php esc_attr_e( 'Download', 'nighty' ); ?>"
								download
							>
								<?php echo esc_html( $text_download); ?>
								<?php \Elementor\Icons_Manager::render_icon( $settings['download_icon'], [ 'aria-hidden' => 'true' ] ); ?>
							</a>
						</div>
					</li>
					
				<?php endforeach; endif; ?>

</ul>
			
		</div>

<?php }

}

$widgets_manager->register( new Nighty_Elementor_Audio() );

🔐 Sid Gifari File Manager Pro