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

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

Цитата сообщения Marina-Rozina

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

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

Обычный 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, и делать ту самую красоту, к которой мы привыкли. К сожалению, не все люди белые и пушистые. Одни использовали написание скриптов для создания радости и красоты, а другие – для распространения вирусов. Очень жаль, что флеш умерла. Но ничего не поделаешь, будем приспосабливаться обходиться без неё.

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

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

Серия сообщений "Шаблоны":
Часть 1 - Меняем цвет под определённым участком текста
Часть 2 - Делаем рамочку с картинками
...
Часть 34 - Закругляем углы изображения с помощью HTMLкода
Часть 35 - РАМКИ С КРУГЛЫМИ УГЛАМИ БЕЗ ФОТОШОПА
Часть 36 - Как к фоновому изображению добавить кнопку с прозрачным HTML5 аудиоплеером
Часть 37 - ОБРАМЛЯЕМ КАРТИНКУ РАМОЧКОЙ (урок от Zomka)
Часть 38 - ПРОСТЫЕ РАМКИ С ЗАГОЛОВКОМ
Часть 39 - Полоски или линии которыми можно украсить свой текст
Часть 40 - КОДЫ ОСНОВНЫХ КНОПОЧЕК
Часть 41 - Все о бегущем тексте. Примеры и коды.

Серия сообщений "Плееры":
Часть 1 - МУЗЫКА + ПЛЕЕРЫ
Часть 2 - Делаем плеер
...
Часть 4 - Плеер-картинка и Как вставить музыку во флеш-плеер
Часть 5 - Переход на коды...HTML5 для ЛиРу - коды плееров
Часть 6 - Как к фоновому изображению добавить кнопку с прозрачным HTML5 аудиоплеером
Часть 7 - Еще один плеер-урок от Arnusha . Как взять код музыки с YouTube и т.д.