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

问题描述

我正在使用

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

解决方案

This is a wonderful solution without a player. It uses pure HTML5 Audio object; yet there will be a small gap between pages but you won't play from beginning. Hope its acepted gap. Thank you for good question +1.

I am including the answer with little hack to decrease gap between page load.

You can see from attached image; it will load first thing on waterfall; less than 50 ms.... but suitable for testing and local host only. ie. interval to 0 ms.

audio.js file:

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 file:

<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>

• It uses Cookies without a plugin.
• It's not possible to remove the gap permanently; but please feel free to edit if you think that is possible!.

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