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.

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.

Step 3: We are now ready to add the HTML code for our soundtrack. We can use Elementor HTML widget for that.

Here’s an example for audio HTML code:

<audio id="audio-1" src="https://premiumaddons.b-cdn.net/wp-content/uploads/2021/11/bella-ciao-original.mp4" 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.

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"),
            $playIcon = jQuery("#play-icon");
        
        $playBtn.addClass("play-audio");
        
        $playIcon.on("click", function() {
            $playBtn.trigger('click');
        });
        
        $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");
                
                
            }
            
            $playIcon.find("i").toggleClass("fa-volume-up fa-volume-mute");
            
            $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>