-Рубрики

 -Цитатник

С благодарностью к Богу. Текстовая рамочка от R-Оксаны. - (0)

С благодарностью к Богу. Текстовая рамочка от R-Оксаны Рамочка религиозная. Пока горят пред о...

Три зимних рамочки от Beauti_Flash - (0)

Три зимних рамочки от Beauti_Flash Бордюрные рамочки для текста № 104. Зима Понравился пост,...

Японское творческое вязание - Кейко Окамото. - (0)

Японское творческое вязание спицами - Кейко Окамото. Кейко Окамото "Японские узоры Кейко Окамото" ...

Яркие ирладские кружевные мотивы. - (0)

Яркие ирладские кружевные мотивы. Красивейшие мотивы для ирландского кружева ...

Женский вязаный жакет в классическом стиле. - (0)

Женский вязаный жакет в классическом стиле. *СОЛНЕЧНЫЙ* ЖАКЕТИК крючком.   &n...

 -Приложения

  • Перейти к приложению Я - фотограф Я - фотографПлагин для публикации фотографий в дневнике пользователя. Минимальные системные требования: Internet Explorer 6, Fire Fox 1.5, Opera 9.5, Safari 3.1.1 со включенным JavaScript. Возможно это будет рабо
  • Перейти к приложению Открытки ОткрыткиПерерожденный каталог открыток на все случаи жизни
  • Перейти к приложению Photoshop online Photoshop onlineДля того чтоб отредактировать картинку совсем не обязательно иметь фотошоп на комьпьютере. Это можно сделать с помощью приложения online photoshop =)
  • Перейти к приложению Скачать музыку с LiveInternet.ru Скачать музыку с LiveInternet.ruПростая скачивалка песен по заданным урлам
  • Перейти к приложению Создание аватар Создание аватарСервис для создания аватар в режиме онлайн. Позволяет вырезать из большой фотографии свою мордочку и сделать из неё аватару :) Есть возможность сразу же установить аватару в качестве своей основной.

 -Помощь новичкам

Всего опекалось новичков: 51
Проверено анкет за неделю: 0
За неделю набрано баллов: 0 (88217 место)
За все время набрано баллов: 122 (6923 место)

 -

Радио в блоге
[Этот ролик находится на заблокированном домене]

Добавить плеер в свой журнал
© Накукрыскин

 -Метки

photoshop shaman анимации анимация анимированные фоны аудиокниги вебдизайн вера видео-клипы всё для блога всё для дома вторую жизнь вещам вышивка вяжем детям вязание вязание для детей вязание для женщин вязание крючком вязание на спицах вязание спицами вязаные воротники вязаные шапки гитара города десерт дети детские сайты дизайн для творчества достопримечательности досуг живопись журналы по вязанию заговоры закуски здоровье земля зима игровой онлайн портал игровые автоматы бесплатно без регистрации игровые автоматы онлайн игры интересное интернет для детей интерьер искусство история руси кайма картинки киево печерская лавра клипарт книги коллекции консервирование космос красивая рамочка красивая рамочка для текста красивые песни красивые стихи красота кружево крылатые выражения кулинария кулинарные рамочки кулинарные рецепты лекарственные растения любовь мода моделирование одежды мой дневник молитвы музыка музыка mp3 музыкальные архивы мысли мудрецов народная медицина наука не проходите мимо новости новый год объёмные текстовые рамочки осень открытки отношения оформление дневника песни о любви песни под гитару печём пинетки пироги плtйкасты платье плейкасты плэйкасты позитив полезные мелочи православие православная христианская вера проповеди психология путешествия пэчворк развлечения рамки рамки для текста рамки с картинкой рамочка рамочка для текста рамочка кулинарная рамочка осенняя рамочка цветочная рамочки для текста рамочки с бордюром редакторы редигии релакс религии религия рецепты народной медицины россия рукоделие русская православная церковь салаты своими руками семья слово смотреть on-line стиль стихи о цветах страны схемы тайны языка текстовая рамочка текстовая рамочка от beautiflash текстовые рамочки текстовые рамочки для рецептов темы узоры узоры спицами уроки татьяны егоровой уроки фотошоп уроки шитья филипп киркоров фоны фотоальбомы фотошоп фракталы футажи футажи gif цветы цитаты человек шаман шитьё шитье школа школа шитья шьём детям шьём платье шьём сами это интересно

 -Фотоальбом

