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’);