Постоянный музыкальный проигрыватель

Я работаю над таким проектом, как музыкальный магазин, и мне нужно реализовать постоянный музыкальный проигрыватель, как в ReverbNation. Я изучил ReverbNation и обнаружил, что они используют ajax для загрузки центрального контента, чтобы проигрыватель всегда оставался нетронутым. Мой проект находится в opencart и почти готов. Так что я не хочу менять кучу вещей и загружать все из ajax только для игрока. Я пробовал iframe, он работает, но проблема в том, что URL-адрес в адресной строке всегда остается прежним. Можно ли изменить URL-адрес в адресной строке для содержимого, загруженного в iframe? или есть хороший способ реализовать постоянный музыкальный проигрыватель? Пожалуйста, предложите.


php audio-player jquery opencart
person Konsole    schedule 06.08.2013    source источник
comment
вы можете использовать хэш документа, чтобы указать взгляд, или использовать history.pushState   -  person SoWhat    schedule 06.08.2013
comment
Но использование iframe для всего вашего веб-сайта не кажется чистой идеей ... Почему бы вам вместо этого не изменить подход и не загрузить музыкальный проигрыватель во всплывающем окне? Затем вы можете просто перемещаться по сайту без каких-либо изменений.   -  person Eggplant    schedule 06.08.2013
comment
@SomeshMukherjee Объяснение было бы очень полезным. И я думаю, что history.pushState не поддерживается в IE   -  person Konsole    schedule 06.08.2013
comment
@Eggplant Я знаю, что iframe - отстой, и это не очень хорошая идея, но клиент хочет, чтобы это было похоже на ревербнацию. Всплывающее окно могло быть последним вариантом   -  person Konsole    schedule 06.08.2013
comment
предположим, что пользователь нажимает на iframe / album / 1, обнаруживает это с помощью обработчика событий и изменяет window.location.hash на album / 1. Таким образом, ссылка становится site.com/player#albums/1. Теперь вы можете прочитать это имеет при запуске и изменить песню и содержимое iframe на / альбомы / 1   -  person SoWhat    schedule 06.08.2013

Ответы (2)


arrow_upward
2
arrow_downward

Я сделал аналогичный проект в opencart с помощью Jplayer (http://ewlsol.com/now/)

Вы можете перезаписать URL-адрес с помощью iframe

<a href="page" target="_top">Replace parent url!</a>

Но это неправильное решение. Если вы используете Iframe, в браузере нет исходного кода, поэтому поисковая система не сможет сканировать ваш сайт, поэтому использование Iframe будет плохой идеей.

Вам нужно загрузить часть содержимого с помощью AJAX с помощью функции загрузки jquery и поместить свой проигрыватель в верхний или нижний колонтитул, чтобы часть верхнего и нижнего колонтитула не обновлялась, и ваш плеер непрерывно воспроизводил вашу музыку.

Надеюсь это поможет

person Ramesh    schedule 18.12.2013

arrow_upward
0
arrow_downward

Вы не можете просто запихнуть постоянного игрока на существующий сайт. Сайт с постоянным воспроизведением музыки нуждается в трех вещах:

  • Клиентский JS-маршрутизатор
  • Способ получения нового контента через AJAX
  • Постоянный скрипт музыкального проигрывателя, который управляет состоянием (текущая дорожка, список воспроизведения, индекс списка воспроизведения)

Часто используется JS-фреймворк, поскольку он поддерживает многие из этих функций прямо из коробки. Однако включение всего JS-фреймворка, такого как Angular или Ember, только для постоянного воспроизведения музыки, является излишним для многих сайтов.

Более легкий внешний интерфейс для музыки, такой как Pushtape Cassette, может решить вашу проблему независимо от того, создаете ли вы статический сайт. или динамический сайт.

Если вы создаете статический сайт, все, что вам нужно сделать, это настроить файл cassette.json со ссылками на музыкальные файлы и метаданные и соответствующим образом оформить.

Если вы создаете более динамичное приложение, вы можете использовать независимую архитектуру. Создайте отдельный серверный сайт, который управляет контентом с помощью базы данных, затем попросите этот сайт создать файл cassette.json и выполнить рендеринг с помощью Pushtape Cassette.

person burrbrown    schedule 20.10.2016