Контент сайта подгружать через AJAX, как в VK

Приветствую, хотел бы попросить помощи, нужно сделать для сайта сопровождение музыкальное фоновое. И что бы при переходам по страничкам сайта, музыка не начиналась заново. Как ВКонтакте. Как это сделать?
Сайт делаем на ДЛЕ, будет 2 шаблона, нужно что бы музыка в переходах между шаблонами и по страницам сайтов продолжала играть. Спасибо.

P.S. Если не сложно, лучше сразу с примером как это реализовать, что бы при переходе по страницам музыка не прерывалась, или прерывалась ненадолго но начинала играть с того же места. А то везде пишут принцип реализации работы плеера ВКонтакте, но никто примеры не показывает. Спасибо.

Ну смотрите... Есть у кого-то пример, как подгружать через аякс один музыкальный трек, что бы можно было ему установить повтор, громкость и спрятать на фон? Без управления и без визуалки. Просто играет себе на фоне циклично при серфинге по сайту. Ну или с визуальной кнопочкой On/Off. Спасибо.

1 ответов


1. Контент грузим аяксово
Именно контент, шапка/футер загрузились при открытии сайта и мы их не трогаем
Где то там же в шапка/футер у нас и плеер фигачит

2. Делаем чтоб работали кнопки браузера вперед/назад и при копирование урла открывалась таже страница
тут 2 варианта, а в идеале можно совместить:
- html5 history pushstate современные браузеры
- хеш навигация

вот неплохая попытка объединения jquery-pjax

В теории можно обойтись одним этим плагином

Первое, что приходить в голову, так это то, что фоновая музыка это зло вселенского масштаба.

Плеер же в VK работает через HTML 5 History ( Вот тут хороший пример )
То есть это работает только для браузеров его поддерживающих. Откройте VK через ie 7-8 и трек будет прерываться при переходе.

Единственный кроссбраузерный вариант это делать абсолютно всё через AJAX.


варианты:
1) У флеша есть Local Shared Objects — флеш куки. Тоесть в плеере можно сохронять текущую позицию проигрования и соответственно после перезагрузки - можно восстановить проигрывание с момента, на котором оборвалось проигрование. Но косяк - прерывание музыки между перезагрузок.
2) Использовать фреймы - вродебы идеально, и через js другово фрэйма можно управлять плеером. Но косяк при индексировании поисковой системы - возможно ваш сайт (страница основного фрейма сайта) - загрузиться без фреймовой структуры и соответственно без плеера. Однако можно при помощи js на основной странице - загружена ли страница в фрейме или отдельно - и переадрисовывать по необходимости.
3) Использовать ajax - что бы страница не перезагружал, однако столько надо сделать что по человечески всё работало, а частности история, прямые ссылки на ресурсы - что бы проект нормально индексировался, что бы работала адресная строка по средствам location.hash

Вообщем безболезненно не получиться прикрутить фоновой звук =)


Как вариант сделать основной div.content (ну или манипулировать body) и в него подгружать весь контент который Вам необходим.

Т.е. картина будет примерно следующая:
Страничка, имеющая такую структуру:


<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Моя крутая страница</title>
    <!-- Тут подгружаем jQuery или другие библиотеки и пишем код для обработки кликов и работы с плеером -->
</head>
<body>
    <!-- тут будет сам сайт ну и что нибуть для плеера :) -->
</body>
</html>
 

Полезные ссылки:
1. http://jquery.com/ - сайт jQuery
2. http://dojotoolkit.org/ - Dojo
3. http://htmlbook.ru - Все о HTML и CSS
4. http://www.jplayer.org/ - Ну и собсно плеер