HTML5: Не прекращаем воспроизводить аудио при переходе со страницы на страницу

С одной стороны все просто, с другой не очень

Возьмем аудиоплэер из другой заметки. Но тэг <audio> не умеет продолжать автоматически воспроизводить аудио с "точки остановки".

Для этого воспользуемся "history.pushState". Обо всех методах объекта history можно почитать на w3c, нас сейчас будут интересовать только pushState и replaceState.

Если коротко, то код будет примерно такой:

<?php
	
	$nloc = isset($_GET['nloc']) ? preg_replace('~https?://[^/]+~', '', $_GET['nloc']) : '';
	
	if(!$nloc) {
		?><html>
			<head>
				<style>
					#...
				</style>
				<script src="/system/js/jquery.js"></script>
			</head>
			<body>
				<div class="container">
					<div class="content"><?php
	}
	
	switch($nloc) {
		//...
		default:
			print $nloc;
			break;
		
	}
	
	if(!$nloc) {
				?></div>
					<div class="bottom-fix">
						...
					</div>
				</div>
				<script>
					// контент на странице
					var contentDiv = $('.container > .content');
					// нужно ли начинать отправлять субреквесты
					var startProcessSubrequests = false;
					// поддерживает ли браузер нужные нам методы
					var isFeatured = history.pushState !== undefined;
					
					// если с браузером все ок, биндим все наобходимое для истории
					if(isFeatured) {
					
						// заменяем текущее состояние
						window.history.replaceState({title : '<?php print "history test"; ?>'}, '<?php print "history test"; ?>', '/files/html5/history.php');
						
						// изменяем контент на странице
						function processLocation() {
							var location = '/files/html5/history.php?nloc=' + window.location.href;
							
							// получаем контент асинхронно в фоне
							$.ajax(
								{
									url : location,
									method: 'get',
									dataType: 'html',
									success : function(html) {
										contentDiv.html(html);
										$(window).scrollTop(0);
									}
								}
							);
						}
						
						// перебиндовка ссылок
						contentDiv.find('a').live(
							'click',
							function(e) {
								e.preventDefault();
								window.history.pushState({title : $(this).attr('title')}, $(this).attr('title'), $(this).attr('href'));
								processLocation();
							}
						);
						
						// событие перехода по истории
						window.addEventListener(
							'popstate', 
							function(e) {
								if(!startProcessSubrequests) {
									startProcessSubrequests = true;
								} else {
									processLocation();
								}
							}
						);
					
					}
					
					// плеер собранный немного ранее
					$('#simplePlayer').each(function() { });
				</script>
			</body>
		</html><?php
	}
?>

Разбиваем страничку на 2 блока: контент страницы (.content) и плэер (.bottom-fix). Для всех ссылок в контенте "убиваем" стандартное поведение и описываем его таким образом, что бы контент для страницы забирался асинхронно. При полученни контента так же меняем window.location через добавление нового элемента истории (как раз через history.pushState).

Полный код можно увидеть в примере.

Как меня найти

Ключевые слова

HTML5: Не прекращаем воспроизводить аудио при переходе со страницы на страницу