В прошлой публикации я разобрался как вставлять видео из Youtube или из моего компьютера в Html. В этой статье я хочу показать как я учился вставлять аудиодорожку и изменять его интерфейс.
Как вставить аудио в html?
Чтобы установить аудиофайл на ваш сайт нужно в <body> </body> прописать <audio> </audio>.
Первый способ. Установить аудио в папку с проектом и прописать такой код <audio src="название" controls> </audio>
Второй способ. Вместо названия файла можно вставить ссылку на песню.
На сайте в Яндекс.Браузер кастомный интерфейс будет выглядеть так
Основные атрибуты
Атрибуты для аудио похожи что и для видео.
- Autoplay - музыка будет автоматически воспроизводиться после того как сайт загрузился
- Controls - отображает необходимый интерфейс
- Loop - аудио будет воспроизводиться циклично
Как видоизменить пульт управления?
1) Изменение фона интерфейса
audio::-webkit-media-controls-panel {
background-color: цвет;
}
2) Изменяет цвет кнопки громкости
audio::-webkit-media-controls-mute-button {
background-color: цвет;
border-radius: 50%;
}
3) Изменяет цвет кнопки воспроизведения при наведении курсором
audio::-webkit-media-controls-play-button:hover {
background-color: rgba(177,212,224, .7);
}
4) Изменяется время продолжительности аудио (работает вместе с первым кодом)
audio::-webkit-media-controls-current-time-display {
color: цвет;
}
5) Изменяется оставшееся время песни
audio::-webkit-media-controls-time-remaining-display {colors: цвет;}
6) Изменяет цвет ползунка продолжительности аудио
audio::-webkit-media-controls-timeline {
background-color: цвет;
border-radius: 25px;
margin-left: 10px;
margin-right: 10px;
}
7) Изменяет цвет ползунка громкости при наведении
audio::-webkit-media-controls-volume-slider {
background-color: цвет;
border-radius: 25px;
padding-left: 8px;
padding-right: 8px;
}