How to Play/Pause a Soundtrack Using Premium Button Widget?

In this article, we will show how you can use Premium Button widget to play/pause a soundtrack on your page.

Step 1: First of all, we need to add Premium Button widget that will be used to control the soundtrack.

Premium Button Widget

If you want to have an icon next to the button text, you can simply enable Icon option and select any icon you want.

Step 2: Now, we need to add a unique ID to the button. We can do that from widget settings -> Advanced tab -> CSS ID option. This ID will be used later in the Javascript code to link the button with the soundtrack.

Premium Button Widget ID

 
Step 3: We are now ready to add the HTML code for our soundtrack. We can use Elementor HTML widget for that.
 
Premium Button Widget Audio
 
 
Here’s an example for audio HTML code:
<audio id="audio-1" src="https://nilepromotion.com/abanob/wp-content/uploads/2020/02/Bella-Ciao-ORIGINALE.mp3" loop="loop"></audio>

Step 4: Add the JS code to control the soundtrack using Premium Button widget. We can add that below the audio HTML code we added in step 3.

Premium Button Widget Audio Script


Here’s the JS code we used on our Premium Horizontal Scroll widget page to control the audio track.

<script>

    function runAudio() {
     
        if ( elementorFrontend.isEditMode() ) {
            return;
        }
     
        const $playBtn = jQuery("#audio-btn a.premium-button");
        
        $playBtn.addClass("play-audio");
       
        $playBtn.on("click", function() {
            
            const $this = jQuery( this );
            
            if( $this.hasClass( "play-audio" ) ) {
                
                jQuery("#audio-1")[0].play();
                
                $this.find(".premium-button-text-icon-wrapper span").text("pause sound");
                
            
            } else if ( $this.hasClass( "pause-audio" ) ) {
                
                jQuery("#audio-1")[0].pause();
                
                $this.find(".premium-button-text-icon-wrapper span").text("play sound");
                
            }
           
            $this.find(".premium-button-text-icon-wrapper i").toggleClass("fa-microphone-alt fa-microphone-slash");
            
            $this.toggleClass("play-audio pause-audio");
            
        });
    }
    
    jQuery( () => setTimeout( runAudio, 500 ) );

</script>

Download Now it's free!

Extend your Elementor Page Builder capabilities now with Premium Addons. 20+ Elementor Widgets Totally Free of charge.