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

Пишу урок, как я делаю плеер, который включается с помощью кнопочки, как во флеш. Важные атрибуты буду выделять красным цветом и объяснять, что они означают.
Пишу этот урок не как догму, а как руководство к действию. Поэтому и предлагаю сделать плеер сначала полупрозрачным, чтобы вы смогли видеть, что изображение вашей преобразованной кнопочки будет расположено точно под кнопкой включения/паузы аудиоплеера. Если при уменьшении ширины аудиоплеера до 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 пикселей, иначе пропадёт кнопка воспроизведения, и вы не сможете включать и выключать аудио в прозрачном плеере!

 

Серия сообщений "Помощь в оформлении":

Картинка Ссылка текст ссылки картинка - ссылка пример

Часть 1 - Схема"Светлая нежность".
Часть 2 - Черновик
...
Часть 15 - Как к фоновому изображению добавить кнопку с прозрачным HTML5 аудиоплеером
Часть 16 - Как превратить HTML аудиоплеер в круглую кнопку и разместить его поверх фонового изображения - повтор поста по просьбе
Часть 17 - Как к фоновому изображению добавить кнопку с прозрачным HTML5 аудиоплеером
Часть 18 - Очень понравились схемы
Часть 19 - Схемка «Алая роза в золотой оправе»
Часть 20 - Набор "Викторианские зарисовки".

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

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

Его код:

---

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

---

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


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

Серия сообщений "Помощь в оформлении":

Картинка Ссылка текст ссылки картинка - ссылка пример

Часть 1 - Схема"Светлая нежность".
Часть 2 - Черновик
...
Часть 14 - Кнопочки для плееров
Часть 15 - Как к фоновому изображению добавить кнопку с прозрачным HTML5 аудиоплеером
Часть 16 - Как превратить HTML аудиоплеер в круглую кнопку и разместить его поверх фонового изображения - повтор поста по просьбе
Часть 17 - Как к фоновому изображению добавить кнопку с прозрачным HTML5 аудиоплеером
Часть 18 - Очень понравились схемы
Часть 19 - Схемка «Алая роза в золотой оправе»
Часть 20 - Набор "Викторианские зарисовки".

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

Пишу урок, как я делаю плеер, который включается с помощью кнопочки, как во флеш. Важные атрибуты буду выделять красным цветом и объяснять, что они означают.
Пишу этот урок не как догму, а как руководство к действию. Поэтому и предлагаю сделать плеер сначала полупрозрачным, чтобы вы смогли видеть, что изображение вашей преобразованной кнопочки будет расположено точно под кнопкой включения/паузы аудиоплеера. Если при уменьшении ширины аудиоплеера до 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 пикселей, иначе пропадёт кнопка воспроизведения, и вы не сможете включать и выключать аудио в прозрачном плеере!

 

Серия сообщений "Помощь в оформлении":

Картинка Ссылка текст ссылки картинка - ссылка пример

Часть 1 - Схема"Светлая нежность".
Часть 2 - Черновик
...
Часть 13 - HTML5 для ЛиРу - коды плееров
Часть 14 - Кнопочки для плееров
Часть 15 - Как к фоновому изображению добавить кнопку с прозрачным HTML5 аудиоплеером
Часть 16 - Как превратить HTML аудиоплеер в круглую кнопку и разместить его поверх фонового изображения - повтор поста по просьбе
Часть 17 - Как к фоновому изображению добавить кнопку с прозрачным HTML5 аудиоплеером
Часть 18 - Очень понравились схемы
Часть 19 - Схемка «Алая роза в золотой оправе»
Часть 20 - Набор "Викторианские зарисовки".

Серия сообщений "Помощь в оформлении":

Картинка Ссылка текст ссылки картинка - ссылка пример

Часть 1 - Схема"Светлая нежность".
Часть 2 - Черновик
...
Часть 12 - Как вставить аудиофайл (музыку) с помощью HTML5
Часть 13 - HTML5 для ЛиРу - коды плееров
Часть 14 - Кнопочки для плееров
Часть 15 - Как к фоновому изображению добавить кнопку с прозрачным HTML5 аудиоплеером
Часть 16 - Как превратить HTML аудиоплеер в круглую кнопку и разместить его поверх фонового изображения - повтор поста по просьбе
...
Часть 18 - Очень понравились схемы
Часть 19 - Схемка «Алая роза в золотой оправе»
Часть 20 - Набор "Викторианские зарисовки".

Серия сообщений "Помощь в оформлении":

Картинка


Ссылка
текст ссылки

картинка - ссылка


пример

Часть 1 - Схема"Светлая нежность".
Часть 2 - Черновик
...
Часть 11 - Урок - как взять прямую ссылку музыкального файла с браузера Google для плеера
Часть 12 - Как вставить аудиофайл (музыку) с помощью HTML5
Часть 13 - HTML5 для ЛиРу - коды плееров
Часть 14 - Кнопочки для плееров
Часть 15 - Как к фоновому изображению добавить кнопку с прозрачным HTML5 аудиоплеером
...
Часть 18 - Очень понравились схемы
Часть 19 - Схемка «Алая роза в золотой оправе»
Часть 20 - Набор "Викторианские зарисовки".

Как вставить аудиофайл (музыку) с помощью HTML5

По слухам грядут тяжелые времена для нас, любителей флеш плееров И я задалась вопросом, Как вставить аудиофайл (музыку) с помощью HTML5 к себе в дневник, в статью, в ближайшем будущем? Почитала...и составила с помощью браузера Chrome версии 7( браузер у меня Яндекс. Браузер) вот такие простые проигрыватели с картинками ( украшать мы любим свои публикации )

Новогодняя

Любимые глаза

Волшебный дудук

Осень придет

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

Серия сообщений "коды для ЛиРу":

Часть 1 - Цветное окошко для кода
Часть 2 - Фоновое изображение в рамке. Часть 1
...
Часть 28 - Плеер с Привет.ру теперь и с Лирушной пропиской!
Часть 29 - Учимся делать кликабельную кнопку для постов "Понравилось"
Часть 30 - Как вставить аудиофайл (музыку) с помощью HTML5

Серия сообщений "Помощь в оформлении":

Картинка


Ссылка
текст ссылки

картинка - ссылка


пример

Часть 1 - Схема"Светлая нежность".
Часть 2 - Черновик
...
Часть 10 - КАК ДЕЛАТЬ РАМКИ БЕЗ КОДА И МУЧЕНИЙ
Часть 11 - Урок - как взять прямую ссылку музыкального файла с браузера Google для плеера
Часть 12 - Как вставить аудиофайл (музыку) с помощью HTML5
Часть 13 - HTML5 для ЛиРу - коды плееров
Часть 14 - Кнопочки для плееров
...
Часть 18 - Очень понравились схемы
Часть 19 - Схемка «Алая роза в золотой оправе»
Часть 20 - Набор "Викторианские зарисовки".

Урок - как взять прямую ссылку музыкального файла с браузера Google для плеера

По просьбе моих друзей даю урок - как взять прямую ссылку музыкального файла с браузера Google для плеера. Например, с этого сайта MUZMO.RU: Читать далее Валентина Begi

Серия сообщений "Помощь в оформлении":

Картинка


Ссылка
текст ссылки

картинка - ссылка


пример

Часть 1 - Схема"Светлая нежность".
Часть 2 - Черновик
...
Часть 9 - Шпаргалочка по тегам
Часть 10 - КАК ДЕЛАТЬ РАМКИ БЕЗ КОДА И МУЧЕНИЙ
Часть 11 - Урок - как взять прямую ссылку музыкального файла с браузера Google для плеера
Часть 12 - Как вставить аудиофайл (музыку) с помощью HTML5
Часть 13 - HTML5 для ЛиРу - коды плееров
...
Часть 18 - Очень понравились схемы
Часть 19 - Схемка «Алая роза в золотой оправе»
Часть 20 - Набор "Викторианские зарисовки".

НАШЛА КАК ДЕЛАТЬ РАМКИ БЕЗ КОДА И МУЧЕНИЙ..ДЛЯ ВАС....

http://bighugelabs.com/deck.php



ОЧЕНЬ ИНТЕРЕССНЫЙ САЙТИК, МОЖНО СОХРАНИТЬ СЕБЕ В ДОКУМЕНТ И СДЕЛАТЬ ПОСТ , КАРТИНКА В ОБЗОРЕ, КОНЕЦ МУЧЕНИЯМ, Я ИСКАЛА КАК СДЕЛАТЬ ФОНЫ В РАМКУ И СЛУЧАЙНО НАТКНУЛАСЬ НА ЭТОТ САЙТ, МНЕ ОН ПОНРАВИЛСЯ, ДЛЯ ВАС. УСПЕХОВ ВАМ В ТВОРЧЕСТВЕ!!!!! ДОБАВИЛА СКРИНШОТЫ  ДЛЯ ТЕХ, КТО НЕ ПОНИМАЕТ КАК  ЭТО ДЕЛАТЬ!!!!!

Серия сообщений "Помощь в оформлении":

Картинка Ссылка текст ссылки картинка - ссылка пример

Часть 1 - Схема"Светлая нежность".
Часть 2 - Черновик
...
Часть 8 - Уроки для новичков Лиру
Часть 9 - Шпаргалочка по тегам
Часть 10 - КАК ДЕЛАТЬ РАМКИ БЕЗ КОДА И МУЧЕНИЙ
Часть 11 - Урок - как взять прямую ссылку музыкального файла с браузера Google для плеера
Часть 12 - Как вставить аудиофайл (музыку) с помощью HTML5
...
Часть 18 - Очень понравились схемы
Часть 19 - Схемка «Алая роза в золотой оправе»
Часть 20 - Набор "Викторианские зарисовки".