Para alterar a URL da página sem comprometer o conteúdo (refresh) basta usar o seguinte código.
Javascript
window.history.pushState("objeto ou string", "Titulo", "/url");
DEMO do código acima funcionando
HTML Adaptado com o código do @Patrick.
<head>
<!-- Sempre importe as bibliotecas antes de tentar trabalhar com elas. -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
// Checa se a página foi carregada para evitar aplicar os códigos antes de ter algum elemento não carregado. Pode-se usar também "$(function(){".
$(document).ready(function(){
$(".ajax").on("click", function(e){
e.preventDefault(); //eliminamos o evento
var path = $(this).attr("href"); //Pegamos o caminho
var titulo = $(this).attr("title"); //pegamos o titulo da página
document.title = titulo; // Alterar o titulo da página
window.history.pushState("", titulo, path);
$("main").empty(); //Limpa para poder colocar o conteúdo.
$("main").load(path); //Faz uma requisição http para o servidor.
});
});
</script>
</head>
<body>
<!-- No caso, o header é a parte fixa, que não muda. -->
<header>
<div>"Aqui fica o player de audio."</div>
<ul>
<li><a href="home.html" class="ajax" title="Meu site">Home</a></li>
<li><a href="sobre.html" class="ajax" title="Meu site - Sobre">Sobre</a></li>
</ul>
</header>
<main>
<!-- Aqui é onde o conteúdo vai ser carregado. -->
</main>
</body>
Para utilizar o parâmetro data-
e recuperar o valor com JQuery
você deve utilizar o $.data
Jquery
$(function(){
var texto;
//Recuperar do data-value
texto = $('a.value').data('value');
$('.resultado').append('<li>' + texto + '</li>');
//Recuperar do data-titulo
texto = $('a.titulo').data('titulo');
$('.resultado').append('<li>' + texto + '</li>');
//Recuperar do data-target
texto = $('a.target').data('target');
$('.resultado').append('<li>' + texto + '</li>');
//Recuperar do data-meuVar
texto = $('a.meuVar').data('meuvar');
$('.resultado').append('<li>' + texto + '</li>');
});
Esse é meu HTML
de exemplo
HTML
<a href="#" class="value" data-value="texto do data-value"></a>
<a href="#" class="titulo" data-titulo="texto do data-titulo"></a>
<a href="#" class="target" data-target="texto do data-target"></a>
<a href="#" class="meuVar" data-meuvar="texto do data-meuvar"></a>
<ul class="resultado"></ul>
Este código irá mostrar lista
- texto do data-value
- texto do data-titulo
- texto do data-target
- texto do data-meuvar
Você pode acompanhar o código funcionando nesta DEMO
div
s,section
s ou qualquer outra tag, colocando o player de áudio em uma e carregando os conteúdos em outra, assim o player nunca parará de tocar.