Плеер html в теге audio

Что такое тег audio, как использовать тег audio, как вставить ссылку в тег audio. Вообще, тег audio - это самый простой плеер html , вот так он будет выглядеть(в зависимости от браузера вид может быть разным):

О теге audio - плеер

1. Что такое тег audio
2. Убираем обводку у тега audio
3. Скачать

Что такое тег audio

Тег audio, это плеер, который вы видите ниже(это живой код плеера, можно нажать пуск) :

Синтаксис на выше приведенном теге audio:

<audio controls style="width:100%"><source src="https://dwweb.ru/путь до файла.mp3"></audio>

Отображение тега audio в разных браузерах :

В трех трех браузерах (показать)
На проценты не смотрите, просто... первая попавшаяся картинка...
, тег audio будет выглядеть одинаково:

Что у нас есть в панель управлением тегом audio или плеером?

Слева направо:

Кнопка запуска и остановки воспроизведения audio.

Временные метки, время прошедшее, время оставшиеся.

Шкала отображения процесса audio.

Кнопка регулировки громкости.

И три вертикальные кнопки - кнопки скачать терк.





Убираем обводку у тега audio

Если мы нажмем воспроизведение audio в плеере, то при нажатии образуется линия обводки - она не очень красивая - поэтому уберем её!



Добавим класс нашему audio, и туда же переместим ширину, на весь экран, чтобы было компактнее:

Style :

#player{

width: 100%;

outline: unset;

}

Html :

<audio controls class ="audio"><source src="https://dwweb.ru/путь/digital_emotion_get_up.mp3"></audio>

Результат: