Мобильный LiveInternet Вставить музыкальный плеер

Авторизация

Дневник ka82 Лента друзей - Дневник - Полная версия

Вставить музыкальный плеер 06-10-2024 17:19 к комментариям - к полной версии - понравилось!

Часть 2 плееров с кодами https://www.liveinternet.ru/users/ka82/post507882392/

 <audio controls="controls" loop="loop" src="МУЗЫКАЛЬНЫЙ_ФАЙЛ_MP3" title="НАЗВАНИЕ_МУЗЫКИ" style="width: 600px; height: 500px; border-radius: 10px; box-shadow: 0 0 20 40px #000000; background-color: black; background-image: url('ФОНОВАЯ_КАРТИНКА');" type=" audio"></audio>

Подойдет любой музыкальный файл с расширением .mp3
Например, можно с какого-то сайта с общим доступом прослушивания файла типа сайт_1 (где в отдельном окне при нажатии на стрелку "скачать" открывается адрес mp3), или сайт_2, где после открытия страницы с песней правой кнопкой просматриваем исходный код и ctrl+F ищем код песни типа http........mp3
А можно просто закачать тут и вставить полученную ссылку в плеер.

Плеер выше имеет ширину 600px, высоту 500px.

Заменяем при желании:
width: 600px на любую ширину. Пошире надо для того, чтобы перематывать музыку было легче.

height: 500px на любую высоту. Если сделать слишком высоко, то тогда красивее будет вставить фоновую картинку. Если сделать 13, то это будет просто узкая полоска без картинки

 <audio controls="controls" loop="loop" src="АДРЕС_МУЗЫКИ_МР3" title="НАЗВАНИЕ_МУЗЫКИ" style="width: 200px; height: 13px; border-radius: 100px; box-shadow: 0 0 0 4px #993300; background-color: black;" type=" audio"></audio>

Вот маленький плеер шириной 200px и высотой 13px, перемотать его почти нереально. Ниже - ширина 500px

 <audio controls="controls" loop="loop" src="АДРЕС_МЕЛОДИИ_МР3" title="НАЗВАНИЕ" style="width: 500px; height: 13px; border-radius: 100px; box-shadow: 0 0 0 4px #00BFFF; background-color: black;" type=" audio"></audio>

Цвета фона и рамочки (обводки): ищем сочетания, переводящиеся как цвета, начинающиеся с:
background-color или с #...... . Этим можно "покрасить" рамку для плеера или его фон. Можете поменять по палитре цветов на какой нужно.
ВНИМАНИЕ!!! Если вы накладываете непрозрачную картинку background-image (см.пункт ниже), то она, скорее всего, просто закроет толщину и цвет рамки, и они не будут видны.

Вот плеер шириной 200px и высотой 50px с фоновым желтым цветом

background-image: url('АДРЕС_КАРТИНКИ') если высота плеера большая, то она будет видна.

 <audio controls="controls" loop="loop" src="АДРЕС_МУЗЫКИ_МР3" title="НАЗВАНИЕ" style="width: 200px; height: 130px; border-radius: 200px; box-shadow: 40 40 40 40px #00FFFF; background-color: #1E90FF; background-image: url('АДРЕС_КАРТИНКИ');" type=" audio"></audio>

Вот плеер шириной 200px и высотой 130px (width: 200px; height: 130px;) с такой прозрачной гиф-картинкой на синем фоне (background-color: #1E90FF;)

border-radius: 0px получится прямоугольный плеер как желтый (выше)
border-radius: 10px и выше - округлый. ВНИМАНИЕ!!!! Большое значение округлости может временно привести к потере кнопки воспроизведения, так что прибавляйте это значение по ситуации (просматривайте что получается)

К дизайну плеера также применимы теги таблиц, вставки фонов, создания теней и краев

Часть 2 плееров с кодами https://www.liveinternet.ru/users/ka82/post507882392/

вверх^ к полной версии понравилось! в evernote

Комментарии (35): вперёд»

yuriy_iWowWe 06-10-2024-17:40 удалить

Вы сейчас не можете прокомментировать это сообщение.