https://online-audio-convert.com/ru/mp4-to-mp3/ - здесь мощный конвертер
----------------------------
Конвертирование любого файла в mp3
https://audiotrimmer.com/ru/online-mp3-converter/ - Максимальный размер файла 100 МБ
----------------------------
https://audio.online-convert.com/ru/convert-to-mp3

Чтобы увидеть название и исполнителя - подведите курсор к плееру. Чтобы включить запись - кликните по плееру ЛЕВОЙ кнопкой мышки и в окошке - ВОСПРОИЗВЕСТИ.

Код: <table background="//img1.liveinternet.ru/images/attach/d/4/161/381/161381535_shar1.png"><tbody><tr><td height="90" width="90"><div style="padding: 30px 32px 20px 21px"><audio controls="controls" src="//img1.liveinternet.ru/images/attach/d/4//13471/13471047_marsel__novogodnyaya.mp3" title="Марсель - Новогодняя" style="width: 25px; height: 25px; border-radius: 25px; border:5px solid #ff0000;" type="audio"></audio></div></td></tr></tbody></table>



Код: <table background="//img0.liveinternet.ru/images/attach/d/4/161/381/161381600_shar2.png"><tbody><tr><td height="90" width="60"><div style="padding: 30px 25px 20px 21px"><audio controls="controls" src="//img1.liveinternet.ru/images/attach/d/4//13471/13471043_elena_petrenko__novogodnyaya.mp3" title="Елена Петренко - Новогодняя" style="width: 25px; height: 25px; border-radius: 25px; border:5px solid #ff0000;" type="audio"></audio></div></td></tr></tbody></table>



Код: <table background="//img1.liveinternet.ru/images/attach/d/4/161/296/161296683_sh19126.gif"><tbody><tr><td height="102" width="100"><div style="padding: 50px 20px 20px 28px"><audio controls="controls" src="//img1.liveinternet.ru/images/attach/d/4//13471/13471050_novogodnie_pesni_2019__denis_klyaver__novogodnyaya.mp3" title="Денис Клявер - Новогодняя" style="width: 30px; height: 30px; border-radius: 25px; border:5px solid #03A027;" type="audio"></audio></div></td></tr></tbody></table>



Код: <table background="//img0.liveinternet.ru/images/attach/d/4/161/296/161296682_sh19125.gif"><tbody><tr><td height="118" width="120"><div style="padding: 50px 19px 20px 30px"><audio controls="controls" src="//img1.liveinternet.ru/images/attach/d/4//13471/13471037_blestyaschie__novogodnyaya_pesnya.mp3" title="Блестящие - Новогодняя" style="width: 30px; height: 30px; border-radius: 25px; border:5px solid #03A027;" type="audio"></audio></div></td></tr></tbody></table>

На сегодняшний день коды работающие. Ссылку не записала, когда гуглила, искала работающие коды. Дряни много, поэтому ссылки не брала.
----------------------------------------------------------------------------------------------------------
Добрый день! Приятно, что на ЛиРу всё больше и больше людей, которые не хотят ждать милостей от природы или других людей, а берут быка за рога сами: лезут в исходный код страницы и т.д. Для остальных, менее любознательных, просто опубликую HTML5 "коды" основных плееров. Очень кратко, на вопросы отвечать не буду. Сразу скажу, что коды могут быть не обязательно вот прямо точь в точь такими. Если интересны подробности, почитайте в учебниках или справочниках по HTML5 про теги "audio" и "video".

Аудиоплеер


Видеооплеер

Параметр "poster" может отсутствовать. Ширина и высота указывается в пикселях.

Музыкальная открытка
По сути это - видеоплеер, но с аудиофайлом:

Совет. Чтобы кнопки управления воспроизведением не закрывали картинку, рекомендую добавить внизу картинку что-то примерно на 30 пикселей.

- этот меня устраивает.
Но! При ширине 15 пикселей зачем у радиуса 60 рх? Толи ему (радиусу) ещё какую-то невидимую фигню закруглять надо. Ведь по-сути закруглить нужно края ширины 15-ти пикселей. Меняю на 15рх

Ну и как? А вот если изменяю ширину плеера на 60рх в соответствии с размером радиуса 60рх. Больше в коде ничего не меняла. Получается результат:

-----------------------------------------------------------------------------------------------------
Здесь убрала - background-color: black;

Здесь убрала - #000000;

Потому что это обозначение цвета обводки. А зачем двойное обозначение? Это перегрузка кода!
Результат один. Или то или другое - на выбор
----------------------------------------------------------------------------------------------------
Здесь я убрала тень и её цвет. Радиус поставила 25рх, как ширина плеера.

----------------------------------------------------------------------------------------------------
Я не учу и не поучаю. Думаю, ищу правильность и простоту.
Свои плееры я выложу в подходящих постах. Урок писать не буду.

А ещё именно у этого плеера при подволке к нему стрелку мышки на включение - становится видным назвиние мелодии и исполнитель.
В других кодах плееров нет этого.

Глубокая терапия сна Лечение бессонницы Спать спокойно