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





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