Посмотреть все фотографии серии Весенняя палитра
Весенняя палитра
01:03 13.05.2015
Фотографий: 21

 -Я - фотограф

Замок коварства и любви

Любовь бывает порой коварна… Из уст – в уста передавалась известная и живущая по сей день история одной большой любви, граничащая с безумием… Такое порой случается и в наше время, поэтому  история, давным-давно ставшая легендой, актуальна  и сейчас, как среди молодёжи, так и среди видавших виды местных жителей КавМинВод…  Кто знает как было дело?.. Однако, реальность нынешних дней - созерцание воочию тех мест, где родилась легенда, позволяет предположить, что так всё и случилось…    Отправляясь в небольшое путешествие сюда, каждый раз вглядываешься в необычного вида природный ландшафт затерявшихся здесь среди холмов и скал…  Дорога к Замку...Дорога к Замку...Пологие части склонов густо поросли лесным орешником…  Причудливые пласты скал из древних крепких ещё плит нависают отовсюду вдоль  дороги и это напоминает какое-то древнее разрушенное временем грандиозное строение, похожее на стены замка. ...Воображение мгновенно дорисовывает, придумывает… , как и во многих других местах Кавказских Минеральных Вод, природа дарит нам приятный  нарзанный источник.. . Преклоняешься в душе перед такой её щедростью и величием…За источником ущелье поворачивает влево, где открывается вид на замок, созданный природой.

 -Поиск по дневнику

Поиск сообщений в Tanyusha100

 -Подписка по e-mail

 

 -Статистика

Статистика LiveInternet.ru: показано количество хитов и посетителей
Создан: 04.04.2012
Записей: 15728
Комментариев: 3629
Написано: 22372


Работаем над 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
1

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

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

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


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

Для начала сделаем его квадратом, задав ширину и высоту с помощью атрибута «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. Дело в том, что круглый аудиоплеер здесь оказывается обрезанным сверху и имеет следующий вид
4

Поэтому, чтобы он был действительно круглым, добавим тёмный цвет фона (всё равно в других браузерах его видно не будет). Здесь радиус закругления равен 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 круглый аудиоплеер выглядит так:
5

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

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


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

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


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

Код:

<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;") и нужен обязательно, чтобы не произошло искажения изображения
Цвет обводки вокруг плеера я выбрала таким, чтобы он гармонировал с изображением


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


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

Код:

<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...ebster__tema_de_lara.mp3" style=" width: 50px; height: 50px; border-radius: 100px; border: 2px solid #a07008; background-color: #1b1b1b;
transform: scale(0.75); "></audio>
                    </td>
               </tr>
          </tbody>
     </table>
</center>



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

Код:

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



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

Код:

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



И напоследок сделала плеер более прозрачным

Код:

<center>
     <table background="https://img0.liveinternet.ru/images/attach/d/2/151/433/151433616_v_chaynike.gif" height="320" width="400">
          <tbody>
               <tr>
                    <td align="right" height="320" style="padding: 0;" valign="bottom" width="400">
                         <audio controls="controls" src="https://img1.liveinternet.ru/images/attach/d/0//51...ovacek__petite_fleur.mp3" style=" width: 50px; height: 50px; border-radius: 100px; border: 2px solid #a07008; background-color: #1b1b1b; transform: scale(0.75);
opacity: 0.5; "></audio>
                    </td>
               </tr>
          </tbody>
     </table>
</center>



Успехов вам в творчестве, друзья!
Рубрики:  оформление дневника,/мой дневник, всё для блога,
оформление дневника,/плееры,
Метки:  

 

Добавить комментарий:
Текст комментария: смайлики

Проверка орфографии: (найти ошибки)

Прикрепить картинку:

 Переводить URL в ссылку
 Подписаться на комментарии
 Подписать картинку