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

Воскресенье, 06 Октября 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/

Серия сообщений "До-ре-ми-фа-соль-ля-сиинг":
Часть 1 - Цепляет
Часть 2 - Без заголовка или Он и Она, запись 11
...
Часть 15 - Мой первый клип в 1990-е годы
Часть 16 - Мюзикл "Последнее испытание". Что подобное посоветуете?
Часть 17 - Вставить музыкальный плеер
Часть 18 - Плееры часть 2 (из блогов друзей)

Серия сообщений "Коды (теги)":
Оформление. В помощь: Цветовая палитра и Просмотр html
Часть 1 - Оформление днева (разные сайты и генераторы)
Часть 2 - Дизайн сообщений днева с принтскрином
...
Часть 32 - Читать закрытые записи
Часть 33 - Уроки и советы по компьютеру и интернету 1(серия сообщений в 250 частей)
Часть 34 - Вставить музыкальный плеер
Часть 35 - Плееры часть 2 (из блогов друзей)
Часть 36 - Сделать гиф
Часть 37 - Как вставить видео с ВКонтакте на Li.ru (всего три шага)
Часть 38 - Плееры с кодами

Метки: плеер музыка

Процитировано 9 раз
Понравилось: 24 пользователям

<a href="https://www.liveinternet.ru/users/ka82/post507825007/">Р’СЃС‚Р°РІРёС‚СЊ РјСѓР·С‹РєР°Р»СЊРЅС‹Р№ РїР»РµРµСЂ</a><br/>Р§Р°СЃС‚СЊ 2 РїР»РµРµСЂРѕРІ СЃ РєРѕРґР°РјРё https://www.liveinternet.ru/users/ka82/post507882392/

РџРѕРґРѕР№РґРµС‚ Р»СЋР±РѕР№ РјСѓР·С‹РєР°Р»СЊРЅС‹Р№ С„Р°Р№Р» СЃ СЂР°СЃС€РёСЂРµРЅРёРµРј .mp3
РќР°РїСЂРёРјРµСЂ, РјРѕР¶РЅРѕ СЃ РєР°РєРѕРіРѕ-С‚Рѕ СЃР°Р№С‚Р° СЃ РѕР±С‰РёРј РґРѕСЃС‚СѓРїРѕРј РїСЂРѕСЃР»СѓС€РёРІР°РЅРёСЏ С„Р°Р№Р»Р° С‚РёРїР° СЃР°Р№С‚_1 (РіРґРµ РІ РѕС‚РґРµР»СЊРЅРѕРј РѕРєРЅРµ РїСЂРё РЅР°Р¶Р°С‚РёРё РЅР° СЃС‚СЂРµР»РєСѓ "СЃРєР°С‡Р°С‚СЊ" РѕС‚РєСЂС‹РІР°РµС‚СЃСЏ Р°РґСЂРµСЃ mp3), РёР»Рё СЃР°Р№С‚_2, РіРґРµ РїРѕСЃР»Рµ РѕС‚РєСЂС‹С‚РёСЏ СЃС‚СЂР°РЅРёС†С‹ СЃ РїРµСЃРЅРµР№ РїСЂР°РІРѕР№ РєРЅРѕРїРєРѕР№ РїСЂРѕСЃРјР°С‚СЂРёРІР°РµРј РёСЃС…РѕРґРЅС‹Р№ РєРѕРґ Рё ctrl+F РёС‰РµРј РєРѕРґ РїРµСЃРЅРё С‚РёРїР° http........mp3
Рђ РјРѕР¶РЅРѕ РїСЂРѕСЃС‚Рѕ Р·Р°РєР°С‡Р°С‚СЊ С‚СѓС‚ Рё РІСЃС‚Р°РІРёС‚СЊ РїРѕР»СѓС‡РµРЅРЅСѓСЋ СЃСЃС‹Р»РєСѓ РІ РїР»РµРµСЂ.

РџР»РµРµСЂ РІС‹С€Рµ РёРјРµРµС‚ С€РёСЂРёРЅСѓ 600px, РІС‹СЃРѕС‚Сѓ 500px.

Р—Р°РјРµРЅСЏРµРј РїСЂРё Р¶РµР»Р°РЅРёРё:
width: 600px РЅР° Р»СЋР±СѓСЋ ... <a href="https://www.liveinternet.ru/users/ka82/post507825007/">Р§РёС‚Р°С‚СЊ РґР°Р»РµРµ...</a>

Комментировать

« Пред. запись — К дневнику — След. запись »

Страницы: [1] [Новые]