Подойдет любой музыкальный файл с расширением .mp3
Например, можно с какого-то сайта с общим доступом прослушивания файла типа сайт_1 (где в отдельном окне при нажатии на стрелку "скачать" открывается адрес mp3), или сайт_2, где после открытия страницы с песней правой кнопкой просматриваем исходный код и ctrl+F ищем код песни типа http........mp3
Плеер выше имеет ширину 600px, высоту 500px.
Заменяем при желании:
width: 600px на любую ширину. Пошире надо для того, чтобы перематывать музыку было легче.
height: 500px на любую высоту. Если сделать слишком высоко, то тогда красивее будет вставить фоновую картинку. Если сделать 13, то это будет просто узкая полоска без картинки
Вот маленький плеер шириной 200px и высотой 13px, перемотать его почти нереально. Ниже - ширина 500px
Цвета фона и рамочки (обводки): ищем сочетания, переводящиеся как цвета, начинающиеся с:
background-color или с #...... . Этим можно "покрасить" рамку для плеера или его фон. Можете поменять по палитре цветов на какой нужно.
ВНИМАНИЕ!!! Если вы накладываете непрозрачную картинку background-image (см.пункт ниже), то она, скорее всего, просто закроет толщину и цвет рамки, и они не будут видны.
Вот плеер шириной 200px и высотой 50px с фоновым желтым цветом
background-image: url('АДРЕС_КАРТИНКИ') если высота плеера большая, то она будет видна.
Вот плеер шириной 200px и высотой 130px с такой прозрачной гиф-картинкой на синем фоне
border-radius: 0px получится прямоугольный плеер как желтый (выше)
border-radius: 10px и выше - округлый. ВНИМАНИЕ!!!! Большое значение округлости может временно привести к потере кнопки воспроизведения, так что прибавляйте это значение по ситуации (просматривайте что получается)
К дизайну плеера также применимы теги таблиц, вставки фонов, создания теней и краев