Question

我正在使用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">&nbsp;</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链接：

Audio Demo

Answer 1

据我所知，AJAX是让音频播放器在多个页面上跨浏览器运行的唯一方法。一旦整个页面重新加载，其上运行的所有内容都会停止，因此您只能交换其中的一部分。您可以在页面退出时保存播放器位置，但声音应该关闭，直到新页面加载并初始化为止。如果当然你也可以在一些iframe中交换你的内容，但这会给你带来新的问题。

顺便说一下，使用例如jQuery将页面加载到div中并不可怕。例如，您可以向页面添加DIV，使用jQuery加载函数将页面拉入其中：

http://api.jquery.com/load/

还有一个jQuery插件可以自动完成您经常遇到的一些任务，请阅读以下SO问题的答案：

Load HTML page dynamically into div with jQuery

Answer 2

您想要研究CSS图层，甚至更可能是HTML在线框架（i-frames）......

我认为这个i-frame教程 [http://manda.com/iframe/] 足以实现您的目标。向下滚动到“简单链接到iFrame示例”标题，在那里您将看到一个i-frame的演示，其中包含链接页面内容（AltaVista，AOL等）的另一个html容器上方的导航链接。完成滚动。

无论如何，重点在于：这些导航链接是放置播放器的位置，然后您可以访问您网站上的其他页面，但播放器在其自己的容器i-frame中始终可见且不间断。关闭您的网站会结束音乐。当您点击指向您网站上不同页面的链接时，浏览器地址也不会改变（因为它们通过当前网址的i-frame显示）

另一个好的（参见多个框架示例）：
[http://www.htmlgoodies.com/tutorials/frames/article.php/3479271]

此外，这里是对CSS Layers thingy-majik的基本了解：
[http://www.echoecho.com/csslayers.htm]

Answer 3

这是一个没有玩家的wonderful solution。它使用纯HTML5 Audio对象;然而页面之间会有一个小的差距但你从一开始就不会玩。希望它的差距。谢谢你提出的好问题+1。

我提供的答案很少，以减少页面加载之间的差距。

你可以从附图中看到;它将在瀑布上加载第一件事;小于50毫秒....但仅适用于测试和本地主机。即。间隔为0毫秒。

audio.js档案

function setCookie(c_name,value,exdays)
{
    var exdate=new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value=escape(value) + 
    ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
    document.cookie=c_name + "=" + c_value;
}

function getCookie(c_name)
{
    var i,x,y,ARRcookies=document.cookie.split(";");
    for (i=0;i<ARRcookies.length;i++)
    {
      x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
      y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
      x=x.replace(/^\s+|\s+$/g,"");
      if (x==c_name)
        {
        return unescape(y);
        }
      }
}

var song = document.getElementsByTagName('audio')[0];
var played = false;
var tillPlayed = getCookie('timePlayed');
function update()
{
    if(!played){
        if(tillPlayed){
        song.currentTime = tillPlayed;
        song.play();
        played = true;
        }
        else {
                song.play();
                played = true;
        }
    }

    else {
    setCookie('timePlayed', song.currentTime);
    }
}
setInterval(update,1000); 
// default is 1000 ms; but for testing I set that to 0 ms.. 
I guess it's exhausting JS interpreter (don't know much about it).

player.html档案

<html>
<head>
<title>Player</title>
</head>
<body>
    <audio id="audioplayer" autobuffer="" loop="true" preload="auto" src="song.mp3">
    </audio>
    <!-- you must include JS after the player; otherwise you will get undifiend object-->
    <script src="audio.js"></script>
</body>
</html>

它使用没有插件的Cookie。
永远无法消除间隙;但如果您认为可以，请随时编辑！。

在浏览HTML页面时保持音频播放器持续/持续播放

3 个答案: