Как к фоновому изображению добавить кнопку с прозрачным HTML5 аудиоплеером

Понедельник, 22 Марта 2021 г. 16:19 + в цитатник

Пишу урок, как я делаю плеер, который включается с помощью кнопочки, как во флеш. Важные атрибуты буду выделять красным цветом и объяснять, что они означают.
Пишу этот урок не как догму, а как руководство к действию. Поэтому и предлагаю сделать плеер сначала полупрозрачным, чтобы вы смогли видеть, что изображение вашей преобразованной кнопочки будет расположено точно под кнопкой включения/паузы аудиоплеера. Если при уменьшении ширины аудиоплеера до 90 пикселей кнопка включения/паузы исчезает, увеличьте его ширину до необходимого размера, например, до 100 пикселей. Тогда и ширину изображения новой кнопочки делайте таким же. Пока у меня нет возможности переделывать урок.

Обычный HTML5 аудиоплеер выглядит так

Его код:

<center>
<audio controls="controls" src="https://static.tunnel.ru/media/audio/2021-03/post/149729//andre-rieu---serenade-du-rossignol.mp3"></audio>
</center>

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

Код:

<center>
<audio controls="controls" src="https://static.tunnel.ru/media/audio/2021-03/post/149729//andre-rieu---serenade-du-rossignol.mp3" style="width: 90px;"></audio>
</center>

Внимание!
Не задавайте значение ширины менее 90 пикселей, иначе пропадёт кнопка воспроизведения, и вы не сможете включать и выключать аудио в прозрачном плеере!

В качестве фона я взяла изображение с анимацией, которую сама сделала

Для того, чтобы отрегулировать местоположение плеера, сделаем его сначала полупрозрачным и разместим на фоновом изображении. Уровень прозрачности задается свойством «opacity». Значение 1 означает полную непрозрачность объекта, а значение 0 приводит к полной прозрачности. У меня значение opacity равно 0.4. Вы можете сделать его более или менее прозрачным, как вам удобнее.

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

Код плеера:

Сам плеер выступает в качестве ячейки таблицы, которая задаётся с помощью элемента <td>. Здесь атрибутами элемента <td> являются:
«align» определяет горизонтальное выравнивание плеера и может принимать следующие значения:
        left – выравнивание по левому краю
        center – выравнивание по центру
        right – выравнивание по правому краю
        justify – выравнивание по ширине (одновременно по правому и левому краю)
«valign» определяет вертикальное выравнивание плеера и может принимать следующие значения:
        top – выравнивание по верхнему краю
        middle – выравнивание по середине
        bottom – выравнивание по нижнему краю
Стиль убирает здесь отступы плеера от краёв ячейки (style="padding: 0;") и нужен обязательно.

В качестве кнопочки я взяла такое сердечко

Поместим кнопочку под аудиоплеером. Она здесь также является фоном вложенной таблицы.

Код изображения с плеером и кнопкой:

Ячейку с плеером мы помещаем точно поверх ячейки с кнопкой, поэтому атрибуты элемента для него задаются следующим образом. Горизонтальное выравнивание по левому краю ячейки (align="left"), а вертикальное – по середине (valign="middle").

Так как кнопочка является атрибутом «background» таблицы, мы видим, что вся ячейка, отведённая под неё с шириной width="90" и высотой height="50", заполнилась изображениями сердечка. Нам, естественно, нужно только одно такое изображение, находящееся точно под кнопкой воспроизведения/паузы.

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

Открываем изображение с кнопочкой в редакторе. Не забываем, что размер кнопки мы потом изменить не сможем. В отличие от обычных изображений, для фона (атрибут «background» таблицы) не устанавливаются ширина и высота, и он всегда отображается в натуральную величину с масштабом 100%. Поэтому если вам нужно уменьшить или увеличить размеры вашей кнопки, делайте это сразу.

Затем смотрим размеры изображения и определяем отступ от левого края до середины изображения, у меня это 17 пикселей.

При ширине плеера 90 пикселей середина кнопки воспроизведения/паузы отстоит от правого края на 65 пикселей. Увеличиваем размер холста до 17+65=82 пикселей. Из меню «Изображение» выбираем пункт «Размер холста», в ширину проставляем наше значение 82, в окошке «Расположение» сдвигаем изображение к левому краю, чтобы пустое пространство добавилось справа.

Нажимаем «OK», видим результат.

Теперь недостающую ширину кнопочки добавляем слева таким же образом. В ширину проставляем значение 90, в окошке «Расположение» сдвигаем изображение к правому краю.

Высоту изображения увеличиваем до 50 пикселей – это высота отведённой под неё ячейки. Так как мы не уменьшали высоту плеера, то его высота примерно такая, отсюда и взялось это значение.

И последнее изменение размеров кнопочки. Советую добавить к ширине и высоте ещё 2-4 пикселя. Иначе при выставлении размеров ячейки с шириной width="90" и высотой height="50", иногда снизу и сбоку добавляется грязь от изображения кнопочки. Я сделала размеры последней 92px × 52px.

Сохраните полученное изображение у себя на компьютере и залейте его на любой хостинг. Всё, с кнопочкой мы закончили.

Вставляем теперь ссылку на неё вместо ссылки на маленькую кнопку.

Вот код изображения с плеером и кнопкой:

Здесь я ещё к кнопочке добавила атрибут «title». Он добавляет всплывающую подсказку с текстом, которая появляется при наведении курсора на элемент. Чтобы было понятнее, что именно нажатием сюда запускается и останавливается проигрывание аудио. Вы можете заменить текст "Play/Pause" на любой свой, например, на имя исполнителя и название композиции. Или отказаться от всплывающей подсказки вовсе, убрав этот атрибут.

И последнее, делаем наш плеер полностью прозрачным. Для этого свойству «opacity» задаём значение 0.

Код:

Как видите, ничего сложного нет. Единственная заморочка с подготовкой изображения кнопки. Зато наш аудиоплеер приобрёл вид флеш плеера. Окружающим будет казаться, что они нажимают на кнопку-картинку, хотя мы-то с вами знаем, что они включают кнопку воспроизведения прозрачного аудиоплеера, расположенного над ней.

Вид изображения кнопки при включении/паузе аудиоплеера, к сожалению, меняться не будет. Это можно сделать, только добавив скрипты. Но редактор лиру сразу же безжалостно удаляет любые попытки их добавления. И правильно делает. Это именно то, из-за чего погорела флеш. Там можно было добавлять скрипты, написанные на языке JavaScript, и делать ту самую красоту, к которой мы привыкли. К сожалению, не все люди белые и пушистые. Одни использовали написание скриптов для создания радости и красоты, а другие – для распространения вирусов. Очень жаль, что флеш умерла. Но ничего не поделаешь, будем приспосабливаться обходиться без неё.

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

Успехов вам в творчестве, друзья!

Рубрики:

Уроки разные/* уроки HTML
Плееры/* HTML плееры
Мои уроки

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

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

<a href="https://www.liveinternet.ru/users/marina-rozina/post482330391/">РљР°Рє Рє С„РѕРЅРѕРІРѕРјСѓ РёР·РѕР±СЂР°Р¶РµРЅРёСЋ РґРѕР±Р°РІРёС‚СЊ РєРЅРѕРїРєСѓ СЃ РїСЂРѕР·СЂР°С‡РЅС‹Рј HTML5 Р°СѓРґРёРѕРїР»РµРµСЂРѕРј</a><br/>
	
		
			
				
					
						
						
						РџРёС€Сѓ СѓСЂРѕРє, РєР°Рє СЏ РґРµР»Р°СЋ РїР»РµРµСЂ, РєРѕС‚РѕСЂС‹Р№ РІРєР»СЋС‡Р°РµС‚СЃСЏ СЃ РїРѕРјРѕС‰СЊСЋ РєРЅРѕРїРѕС‡РєРё, РєР°Рє РІРѕ С„Р»РµС€. Р’Р°Р¶РЅС‹Рµ Р°С‚СЂРёР±СѓС‚С‹ Р±СѓРґСѓ РІС‹РґРµР»СЏС‚СЊ РєСЂР°СЃРЅС‹Рј С†РІРµС‚РѕРј Рё РѕР±СЉСЏСЃРЅСЏС‚СЊ, С‡С‚Рѕ РѕРЅРё РѕР·РЅР°С‡Р°СЋС‚.
						РџРёС€Сѓ СЌС‚РѕС‚ СѓСЂРѕРє РЅРµ РєР°Рє РґРѕРіРјСѓ, Р° РєР°Рє СЂСѓРєРѕРІРѕРґСЃС‚РІРѕ Рє РґРµР№СЃС‚РІРёСЋ. РџРѕСЌС‚РѕРјСѓ Рё РїСЂРµРґР»Р°РіР°СЋ СЃРґРµР»Р°С‚СЊ РїР»РµРµСЂ СЃРЅР°С‡Р°Р»Р° РїРѕР»СѓРїСЂРѕР·СЂР°С‡РЅС‹Рј, С‡С‚РѕР±С‹ РІС‹ СЃРјРѕРіР»Рё РІРёРґРµС‚СЊ, С‡С‚Рѕ РёР·РѕР±СЂР°Р¶РµРЅРёРµ РІР°С€РµР№ РїСЂРµРѕР±СЂР°Р·РѕРІР°РЅРЅРѕР№ РєРЅРѕРїРѕС‡РєРё Р±СѓРґРµС‚ СЂР°СЃРїРѕР»РѕР¶РµРЅРѕ С‚РѕС‡РЅРѕ РїРѕРґ РєРЅРѕРїРєРѕР№ РІРєР»СЋС‡РµРЅРёСЏ/РїР°СѓР·С‹ Р°СѓРґРёРѕРїР»РµРµСЂР°. Р•СЃР»Рё РїСЂРё СѓРјРµРЅСЊС€РµРЅРёРё С€РёСЂРёРЅС‹ Р°СѓРґРёРѕРїР»РµРµСЂР° РґРѕ 90 РїРёРєСЃРµР»РµР№ РєРЅРѕРїРєР° РІРєР»СЋС‡РµРЅРёСЏ/РїР°СѓР·С‹ РёСЃС‡РµР·Р°РµС‚, СѓРІРµР»РёС‡СЊС‚Рµ РµРіРѕ С€РёСЂРёРЅСѓ РґРѕ РЅРµРѕР±С…РѕРґРёРјРѕРіРѕ СЂР°Р·РјРµСЂР°, ... <a href="https://www.liveinternet.ru/users/marina-rozina/post482330391/">Р§РёС‚Р°С‚СЊ РґР°Р»РµРµ...</a>

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

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

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

ЛЮДМИЛА_ГОРНАЯ обратиться по имени Понедельник, 22 Марта 2021 г. 16:33 (ссылка)

Марина,хочется разобраться!Спасибо за подробный урок!!!

Ответить С цитатой В цитатник

Понедельник, 22 Марта 2021 г. 16:34ссылка

ЛЮДМИЛА_ГОРНАЯ

Просто можно музыку свою вставлять!

Ответить С цитатой В цитатник Обратиться по имени

Понедельник, 22 Марта 2021 г. 16:38ссылка

Marina-Rozina

Конечно, Людочка! Спасибо за цитирование! Написала урок по просьбе нескольких человек. Планирую написать продолжение урока. Успехов в изучении!

Ответить С цитатой В цитатник Обратиться по имени

LEOTIGER обратиться по имени Понедельник, 22 Марта 2021 г. 16:45 (ссылка)

Мариша

Наконец то дождалась твоего урока

Буду разбираться

Ответить С цитатой В цитатник

Понедельник, 22 Марта 2021 г. 17:04ссылка

Marina-Rozina

Забирай, Людочка! По-моему, ты уже сама во всём разобралась. Планирую написать продолжение, как ещё можно наиздеваться над HTML5 аудиоплеером. Но это после окончания чемпионата мира по фигурному катанию. Планирую посмотреть его. У нас будут показывать, к сожалению, только по ночам.

Ответить С цитатой В цитатник Обратиться по имени

Понедельник, 22 Марта 2021 г. 22:51ссылка

LEOTIGER

Я ничего по телевизору не смотрю,потому что у нас все перешло на цифровое,а у меня нет нужного гаджета.

Оно и лучше в Ютубе смотрю,если удается...

Ответить С цитатой В цитатник Обратиться по имени

Понедельник, 22 Марта 2021 г. 19:39ссылка

Marina-Rozina

Людочка, всё, завязываю писать уроки, больше не просите. Столько времени и сил тратишь на эксперименты, пока всё это придумаешь. Потом долго пишешь уроки, а потом всё коту под хвост. Сразу же тебя начинают критиковать, что всё неправильно написала, не те размеры поставила. Где же они раньше были? Этот урок переделаю, конечно, всё придётся заново пересчитать. Но больше писать не буду.
Тут и так столько неприятностей дома и проблем со здоровьем. И все твои труды не в радость.

Ответить С цитатой В цитатник Обратиться по имени

starik51 обратиться по имени Понедельник, 22 Марта 2021 г. 17:36 (ссылка)

Привет,Марина! А вот и нет! Длина плеера должна быть не менее 90(ты пишешь)так вот при такой длине в Опере кнопки включения не видать и твой,кстати не включается.Для оперы надо 97рх и более.Сегодня мы с Любашой.К провели небольшой эксперимент и выяснили,что длина плеера должна быть 100рх,тогда кнопка включения видна во всех браузерах без исключения

Ответить С цитатой В цитатник

Понедельник, 22 Марта 2021 г. 18:24ссылка

Marina-Rozina

Спасибо, Витя, исправлю. Но в моей Опере включается без проблем. Может, ещё зависит от Операционной системы? У меня 10-ка, а у тебя? Столько подводных камней, что всё не предугадаешь.

Ответить С цитатой В цитатник Обратиться по имени

Понедельник, 22 Марта 2021 г. 18:28ссылка

starik51

Может быть..у меня 7-ка.А может и от версии Оперы.А может от масштаба страницы..я на Лиру использую 110% чтобы фоновое изображение " авторский стиль" было во всю страницу

Ответить С цитатой В цитатник Обратиться по имени

Понедельник, 22 Марта 2021 г. 18:58ссылка

Зоя_Крайсик

starik51, Витюша! и тебе спасибо за разъяснение! Очень вам благодарна!

Ответить С цитатой В цитатник Обратиться по имени

ЛГП обратиться по имени Понедельник, 22 Марта 2021 г. 17:56 (ссылка)

Спасибо, так хорошо всё преподнесено, но я не делала ещё пллеры( неграмотная берй буду учиться...! Добра вам во всём!

Ответить С цитатой В цитатник

Четверг, 25 Марта 2021 г. 10:21ссылка

Marina-Rozina

Благодарю, Леночка, за цитирование! Буду очень рада, если урок пригодится.
Да я уже отошла. Буду писать, куда же я денусь. Почему из-за одного гения всех остальных наказывать. Сходила в Ваш дневник, посмотрела на уроки. Действительно как жалко, что они больше не пригодятся, т.к. флеш больше нет. И мои уроки по флеш тоже теперь не нужны.
Хотела спросить, нужно ли писать продолжение уроков по плеерам? Я ещё кое-что придумала.

Ответить С цитатой В цитатник Обратиться по имени

Четверг, 25 Марта 2021 г. 19:15ссылка

jzayka

Мариночка,я завидую вам доброй завистью.
Я бы очень хотела постигнуть хотя бы азы html.Мне нравится копаться в кодах.
Но с того момента ,когда стало известно о судьбе флеш,мне было очень трудно поверить ,что будет какая -то альтернатива.
Еще раз спасибо,Мариночка,что развеяла мои сомнения.
Вы еще спрашиваете ,нужно ли писать продолжение уроков по плеерам?!!
Конечно же нужно,тем более что заинтриговала ,что придумала кое-что..Люблю новенькое..))
Удачи,Мариночка,Вам!!!

Ответить С цитатой В цитатник Обратиться по имени

Четверг, 25 Марта 2021 г. 19:52ссылка

Marina-Rozina

Благодарю, Леночка! И Вам того же!
Да вот от безысходности, что мы остались без флеш, стала возиться с HTML5 аудиоплеером. Уж очень здесь ущербная реализация. В предыдущей версии хоть цвет можно было менять, а здесь и этого нет. Долго ничего не получалось, а потом пошли дела потихоньку. Сначала придумала, как превратить его в круглую кнопку, а теперь - сделать невидимым. Это просто замечательно, что HTML5 позволяет делать с ним всё то же самое, что и с изображениями. Поэтому и нашлась на него управа. Жаль, что здесь нельзя писать коды и скрипты на JavaScript, а то бы мы развернулись. Правда, Леночка? Ещё очень хочется научиться здесь делать часики. Но не будет отчаиваться, поживём, увидим. Может, придумаем что-нибудь.
А вообще все идеи черпаю здесь:
http://htmlbook.ru/html/
Ищу, пробую, иногда что-то получается. У меня, видимо, голова работает как-то неправильно. Как говорил Бернард Шоу, не хочу подстраиваться под окружающий мир, а хочу его подстроить под себя.
Всего Вам доброго! Удачи и успехов в творчестве!

Ответить С цитатой В цитатник Обратиться по имени

Суббота, 27 Марта 2021 г. 18:28ссылка

Татьяна_Волкова_Литвинова

Марина, вот здесь часики https://www.timeanddate.com/clocks/ Делай!
А потом может сама придумаешь, как свой код написать.

Ответить С цитатой В цитатник Обратиться по имени

Вторник, 20 Апреля 2021 г. 16:38ссылка

Marina-Rozina

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

Ответить С цитатой В цитатник Обратиться по имени

Вторник, 20 Апреля 2021 г. 16:41ссылка

Татьяна_Волкова_Литвинова

Марина, а это и есть сайт где их можно сделать и вставить себе на Ли.ру. Вот только
не знаю как их наложить на фон.

Ответить С цитатой В цитатник Обратиться по имени

Вторник, 20 Апреля 2021 г. 16:42ссылка

Marina-Rozina

Тогда ещё раз спасибо! Обязательно попробую, но попозже. Хочу ещё урок по плеерам написать.

Ответить С цитатой В цитатник Обратиться по имени

Вторник, 20 Апреля 2021 г. 16:44ссылка

Татьяна_Волкова_Литвинова

Жду от тебя урок! Мое пожелание: прописать в коде плеера тег изменяющий громкость музыки, если это возможно.

Ответить С цитатой В цитатник Обратиться по имени

Вторник, 20 Апреля 2021 г. 16:57ссылка

Marina-Rozina

Пока не знаю, как это сделать в невидимом плеере, но подумаю.

Ответить С цитатой В цитатник Обратиться по имени

Вторник, 20 Апреля 2021 г. 16:59ссылка

Татьяна_Волкова_Литвинова

Хорошо!

Ответить С цитатой В цитатник Обратиться по имени

Вторник, 20 Апреля 2021 г. 17:02ссылка

Marina-Rozina

Ведь я правильно поняла, ты имеешь в виду невидимый плеер?

Ответить С цитатой В цитатник Обратиться по имени

Вторник, 20 Апреля 2021 г. 17:06ссылка

Татьяна_Волкова_Литвинова

Да!!! Это нужно писать в коде самого плеера, где мы прописываем
opacity:0; Но какой тег я не знаю.

Ответить С цитатой В цитатник Обратиться по имени

Вторник, 20 Апреля 2021 г. 17:28ссылка

Marina-Rozina

Нет, Танечка, не так. Дело в том, что атрибут opacity просто задаёт степень прозрачности плеера. Это я извратилась и добавила его к тегу audio. А вот вид самого плеера задаётся атрибутом controls, который добавляет панель управления к аудиофайлу. Если его не задать, плеером вообще невозможно управлять - включать его, менять громкость и т.д. Я долго пыталась сделать панель управления самой, но у меня ничего не получилось, это можно только писать в кодах, а лиру не даёт такой возможности, так что для невидимого плеера скорее всего громкость никак не изменить.

Ответить С цитатой В цитатник Обратиться по имени

Вторник, 20 Апреля 2021 г. 17:37ссылка

Татьяна_Волкова_Литвинова

Жаль!

Ответить С цитатой В цитатник Обратиться по имени