Как реализовать переход по страницам сайта без обрывания музыки? (Как у Vk)

135

01 ноября 2021, 02:20

Мне нужно каким-то образом нужно сделать так, чтобы при переходе на другую страницу моего сайта, музыка, которая играет у пользователя не обрывалась, а продолжала играть.

Как пример - vk.

Какую технологию лучше использовать (AJAX + history API или PJAX) и как это реализовать на сайте?

Answer 1

Для этого нужно сделать Single Page Application.

Посмотри в сторону: Vue, Angular, React

Answer 2

Есть вариант на главной странице сайта поместить плеер, а весь остальной сайт задать, как src для iframe, который будет во всю ширину и высоту окна:

<audio id=audio src="sound.mp3"></audio> 
<button onclick="audio.play()"> Включить фоновую музыку </button> 
<button onclick="audio.pause()"> Выключить фоновую музыку </button> 
<iframe src="https://site.ru" width=100% height=100%></iframe>

Этот вариант универсален, если понадобится озвучить фоновой музыкой чужой сайт. Правда, в этом случае разные сайты ведут себя по-разному - на одних, как и ожидается, можно свободно переходить по ссылкам и музыка не будет переставать играть, на других ссылки открываются во всю вкладку и музыка замолкает, а третьи сайты в iframe блокируются вообще.