Animated Player – Pause Icon + AJAX

What I meant, it I want to have your audio player keep playing musing even if I change the page of my website, without cut. Because if I was on homepage and go, per exemple, to the contact page, Compact WP audio Player will run again to the start of the song.

So my previous asking was if it’s possible to put your audio player in the footer or header. And if I don’t say any mistake, with AJAX when I will change the page, the footer or header stay like this site (with the header menu) : https://angular.io/features
And maybe keep the player running ?

Sorry for my bad english, I didn’t know if you understand what I wanted.

Regards

Hi @mbrsolution

I find solution for animated your extension !

I want to share you my work if you can add it in the next free maintenance / upgrade it will be great !

So here is the code which I add in shortcodes-functions.php after the line 36

    
	$player_cont .= '<div id="music_audiobar">';
		
	$player_cont .= '<div id="audiobar_off" style="height: 0px; position:relative; bottom:15px;">';
	$player_cont .= '<span></span>';
	$player_cont .= '<span></span>';
	$player_cont .= '<span></span>';
	$player_cont .= '<span></span>';
	$player_cont .= '<span></span>';
	$player_cont .= '</div>';
	
	$player_cont .= '<div id="audiobar_on" style="height: 0px; position:relative; bottom:15px; display:none;">';
	$player_cont .= '<span class="bar bar1"></span>';
	$player_cont .= '<span class="bar bar2"></span>';
	$player_cont .= '<span class="bar bar3"></span>';
	$player_cont .= '<span class="bar bar4"></span>';
	$player_cont .= '<span class="bar bar5"></span>';
	$player_cont .= '</div>';
	
	$player_cont .= '</div>';
    
	
	$player_cont .= '</div>';

I add few lines in sc_audio_player.php lines 60 to 87

                soundManager.play('btnplay_' + ids, {
                    onfinish: function() {
                        if (loops == 'true') {
                            loopSound('btnplay_' + ids);
                        }
                        else {
                            document.getElementById('btnplay_' + ids).style.display = 'inline';
                            document.getElementById('btnstop_' + ids).style.display = 'none';
						
							document.getElementById('audiobar_off').style.display = 'inline'
							document.getElementById('audiobar_on').style.display = 'none'							
                        }
                    }
                });
            }
            else if (flg == 'stop') {
    //soundManager.stop('btnplay_'+ids);
                soundManager.pause('btnplay_' + ids);
            }
        }
        function show_hide(flag, ids)
        {
            if (flag == 'play') {
                document.getElementById('btnplay_' + ids).style.display = 'none';
                document.getElementById('btnstop_' + ids).style.display = 'inline';
				
					document.getElementById('audiobar_off').style.display = 'none'
					document.getElementById('audiobar_on').style.display = 'inline'				
            }
            else if (flag == 'stop') {
                document.getElementById('btnplay_' + ids).style.display = 'inline';
                document.getElementById('btnstop_' + ids).style.display = 'none';
				
					document.getElementById('audiobar_off').style.display = 'inline'
					document.getElementById('audiobar_on').style.display = 'none'				
            }
        }

And add this personnal CSS :

/* MUSIC BACKGROUND */
#music-player {
	position: fixed;
	z-index: 251;
	right: calc(2em + 6px);
	bottom: 1.5em;
	display: block;
	padding: 1em;
	-webkit-transform: translateY(0);
	transform: translateY(0);
	transition: .2s ease-out all;
}

#music-player.toTop-show {
	-webkit-transform: translateY(-4em);
	transform: translateY(-4em);
	transition: .2s ease-out all;
}

.sc_player_container1 .myButton_play { /*MUSIC OFF*/
background: #404040 !important;
width: 40px !important;
height: 40px !important;
border-radius: 100%;
}

.sc_player_container1 .myButton_play:hover {
background: #ef173b !important;
}

.sc_player_container1 .myButton_stop { /*MUSIC ON*/
background: #ef173b !important;
width: 40px !important;
height: 40px !important;
border-radius: 100%;
}

#music_audiobar {
	position: relative;
	bottom: 20px;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#music_audiobar span {
    display: inline-flex;
    margin: 0 1px;
    width: 2px;
    height: 7px;
    background: #fff;
}
	
.bar1 {
   animation: music-bar 2s 1s ease-out alternate infinite;
}

.bar2 {
    animation: music-bar 2s 0.5s ease-out alternate infinite;
}

.bar3 {
    animation: music-bar 2s 1.5s ease-out alternate infinite;
}

.bar4 {
    animation: music-bar 2s 0.25s ease-out alternate infinite;
}

.bar5 {
    animation: music-bar 2s 0.75s ease-out alternate infinite;
}

@keyframes music-bar {
  0% {height: 6px;}
  10% {height: 10px;}
  20% {height: 6px;}
  30% {height: 14px;}
  40% {height: 12px;}
  50% {height: 6px;}
  60% {height: 14px;}
  70% {height: 10px;}
  80% {height: 12px;}
  90% {height: 4px;}
  100% {height: 14px;}
}

To have the same Audio Button than https://werkstatt.fuelthemes.net/

________________________________________________

For my second problem with AJAX i don’t find yet.

Hope you like it and maybe add it with my name in your extension 🙂

Kind Regards,
Alexis LAURORA