如何让音乐播放器在网站上连续播放答案

【问题标题】：How to have a music player play continuously on a site如何让音乐播放器在网站上连续播放
【发布时间】：2015-02-07 17:07:15
【问题描述】：

您好，我只是想寻求帮助，我正计划创建一个网站，我可以在其中像在线广播一样进行直播。例如像这个页面https://www.hospitalrecords.com/，即使你浏览整个网站，底部的播放器也不会停止。这是javascript吗？还是 iframe？提前致谢

亚瑟

【问题讨论】：

标签： javascript iframe audio-player

【解决方案1】：

您必须通过以下方式修复页面的页脚

    In CSS:
    .Footer{
        background-color:black;
        height:50px;
        color: white;
        position: fixed;
        width:100%;
    }

然后在页脚添加音频标签... 在 html5（记事本）中：

<body>
    <footer class="Footer">
    <!-- here you can add different audio plugin... but I am using html5 audio for example.. -->
    <audio control auto play loop>// it will loop through the music file
    <source src ="alam.mp3" type="audio/mpeg"/>
    <source src ="alam1.mp3" type="audio/mpeg"/>
    </audio>
    </footer>
    </body>

希望它会合适...

【讨论】：

感谢您的帮助，我一定会尝试这个。

【解决方案2】：

我对 iframe 不是很熟悉，但这可以通过 JavaScript 完成。总体思路是将更改的主体定义为主 div，并在单击选项卡时更改该 div 的内容。我很确定有一种更优雅的方式，但你可以使用所以你将使用一个库。 JS的一个叫Jquery，不知道大家是否熟悉。您的页面实际上将包含一个 Html 文档，并且将具有一般布局（查看您发送的示例页面）

 <html>
  <body>

    <div class="jumbotron"> // This will be div, with a background img
     <ul class="nav"> // This will be you nav bar
        <li id="1"> </li>
        <li id="2>  </li>
     </ul> // For the sake of simplicity I just have 2 tabs 
    </div>
    <div id="mainbody"> ..bunch of initial html</div>
    <div class="footer"> </div> this is the music player
  </body>
</html>

对于您在 Jquery 中的每个选项卡：

  $(document).ready(function(){
    $("#1").click(function(){
           $("#main").html(...."the html of the body you want"...)
    }

$("#2").click(function(){
       $("#main").html(...."the html of the body you want"...)
}
})

因为我猜你的 html 会变得复杂，你可以使用 .load() 而不是 .html() 在此处阅读有关它们的更多信息 http://api.jquery.com/html/ http://api.jquery.com/load/

【讨论】：

感谢@sinanspd 的评论我对这部分javascript 还不是很熟悉。你能解释一下吗？非常感谢。 :)
是的，请稍等
谢谢你的帮助，我试试这个。