Like I’d do a div without refresh

Question

Like I’d do a div without refresh

Asked 6 years, 9 months ago

Viewed 239 times

0

My question is the following, I am "developing" a web radio, and my problem is this, when the user navigates the site he refresh the page and automatically the player stops playing, so my question is this, as I would do for this div player does not update with the navigation on the site ?

<div id="player" class="align_left">
        <div class="align overflow">    
            <div class="botao align_left">
                <ul>
                    <li><button><i class="fa fa-play" aria-hidden="true" title="Play"></i></button></li>
                    <li><button><i class="fa fa-pause" aria-hidden="true" title="Pause"></i></button></li>
                </ul>
            </div>
            <audio src="http://stm4.srvstm.com:19404/;" class="player align_left" autoplay="autoplay"></audio></div>

What I have is this, and a little stretch of CSS, someone could give an example of how to do this ?

I think in this case you can do a Localstorage with javascript for right after refresh the audio back from where it left off

– hugocsl

2018/02/15 at 23:08
would not have to do without updating anything? without stopping the audio ?

– goio

2018/02/15 at 23:15
@hugocsl online radios already come back from where they left off, what I think he wants is a page not change, and within that same everything change to the new page... except the audio tag that contains the URL STREAM. I’ve seen several such systems (use AJAX), I’ll see the best solution and post the answer here.

– RpgBoss

2018/02/15 at 23:16
Okay, that’s just what I need Rpgboss

– goio

2018/02/15 at 23:29

1 answer

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.

by Valdeir Psr • **10,804** points · Answer 1 · 2018-02-15T23:29:00+00:00

You can do this in two ways. With iframe or Pjax = Pushstate And Ajax.

Iframe

The iframe is basically represents a browsing context. It incorporates an HTML page and thus allows you to have multiple pages in one.

You can do it this way: https://gist.github.com/valdeir2000/41356d2e412324516c0d6064ee9ec1ec

pJax

The pjax works like a request made in Ajax. The code sends a request to algum_pagina.php, this page is returned and treated.

You just need to set an identical "container" for all pages, so whatever you have inside this "container" will be returned and displayed on the screen without updating it.

You can do it this way: https://gist.github.com/valdeir2000/3b0fe820cd7e8ff655e586847e7bdd2a

I’m setting up a website that follows this pattern. Follow Demonstration