Работаем над html5 аудиоплеером. Делаем плеер круглым и крепим к картинке.

Воскресенье, 29 Августа 2021 г. 13:45 + в цитатник

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

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

Работаем над html5 аудиоплеером. Делаем плеер круглым и крепим к картинке.

Как превратить HTML аудиоплеер в круглую кнопку и разместить его поверх фонового изображения

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

Его код:

<audio controls="controls" src="https://img1.liveinternet.ru/images/attach/d/0//51...e_my_brown_eyes_blue.mp3"></audio>

Атрибут «controls» здесь нужен обязательно, т.к. он добавляет панель управления к аудиофайлу. Атрибут «src» указывает путь к воспроизводимому файлу

Я размещу плеер в виде кнопки на изображении с анимацией, которую сама сделала. У меня получилось так

Делать это буду пошагово, выделяя в коде каждый новый атрибут красным цветом и объясняя, что он означает. Таким образом, вы сможете выбрать то, что нужно именно вам

К сожалению, управление воспроизведением аудио в плеере различается между браузерами
Так обычный аудиоплеер выглядит в браузерах Google Chrome и Opera

Так в браузере Mozilla Firefox

А так в браузере Microsoft Edge

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

Итак, приступим. Превратим аудиоплеер в круглую кнопку как можно меньших размеров, оставив основные кнопки управления – включение воспроизведения аудиофайла и его отключение (пауза)

Для начала сделаем его квадратом, задав ширину и высоту с помощью атрибута «style»

Код плеера:

<audio controls="controls" src="https://img1.liveinternet.ru/images/attach/d/0//51...hestra__snow_country.mp3" style=" width: 50px; height: 50px; "></audio>

Внимание!
Не задавайте значения ширины и высоты менее 50 пикселей, иначе в браузере Mozilla Firefox не будет видна кнопка управления аудио, и люди, пользующиеся этим браузером, не смогут слушать музыку. Лучше потом примените к нему масштабирование

Теперь сделаем плеер круглым, задав в атрибуте «style» радиус закругления. Радиус закругления должен быть не менее половины значения высоты и ширины, здесь он равен 25. Но его можно сделать и больше, это значения не имеет

Код плеера:

<audio controls="controls" src="https://img1.liveinternet.ru/images/attach/d/0//51...arreira__samba_pa_ti.mp3" style=" width: 50px; height: 50px; border-radius: 25px; "></audio>

Здесь есть ещё один нюанс, касающийся браузера Mozilla Firefox. Дело в том, что круглый аудиоплеер здесь оказывается обрезанным сверху и имеет следующий вид

Поэтому, чтобы он был действительно круглым, добавим тёмный цвет фона (всё равно в других браузерах его видно не будет). Здесь радиус закругления равен 100

Код:

<audio controls="controls" src="https://img1.liveinternet.ru/images/attach/d/0//51...no__tokyo_night_club.mp3" style=" width: 50px; height: 50px; border-radius: 100px; background-color: #1b1b1b; "></audio>

Теперь добавим обводку цветом вокруг круглого плеера. Параметрами обводки являются её ширина и цвет. Цвет можно задать в шестнадцатеричном коде либо с помощью имени широко используемых цветов. Вот аудиоплеер с обводкой жёлтого цвета шириной 3 пикселя

Код плеера:

<audio controls="controls" src="https://img1.liveinternet.ru/images/attach/d/0//51...et__unchained_melody.mp3" style =" width: 50px; height: 50px; border-radius: 100px; border: 3px solid #ffff00; background-color: #1b1b1b; "></audio>

Или

<audio controls="controls" src="https://img1.liveinternet.ru/images/attach/d/0//51...et__unchained_melody.mp3" style=" width: 50px; height: 50px; border-radius: 100px; border: 3px solid yellow; background-color: #1b1b1b; "><</audio>

Прежде чем начать дальнейшие преобразования плеера, хочу показать, как он выглядит на скринах в разных браузерах. В браузере Mozilla Firefox круглый аудиоплеер выглядит так:

В браузере Microsoft Edge так

В этих браузерах, чтобы включить воспроизведение аудиофайла, нужно нажать на белый треугольничек

В браузерах Google Chrome и Opera круглый плеер выглядит так:

Здесь кнопками управления воспроизведением аудио являются три маленькие кнопочки справа. Нажав на них, появляется меню, и нужно выбрать пункт «Воспроизвести»

Если кнопка-плеер кажется вам слишком большой, вы можете применить к ней масштабирование

Код:

<audio controls="controls" src="https://img1.liveinternet.ru/images/attach/d/1//5019/5019681_la_playa__j.mp3 " style=" width: 50px; height: 50px; border-radius: 100px; border: 3px solid #ffff00; background-color: #1b1b1b; transform: scale(0.75); "></audio>

В качестве параметров функция scale() принимает целые и дробные числа. Число выше единицы увеличит масштаб, а число в диапазоне от 0.01 до 0.99 уменьшит его.
Внимание!
Не задавайте очень маленький масштаб, иначе в браузерах Google Chrome и Opera меню управления воспроизведением аудио будет слишком мелким, и люди, пользующиеся этими браузерами, не смогут отключить аудио. Оптимальные значения параметров функции – от 0.75 до 0.99

При желании можно ещё изменить прозрачность аудиоплеера с помощью свойства «opacity». Значение 1 означает полную непрозрачность объекта, а значение 0 приводит к полной прозрачности

Код:

<audio controls="controls" src="https://img0.liveinternet.ru/images/attach/d/2//59...2351_instrumental_10.mp3" style=" width: 50px; height: 50px; border-radius: 100px; border: 3px solid #ffff00; background-color: #1b1b1b; opacity: 0.5; "></audio>

Внимание!
Не делайте плеер слишком прозрачным. Помните, что в браузерах Google Chrome и Opera меню управления воспроизведением аудио также станет прозрачным, и его будет трудно читать

Теперь размещаем плеер в виде кнопочки поверх изображения

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

<center>
     <table background="https://img0.liveinternet.ru/images/attach/d/2/151/432/151432734_v_chaynike.gif" height="320" width="360">
          <tbody>
               <tr>
                    <td align="right" height="320" style="padding: 0;" valign="bottom" width="360">
                         <audio controls="controls" src="https://img1.liveinternet.ru/images/attach/d/0//51...ax_greger__la_paloma.mp3" style=" width: 50px; height: 50px; border-radius: 100px; border: 2px solid #a07008; background-color: #1b1b1b; "></audio>
                    </td>
               </tr>
          </tbody>
     </table>
</center>

Элемент <table> служит контейнером для элементов таблицы. Его атрибут «background» задаёт ваше фоновое изображение, там же указаны его высота (height) и ширина (width)

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

И напоследок расскажу, что ещё можно сделать, чтобы немного улучшить вид плеера с изображением

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

Код:

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

Код:

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