Плеер html в теге audio
Что такое тег audio, как использовать тег audio, как вставить ссылку в тег audio. Вообще, тег audio - это самый простой плеер html , вот так он будет выглядеть(в зависимости от браузера вид может быть разным):
![Плеер html в теге audio Плеер html в теге audio](https://dwweb.ru/__img/page/2020_11_14_06_33.png)
О теге audio - плеер
Что такое тег audio
Тег audio, это плеер, который вы видите ниже(это живой код плеера, можно нажать пуск) :
Синтаксис на выше приведенном теге audio:
<audio controls style="width:100%"><source src="https://dwweb.ru/путь до файла.mp3"></audio>
Отображение тега audio в разных браузерах :
В трех трех браузерах (показать)![Отображение тега audio в разных браузерах : Отображение тега audio в разных браузерах :](https://dwweb.ru/__img/page/2020_11_14_06_34.png)
![Отображение тега audio в разных браузерах : Отображение тега audio в разных браузерах :](https://dwweb.ru/__img/page/2020_11_14_06_33.png)
Что у нас есть в панель управлением тегом audio или плеером?
Слева направо:
Кнопка запуска и остановки воспроизведения audio.
Временные метки, время прошедшее, время оставшиеся.
Шкала отображения процесса audio.
Кнопка регулировки громкости.
И три вертикальные кнопки - кнопки скачать терк.
![Что у нас есть в панель управлением тегом audio или плеером? Что у нас есть в панель управлением тегом audio или плеером?](https://dwweb.ru/__img/page/2020_11_14_06_49.png)
Убираем обводку у тега audio
Если мы нажмем воспроизведение audio в плеере, то при нажатии образуется линия обводки - она не очень красивая - поэтому уберем её!
![Убираем обводку у тега audio Убираем обводку у тега audio](https://dwweb.ru/__img/page/2020_11_14_06_56.png)
Добавим класс нашему audio, и туда же переместим ширину, на весь экран, чтобы было компактнее:
#player{
width: 100%;
outline: unset;
}
<audio controls class ="audio"><source src="https://dwweb.ru/путь/digital_emotion_get_up.mp3"></audio>