Плееры для вставки МР3.

Воскресенье, 11 Февраля 2018 г. 13:29 + в цитатник

Цитата сообщения bloginja

Прочитать целиком В свой цитатник или сообщество!

Плееры для Лиру

Плееры для Лиру

Разновидности плееров
1. Плеер обычного размера.

Код: <audio src="ССЫЛКА на музыку mp3" type="audio/mpeg" controls="controls"></audio>
2. Там, где меняется размер плеера, нужно вместо audio писать video

Код такого плеера: <video width="180" height="25" src="ССЫЛКА на музыку mp3" type="audio/mpeg" controls="controls"></video>
3. Можно и такой плеер поставить

Код: <video width="30" height="30" controls="controls"><source src="ССЫЛКА на музыку mp3" type="audio/mpeg"></source>>/video>
4. Можно плеер немного украсить. Подобрать нужный размер и сделать цветную обводку.
Плеер с цветной обводкой размера 270х22

Плеер с цветной обводкой размера 100х20размера 25х25

Плеер с цветной обводкой размера 25х25

Код: <audio controls="controls" src="ССЫЛКА на музыку mp3" style=" width: ШИРИНА ПЛЕЕРАpx; ВЫСОТА ПЛЕЕРА:20px; border-radius: 100px; border: 3px solid #780406; opacity:1; "></audio>
Можно и другие атрибуты заменить, например, border: ШИРИНА ОБВОДКИpx solid #ЦВЕТ ОБВОДКИ border-radius: ЗАКРУГЛЕНИЕ ОБВОДКИpx

5. Плеер невидимый.
Код этого плеера
<video width="180" height="25" src="Ссылка на музыку mp3" type="audio/mpeg" controls="controls" opacity="0"></video>
Невидимость осуществляется тегом opacity со значением 0 (opacity:0; ). Изменив значение на 1, плеер станет видимым.

Размеры ширины и высоты плеера (width="ширина" height="высота") можно менять.
Фон под невидимый плеер можно поставить любой, к примеру, такой

или такой

bloginja

Читайте так же: Музыкальные рамки - открытки
Плейкаст
Где найти ссылки МР3
Плееры на картинке

Серия сообщений "Памятка для Лиру":
Часть 1 - Как узнать цветовой HTML код
Часть 2 - Бегущая строка из картинок или текста
...
Часть 13 - Скачать видео с Лиру.
Часть 14 - Вставляем музыкальный плеер (и не только) в определённое место
Часть 15 - Плееры для Лиру
Часть 16 - Развернуть картинку прямо на странице поста
Часть 17 - Вставить чужую рамку себе в пост

Серия сообщений "Уроки":
Часть 1 - Как узнать цветовой HTML код
Часть 2 - Бегущая строка из картинок или текста
...
Часть 14 - Вставляем музыкальный плеер (и не только) в определённое место
Часть 15 - Как ускорить просмотр любого видео в Firefox.
Часть 16 - Плееры для Лиру
Часть 17 - Урок по созданию музыкальной открытки
Часть 18 - Развернуть картинку прямо на странице поста
Часть 19 - Вставить чужую рамку себе в пост

Серия сообщений "Плееры в дневник":
Часть 1 - Плееры на картинке
Часть 2 - Вставляем музыкальный плеер (и не только) в определённое место
Часть 3 - Плееры для Лиру
Часть 4 - Музыкальные плееры - кнопки