Hi, i am working on a project where i have a music button which is used to start/play and stop/pause the background music. PROBLEM: Problem is that i have many pages in my website when i press the music stop/pause button the music stops playing but when i navigate to different pages the music starts automatically and i again need to press the button on every new page loaded to stop the music playing on background.Solution Needed i want solution that if i press the music stop button the music must stop for the whole website until i again press the button to play the music.
<audio id="audio" autoplay="" src="music/music.mp3" loop="true"></audio> <script type="text/javascript"> var sounds = document.getElementById('audio'); document.getElementById('myAudio').onclick= function(){ var sounds = document.getElementById('audio'); if(sounds.paused){ sounds.play(); }else{ sounds.pause(); } }
<a><img id="myAudio" src="images/musicicob.png"></a> <?php include'audio.php'; ?>
Advertisement
Answer
use localStorage
1) when user click pause button set the item localStorage.setItem(‘music’,’stop’); an each page load check the localstorage and pause audio like this.
var sounds = document.getElementById('audio'); if(localstorage.getItem('music')=='stop'){ sounds.pause(); }else{ sounds.play(); }
2) when user click play button set the item localStorage.setItem(‘music’,’play’);