Подойдет любой музыкальный файл с расширением .mp3
Можно с какого-то сайта с общим доступом прослушивания файла типа https://tunnel.ru/ (где уже генерируется код вставки в ли.ру), а можно закачанный здесь, как было у меня.
Плеер выше имеет ширину 600px, высоту 500px.
Заменяем при желании:
width: 600px на любую ширину. Пошире надо для того, чтобы перематывать музыку было легче.
height: 500px на любую высоту. Если сделать слишком высоко, то тогда красивее будет вставить фоновую картинку. Если сделать 13, то это будет просто узкая полоска без картинки
Вот маленький плеер шириной 200px и высотой 13px, перемотать его почти нереально
Толщина всех четырех сторон и цвет рамочки плеера: box-shadow: 0 0 20 40px #000000;
Цвет фона: background-color: yellow
Black, или #000000 - это, например, черный цвет (одно и то же написание). Этим можно "покрасить" рамку для плеера или его фон. Можете поменять по палитре цветов на какой нужно.
ВНИМАНИЕ!!! Если вы накладываете непрозрачную картинку background-image (см.пункт ниже), то она, скорее всего, просто закроет толщину и цвет рамки, и они не будут видны.
Вот плеер шириной 200px и высотой 130px с фоновым желтым цветом
background-image: url('АДРЕС_КАРТИНКИ') если высота плеера большая, то она будет видна.
Вот плеер шириной 200px и высотой 130px с такой прозрачной гиф-картинкой на синем фоне
border-radius: 0px прямоугольный плеер
border-radius: 10px и выше - округлый. ВНИМАНИЕ!!!! Большое значение округлости может временно привести к потере кнопки воспроизведения, так что прибавляйте это значение по ситуации (просматривайте что получается)
К дизайну плеера также применимы теги таблиц, вставки фонов, создания теней и краев
