在导航HTML页面的同时保持音频播放器持续/连续播放 [英] Keeping audio player persistently/continuously playing while navigating HTML pages

问题描述

我使用 Dewplayer 在我的网站上播放背景音乐。
我已经做了整合，它工作正常。

当我点击我的下一页，播放器停止播放音乐，直到除非我再次点击开始重新启动音乐。我的网页是静态HTML页面。下面是我的链接到文件的代码。

$ b CSS：

  #content {
 margin-left：15％; 
 width：500px; 
 text-align：left; 
} 
 #hint {
 color：＃666; 
保证金余额：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-flashdata =dewplayer-mini.swf？mp3 = mp3 / test2.mp3 width =160height =20id =dewplayer-mini>< param name =wmodevalue =transparent/>< param name =movievalue =dewplayer-mini .swf？mp3 = mp3 / test2.mp3/>< / object> 
  

因此，从上面的链接中，当您点击播放音乐时，音乐将播放，但只要你点击链接2或链接3，它将被停止。我需要的是，不管页面导航如何，它应该始终如一地连续播放。人们建议我使用Frameset，iframe或flash（不是flash音频播放器），但是我不愿意使用它们。

我搜索了很多类似的问题在下面的Stackoverflow。

https：

如何在浏览页面时保持音频播放？

音频播放器：持续播放

第二个建议可以使用Ajax完成，但是我正在创建静态页面，并且没有很好的使用Ajax的手段。

PS ：我可以使用任何具有此功能的其他播放器。

编辑：使用jQuery创建相同

正如人们建议我使用jQuery / JavaScript闪光灯，我已经创建了使用jQuery的播放器如下。在演示中，红色的方框是停止/暂停，蓝色是播放。

HTML：

 < audio id =playersrc =http://www.soundjay.com/ambient/check-point-1.mp3><<< ; /音频> 
< a class =soundIcnPlaytitle =buttonid =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 {
背景：无重复滚动0 0红色; 
 cursor：pointer; 
 display：block; 
 height：100px; 
 width：100px; 
} 
 
 .soundIcnPause {
背景：无重复滚动0 0蓝色; 
 cursor：pointer; 
 display：block; 
 height：100px; 
 width：100px; 
 
  

jsFiddle链接：

音频演示

解决方案

您想要查看CSS图层，甚至更可能是HTML内联框架（i-frame）...

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

无论如何，重点是：如果这些导航链接是放置您的播放器的位置，那么您可以访问您网站上的其他页面，但播放器是在自己的容器i-frame中始终可见和不间断。关闭你的网站结束音乐。此外，浏览器地址可能不会改变，因为您点击链接到您网站上的不同页面（因为他们通过i-框显示当前的URL地址）

另一个好的（请参阅多重框架示例）：

[ http://www.htmlgoodies.com/tutorials/frames/article.php/3479271 ]

另外这里是一个基本的CSS层次图：thing $ majik：

[ http： //www.echoecho.com/csslayers.htm ]

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">&nbsp;</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:

Audio Demo

解决方案

You want to look into CSS layers and even more likely HTML In-Line Frames (i-frames)...

I think this i-frame tutorial [ http://manda.com/iframe/ ] will be enough to achieve what you want. Scroll down to the "Simple Link to iFrame Example" heading and there you will see a demo of an i-frame holding navigation links above another html container of the link pages content (AltaVista, AOL etc). Complete with scrolling.

Anyway the point is: where those navigation links are is where your player would be placed, then you can visit other pages on your site but the player is constantly visible and un-interrupted in its own container i-frame. Closing your site ends the music. Also the browser address might not change as you click links to different pages on your site (since they show via an i-frame at the current url address)

Another good one (see Multiple Frames example):
[ http://www.htmlgoodies.com/tutorials/frames/article.php/3479271 ]

Also here's a basic look into the CSS Layers thingy-majik:
[ http://www.echoecho.com/csslayers.htm ]

这篇关于在导航HTML页面的同时保持音频播放器持续/连续播放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！