我正在使用
Dewplayer在我的网站上播放背景音乐.
我已经完成了集成,它工作正常.
我已经完成了集成,它工作正常.
当我点击我的下一页时,播放器停止播放音乐,直到除非我再次点击开始重新播放音乐.我的页面是静态HTML页面.下面是我的代码,其中包含文件的链接.
CSS：
#content {
margin-left:15%;
width:500px;
text-align:left;
}
#hint {
color:#666;
margin-left:15%;
width:300px;
text-align:left;
margin-top:3em;
}
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>
因此,从上面的链接,当您单击播放音乐时,将播放音乐,但只要您单击link2或link3,它就会停止.我需要的是,无论页面导航如何,它都应该一致且连续地播放.人们建议我使用Frameset,iframe或flash(不是flash音频播放器),但我不愿意使用它们.
我在Stackoverflow上搜索了很多类似的问题,如下所示.
https://stackoverflow.com/questions/18411148/continuous-persistant-audio-players
How to keep audio playing while navigating through pages?
Audio Player: Constant playing
第二个建议可以使用Ajax完成,但是我正在创建静态页面并且没有很好地使用Ajax.
PS：我愿意使用任何其他具有此功能的播放器.
编辑：使用jQuery创建相同
当人们建议我使用jQuery / JavaScript进行flash时,我使用jQuery创建了播放器,如下所示.在演示中,红色方框是停止/暂停,蓝色是播放.
HTML：
<audio id="player" src="http://www.soundjay.com/ambient/check-point-1.mp3"></audio> <a class="soundIcnPlay" title="button" id="button"> </a>
jQuery代码：
$(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');
}
});
});
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;
}
jsFiddle链接：
