Как создать постоянный html5 аудиоплеер?
У меня есть следующий код для открытия плеера на моем веб-сайте для воспроизведения звука используя Django:
{% if track.file.hls_stream %}
<a type="button" class="btn btn-outline-primary" href="{% url 'stream' pk=track.file.pk|safe|cypher_link_stream %}" target="_blank"><i class="fad fa-play-circle"></i></a>
...
В настоящее время это открывает новую вкладку и использует VideoJS для воспроизведения потока HLS. Но на самом деле это не то, что я хочу. Я хотел бы нажать кнопку play, и аудиоплеер всплывает внизу страницы и остается там во время навигации по сайту. Я уже искал такое решение, но не очень удачно. Может кто-нибудь подскажет, где искать?
Заранее спасибо.
Трудно сказать, не зная больше о вашем техническом стеке. Однако, по моему мнению, наиболее распространенным подходом к решению подобной проблемы является создание сайта в виде SPA (Single Page Application) с использованием одного из популярных фронтенд-фреймворков, таких как React, Vue или Angular.
Создавая SPA, вы можете перемещаться между маршрутами страницы "виртуально", где новые данные могут быть получены и установлены в DOM, в то время как другие неизменные элементы (например, ваш музыкальный плеер) сохраняются между изменениями.
Чтобы достичь этого с помощью Vue, вы должны использовать перемещение между страницами без обновления. Подробности смотрите здесь