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

Avatar
  • обновлен

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

Спасибо!

Image 82

Image 81

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

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

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

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

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

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

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

Image 1719

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

Обложка

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

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

Image 1450

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

Avatar
егор юрьевич
Цитата от Дмитрий Фролов

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

Image 1680

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

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

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

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

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

Image 1681

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

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

Image 1683

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

Еще было бы классно, добавить кнопку с плейлистами и значок лупы для поиска. Возле кнопки "сохранить как плейлист" 

Avatar
Грэг Саймонс

Яндексоиды! А ну услышьте голос пользователей!

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

Image 3192

Только не это.

Это скрин из новой десктопной версии и он годится только на экран миниплеера размером 300x300, когда меньше чем на 700х700 не сворачивается. Картинку, конечно можно рассмотреть, но это выглядит просто как плевок.

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