Пишу урок, как я делаю плеер, который включается с помощью кнопочки, как во флеш. Важные атрибуты буду выделять красным цветом и объяснять, что они означают.

Обычный 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 - Делаем рамочку с картинками
...
Часть 34 - Закругляем углы изображения с помощью HTMLкода
Часть 35 - РАМКИ С КРУГЛЫМИ УГЛАМИ БЕЗ ФОТОШОПА
Часть 36 - Как к фоновому изображению добавить кнопку с прозрачным HTML5 аудиоплеером
Часть 37 - ОБРАМЛЯЕМ КАРТИНКУ РАМОЧКОЙ (урок от Zomka)
Часть 38 - ПРОСТЫЕ РАМКИ С ЗАГОЛОВКОМ
Часть 39 - Полоски или линии которыми можно украсить свой текст
Часть 40 - КОДЫ ОСНОВНЫХ КНОПОЧЕК

Серия сообщений "Плееры":
Часть 1 - МУЗЫКА + ПЛЕЕРЫ
Часть 2 - Делаем плеер
...
Часть 4 - Плеер-картинка и Как вставить музыку во флеш-плеер
Часть 5 - Переход на коды...HTML5 для ЛиРу - коды плееров
Часть 6 - Как к фоновому изображению добавить кнопку с прозрачным HTML5 аудиоплеером