-Рубрики

 -Цитатник

Текстовая рамочка с гитарами. - (0)

Текстовая рамочка с гитарами. Гитара.     ...

Из творчества Владимира Ланцберга. - (0)

Из творчества Владимира Ланцберга. Барды в "Музыкальной гостиной" - Владимир Ланцберг...

Просто феерическое видео от OneRepublic! - (0)

Просто феерическое видео от OneRepublic! Любимое. OneRepublic. Love Runs Out. ...

Вкусная запеканка из бананов и творога. - (0)

Вкусная запеканка из бананов и творога. Творожно- банановая запеканка. ИНГРЕДИЕНТЫ: ...

Поделки из солёного тесто. Рукоделие с детьми. - (0)

Поделки из солёного тесто. Рукоделие с детьми. Солёное тесто   ...

 -Приложения

  • Перейти к приложению Я - фотограф Я - фотографПлагин для публикации фотографий в дневнике пользователя. Минимальные системные требования: 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 место)

 -

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

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

 -Метки

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

 -Фотоальбом

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

 -Я - фотограф

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

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

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

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

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

 

 -Сообщества

Участник сообществ (Всего в списке: 58) Моя_дача Рецепты_домохозяек Лорелея Креативные_идеи ПОИСК_ПРАВДЫ УРОКИ_ФОТОШОПА Народные_советы Домашняя_Мастерская Темы_и_схемы опекАй про_искусство ПАРФЮМЕРИЯ_И_КОСМЕТИКА полезные_игрушки Live_Memory Hand_made_TOYS Заработок_в_интеренете Младшие_школьники Заработок_в_инете Аудиокниги вязалочки мир_красивых_поделок_и_изделий Нумерология Я-Женщина _В_И_Н_Т_А_Ж_ дарить_подарки_клёво БУДЬ_ЗДОРОВ Царство_Кулинарии Это_волшебное_ПЛАТЬЕ Сообщество_Творческих_Людей Радуга_женственности Вяжем_спицами_и_крючком Обречены_на_Счастье Секреты_здоровья История_и_культура Усы_лапы_и_хвост ЛиРу Уголок_психолога СТИХОТВОРЕНИЯ Bellydance Camelot_Club Geo_club hand_made Котомания our_home УпрЯЯЯмые_ПОХУДЕЙКИ союз_хендмейдеров_Украины Лучшее_Для_Цитатника Рецепты_приготовления Неизвестная_Планета Клуб_Красоты_и_Здоровья Я_-_МАСТЕРИЦА ИСКУССТВОбезГРАНИЦ Моя_кулинарная_книга Женская_тема Комфортариум Creative_Designs Только_для_женщин Телепроект_Дом-2
Читатель сообществ (Всего в списке: 13) СкАзОчНыЙ_мИр_КаРтИНоК Наши_схемы Ссылочки_малятам Темы_и_схемы_для_Вас Evernote_Ru Kowaii_tochka_ru Live__ART КАПЕЛЬКИ_ЖИЗНИ samaya_news Celebrity_Style Up_Build Madame_Frames О_Самом_Интересном

 -Статистика

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


Работаем над 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 в ссылку
 Подписаться на комментарии
 Подписать картинку