HTML nieprzerwane odtwarzanie muzyki.

Question

Witam.

Mam problem. Otóż chciałbym zrobić na swojej stronie w tle podkład muzyczny. Moje pytanie brzmi: jak to zrobić żeby w sytuacji gdy muzyka ładnie mi gra na stronie głównej i sobie kliknę link do innej strony muzyka nie została przerwana a grała dalej.

 

Edit:

Chyba udało mi się poczynić postępy znalazłem w sieci coś takiego:

<audio preload="auto" src="Wham-Last Chrismas.mp3" loop="true" autoplay controls autobuffer>
</audio>

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

Teraz moje pytanie brzmi następująco:

Czy w tagu <audio> jako src da się zrobić link do utworu np na YouTube?

Answer 1

Musisz wczytywać swoja stronę ajaxowo przez skrypt JS. I wstawiać pobrany HTML do odpowiedniego diva na stronie. Chodzi o to aby nie ingerować w znacznik z youtubem.

Alternatywnie mozesz wykorzystać znaczniki iframe. W iframe powinieneś dać cała treść strony oprócz skryptu odpowiedzialnego za muzykę. Dzieki temu gdy klikniesz w link przeładuje sie tylko skrypt z treścią.

Iframe jest gorszym rozwiązaniem pod SEO.

Comments

Zapomniałem napisać że strona na której chce tego użyć to forum na silniku IPB. Wolałbym się powstrzymać od ingerencji w kod. Da radę ograniczyć działanie Ajax tylko do tego jednego elementu iframe? A przede wszystkim gdzie szukać takiego skryptu. Ja nie jestem w stanie czegoś takiego napisać

---

Wymieniłem dwa sposoby ktore zadziałaja i nie ma innych metod. Iframe powinien być najprostrzym rozwiazaniem. W skrocie robisz html z dwoma znasznikami iframe do jednego dajesz youtube do drugiego link do forum. Sprobuj stworzyć taki plik i odpalić go w przegladarce.

Tag audio nic ci nie da. Youtube i tak korzysta z tagu audio albo video z html5 wiec wyjdzie na to samo.

Answer 2

poczytaj sobie o single page application, ewentualnie w razie potrzeby dorzuc SSR czy PWA.

Comments

Zapomniałem dodać że to forum na silniku IPB. Ssr? Pwa? Ja Ciebie nie panimaju xD