Отображение проигрывателя плеера на весь экран, как в приложениях

Avatar
  • обновлен

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

Спасибо!

Image 82

Image 81

A
Дубликаты
Отображение воспроизводимого трека крупным планом.

Доброго дня! Можно кому-нибудь шепнуть, чтоб сделали для браузера режим Я.Музыки, в котором крупно обложка играющего в данный момент трека, как это сделано на Андроиде? Было бы чудесно. И эстетично ;)

На втором экране, к примеру, крупно было бы видно обложку и информацию о треке.

изменить интерфейс при воспроизведении музыки

Хочется, чтобы при нажатии на трек, он открывался также как и в мобильном приложении

Дизайн полноэкранного плеера.

Сделал дизайн полноэкранного режима для плеера, надеюсь вам понравится :)

Image 1719

Режим обложки при воспроизведении

Обложка

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

Сделать внешний вид плеера на сайте таким же как и в приложении

Image 1450

Было бы не плохо сделать возможность выводить плеер маленьким окошком (картинка в картинке) с возможностью размещать его по экрану самому где будет удобно.

Avatar
27
Вадим Бельмесов

Привет! Поддерживаю данное предложение. Хотел написать тикет, но увидел,этот, который полнстью совпадает с моими личными пожеланиями :-)

Avatar
17
Виктор Сероус

Обязательно нужно. Должна быть возможность разворачивать в большой формат. Добавьте эту функцию для вкладки "Радио" на Яндекс.Музыке.

Image 722

Image 723
Avatar
16
Тимур Ричи

Не понимаю, почему это никак не реализуют???

Только ради этой функции готов променять Яндекс на другие сервисы. А очень не хочется.

Avatar
rawman

Обязательно надо! Как еще не сделали  ведь плеер почти идеальный

Avatar
Рамиль Миннигалиев

Лютобешеноплюсую!

Очень не хватает этой фишки, а сделать то её вообще не проблема, все уже есть, только добавить новую форму с большим изображением альбома!

Avatar
Елена Грибкова

Да было бы удобно сделать на сайте . Как на старом ,если поддержка Яндекс музыки пишет , что не поддерживает старый сайт . А на новом радио не удобное все внизу находится и плеер тоже. Очень похоже на  Яндекс музыку, чем на Радио . Так что поддержка Яндекс музыки и Яндекс Радио прислушайтесь, что пишут пользователи. И уберите новый плеер . И чтобы было также,  как на старом сайте радио : видно было Мою волну вместо логина. Я привыкла уже к старому сайту раннему,чтобы Радио слушать.

Avatar
Андрей Семенов

Ну так что? Прям очень сложно реализовать данную фичу???

Avatar
14
Дмитрий Фролов

Image 1658

Вот, попытался нарисовать, каким я вижу плеер (я не про-дизайнер, и судиться за этот мокап не буду - если понравится, дарю безвозмездно)
Ползунок громкости вынул на нижнюю панель
Панель справа мне у Deezer зашла
Сортировка в очереди воспроизведения должна быть привычной сверху-вниз, но мне лень было править скрин.

Строка с названием трека при необходимости может делать размер шрифта поменьше (как названия плейлистов сейчас),а если и так не хватит - может прокручиваться (хотя вроде для среднего названия трека (без отсылок на сериалы) должно хватать)
Элемент "Сейчас играет" так же содержит ссылку на нужный плейлист/альбом. В случае волны рядом кнопка для ее настройки.
Подсветка под обложкой - как на мобилках в цвет самой обложки типа Ambilight. Вроде смотрится прикольно, делает плеер менее скучным:

Image 1659

Avatar
20
Дмитрий Фролов

Не знаю, зачем, все равно никто это не увидит, но я попытался изобразить, каким я в таком представлении вижу режим караоке..

Image 1669

По идее, текущая строчка подсвечивается таким образом, автоматически переключается и прокручивается.

  • Видно не только текущий текст и чуток следующих строчек, но и чуток предыдущих строчек (на всякий случай, плюс намекает, что можно скроллить вручную).
  • В случае длинных проигрышей (если яндекс будет поддерживать метки для обозначения конца строчек) нужна будет анимашка, которая бы помогала начинать петь строчку вовремя.
  • На строки можно нажимать, чтобы перематывать трек к этому месту (возможно с запасом в секунду на "сориентирование", но это уже сложнее для UI, думаю)
  • Текст можно прокручивать, в этом случае текст перестает прокручиваться автоматически (совсем, без автовозвратов) и появляется кнопка с текущей строчкой (ты скроллишь, музыка продолжает играть, видно текущую строчку где бы ты не был. Только осторожно с пустыми строками), которая возвращает тебя к текущей строчке и возобновляет автопрокрутку:

Image 1670

Из прочих мыслей - думал, что можно сделать с фоном помимо обычной заблюренной обложки. В принципе, как на скрине выглядит достаточно круто (по моему), но если хочется чего-то еще, то предлагаю подумать над
  • spotify и groove music ставят качественную фотку исполнителя (но из-за этого сама обложка скукоживается, и профита в этом плане от этого режима нет)
  • apple music просто блюрит обложку (на тв)
  • видеошотами (но подозреваю, если на телефоне они смотрятся ужасно, на большом экране будет только хуже)
  • анимацией, реагирующей на такт трека - анимация Моей Волны, или еще чего, как здесь например, только без такого визуализатора частот (хотя сомневаюсь, что какая либо анимация пошла бы)
  • мб просто не скрывать правую панель
Avatar
16
Дмитрий Фролов

Чет меня понесло.. Самому стало интересно, что я смогу нарисовать (могу figma файл скинуть, если что, но там немножко бардак)

Image 1680

Очередь отдельной "вкладкой", контекстная кнопка "сохранить как плейлист" на месте (даже для плейлистов, потому что "добавить в очередь" и "слушать далее"). Также здесь добавил кнопку "полного экрана" на панель плеера (и разделители для логического разделения). Для книг и подкастов слева легко поместятся кнопки скорости воспроизведения и перемотки по 10/30 секунд.

Очередь воспроизведения наполняется сверху вниз, текущий трек слегка выделяется не только за счет анимашки на кавере (которую среди пестрых обложек трудно заметить, прокручивая список), но и за счет цветного имени (ссылки можно подсветить подчеркиванием вместо цвета). При наведении на трек, он подсвечивается, можно переиспользовать для множественного выделения.

Вообще, думаю, подсветки имени трека все еще недостаточно, думаю, но я пока не придумал как еще заметно, но аккуратно можно выделить текущий трек. Яркая подложка как у караоке для треков выглядит слишком кричащей. Может вынести анимашку/иконку за пределы обложки..

Иконки explicit песен и наличия текста не добавил.. Ну Е и иконку микрофона можно так же добавлять после имени трека.

Для автоплейлистов (волны и потоков) текущий трек автоматически добавляется вниз (сейчас волна может только историю показывать, и текущий трек туда не записывается, пока не закончится). Можно как на телефоне перематывать по волне назад, если надо. Так же для волны после последнего элемента есть "тизер" следующего трека (вдохновился надписью "далее будут" на мобилке). Его потенциально можно сделать кнопкой, чтобы по нажатию на этот тизер сразу включался новый трек в волне (чтобы например не переходить обратно на последний трек и отдельно не нажимать кнопку следующего трека).

Image 1681

Для обычных конечных плейлистов (плейлисты, альбомы, результаты поиска/фильтрации) "тизер" можно заменить на переключатель "бесконечного потока музыки" - положить его поближе, чтобы в настройки не нужно было бегать, если нам не нужно продолжать плейлист автомиксом. Если включен повтор всей очереди, можно показывать подсказку о том, что автомикс не включится, так как включен повтор.

Если плейлист продолжается потоком, очередь должна оставаться той же (у Spotify, например, очередь воспроизведения логически отсутствует - она виртуальна и зависит от альбома/плейлиста (чуть-чуть от слушать далее, что он сразу забывает) и если он переключается на микс, назад не вернешься). Сохранять очередь при включении другого плейлиста вручную не надо - кнопку "сохранить как плейлист" будет невозможно использовать. Для сохранения всего у нас есть история, хотя идея открывать всю историю как очередь интересная. Отделить треки потока от треков плейлиста можно тем же разделителем, мб добавив текстовые обозначения, но у меня не получилось супер органично, додумался только до этого:

Image 1683

Если десктопная версия будет переезжать на электрон, можно даже будет сделать компактный режим, который будет показывать вместо 2 панелей фиксированного размера, резиновые по одной и переключаться между ними с помощью кнопки, похожей на ту, что сверху справа (вместо "скрыть" только "плеер" написать)