I am using Dewplayer to play a background music on my website. I have done the integration and it works fine.
When I click on my next page, the player stops playing the music until and unless I again click to start which restarts the music. My pages are static HTML pages. Below is my code with the link to the files.
The CSS:
#content {
margin-left:15%;
width:500px;
text-align:left;
}
#hint {
color:#666;
margin-left:15%;
width:300px;
text-align:left;
margin-top:3em;
}
The HTML:
<a href="link1.html">Link1</a>
<a href="link2.html">Link2</a>
<a href="link3.html">Link3</a>
<object type="application/x-shockwave-flash" data="dewplayer-mini.swf?mp3=mp3/test2.mp3" width="160" height="20" id="dewplayer-mini"><param name="wmode" value="transparent" /><param name="movie" value="dewplayer-mini.swf?mp3=mp3/test2.mp3" /></object>
So from the above link, when you click to play the music, the music will be played, but as soon as you click on link2 or link3, it will be stopped. What I need is, that it should be played consistently and continuously irrespective of page navigation. People have suggested me using Frameset, iframes or flash (not the flash audio player), but I am not willing to use them.
I searched a lot of such similar question on Stackoverflow which are as below.
https://stackoverflow.com/questions/18411148/continuous-persistant-audio-players
How to keep audio playing while navigating through pages?
Audio Player: Constant playing
The second one suggested that it can be done with Ajax, but I am creating static pages and don't have a great hand on using Ajax.
PS: I am open to using any other player which has this functionality.
EDIT : Created the same using jQuery
As people suggested me to use jQuery/JavaScript for flash, I have created the player using jQuery as below. On the demo, the red Square box is stop/pause and Blue is Play.
The HTML:
<audio id="player" src="http://www.soundjay.com/ambient/check-point-1.mp3"></audio>
<a class="soundIcnPlay" title="button" id="button"> </a>
The jQuery Code:
$(document).ready(function() {
var playing = false;
$('a#button').click(function() {
$(this).toggleClass("down");
if (playing == false) {
document.getElementById('player').play();
playing = true;
$(this).removeClass('soundIcnPlay');
$(this).addClass('soundIcnPause');
} else {
document.getElementById('player').pause();
playing = false;
$(this).removeClass('soundIcnPause');
$(this).addClass('soundIcnPlay');
}
});
});
The CSS:
.soundIcnPlay {
background: none repeat scroll 0 0 red;
cursor: pointer;
display: block;
height: 100px;
width: 100px;
}
.soundIcnPause {
background: none repeat scroll 0 0 blue;
cursor: pointer;
display: block;
height: 100px;
width: 100px;
}
The jsFiddle Link: