T

Это плеер свернутый, чтобы кнопка занимала 48х48

<div class="mp3-player" data-mp3="https://samplelib.com/mp3/sample-3s.mp3"> <audio preload="none"></audio> <button type="button" aria-label="Play" aria-busy="false"> <svg viewBox="0 0 200 200" aria-hidden="true"> <circle cx="100" cy="100" r="95" fill="#D9D9D9" stroke="black" stroke-width="10"></circle> <path class="mp3-play" fill="black" d="M134.173 95.67C137.506 97.5945 137.506 102.406 134.173 104.33L86.6636 131.76C83.3303 133.684 79.1636 131.279 79.1636 127.43V72.5705C79.1636 68.7215 83.3303 66.3159 86.6636 68.2404Z"></path> <path class="mp3-pause" d="M78.1948 71.585V128.415M121.805 71.585V128.415" stroke="black" stroke-width="20" stroke-linecap="round"></path> <g class="mp3-loader" fill="none" stroke-width="6"> <circle cx="100" cy="100" r="24" stroke="black" opacity=".15"></circle> <circle cx="100" cy="100" r="24" stroke="black" stroke-dasharray="40 111" stroke-linecap="round"></circle> </g> </svg> </button> </div> <script> (() => { const player = document.currentScript.previousElementSibling; const audio = player.querySelector("audio"); const button = player.querySelector("button"); audio.src = player.dataset.mp3; const loading = value => button.setAttribute("aria-busy", value); const update = () => { player.classList.toggle("is-playing", !audio.paused); button.setAttribute("aria-label", audio.paused ? "Play" : "Pause"); }; const ready = () => { loading(false); update(); }; button.onclick = () => { if (audio.paused) { button.title = ""; loading(true); audio.play().catch(error => { ready(); if (error.name !== "AbortError") button.title = "Не удалось воспроизвести MP3"; }); } else { audio.pause(); } }; audio.onwaiting = () => loading(!audio.paused); audio.onplay = update; audio.onplaying = audio.onpause = audio.onended = ready; audio.onerror = () => { ready(); button.title = "Не удалось загрузить MP3"; }; })(); </script> <style> .mp3-player button { display: block; width: 48px; height: 48px; padding: 0; border: 0; background: transparent; cursor: pointer; } .mp3-player svg { display: block; width: 100%; height: 100%; } .mp3-player .mp3-pause, .mp3-player .mp3-loader, .mp3-player.is-playing .mp3-play { display: none; } .mp3-player.is-playing .mp3-pause { display: inline; } .mp3-player [aria-busy="true"] .mp3-play, .mp3-player [aria-busy="true"] .mp3-pause { display: none; } .mp3-player [aria-busy="true"] .mp3-loader { display: inline; transform-origin: 100px 100px; animation: mp3-spin .8s linear infinite; } @keyframes mp3-spin { to { transform: rotate(360deg); } } </style>

Это развернутый плеер
Тут нужно вставить ссылку на mp3 файл

<div class="mp3-player" data-mp3="https://samplelib.com/mp3/sample-3s.mp3"> <audio preload="none"></audio> <button type="button" aria-label="Play" aria-busy="false"> <svg viewBox="0 0 200 200" aria-hidden="true"> <circle cx="100" cy="100" r="95" fill="#D9D9D9" stroke="black" stroke-width="10"></circle> <path class="mp3-play" fill="black" d="M134.173 95.67C137.506 97.5945 137.506 102.406 134.173 104.33L86.6636 131.76C83.3303 133.684 79.1636 131.279 79.1636 127.43V72.5705C79.1636 68.7215 83.3303 66.3159 86.6636 68.2404Z"></path> <path class="mp3-pause" d="M78.1948 71.585V128.415M121.805 71.585V128.415" stroke="black" stroke-width="20" stroke-linecap="round"></path> <g class="mp3-loader" fill="none" stroke-width="6"> <circle cx="100" cy="100" r="24" stroke="black" opacity=".15"></circle> <circle cx="100" cy="100" r="24" stroke="black" stroke-dasharray="40 111" stroke-linecap="round"></circle> </g> </svg> </button> </div> <script> (() => { const player = document.currentScript.previousElementSibling; const audio = player.querySelector("audio"); const button = player.querySelector("button"); audio.src = player.dataset.mp3; const loading = value => button.setAttribute("aria-busy", value); const update = () => { player.classList.toggle("is-playing", !audio.paused); button.setAttribute("aria-label", audio.paused ? "Play" : "Pause"); }; const ready = () => { loading(false); update(); }; button.onclick = () => { if (audio.paused) { button.title = ""; loading(true); audio.play().catch(error => { ready(); if (error.name !== "AbortError") button.title = "Не удалось воспроизвести MP3"; }); } else { audio.pause(); } }; audio.onwaiting = () => loading(!audio.paused); audio.onplay = update; audio.onplaying = audio.onpause = audio.onended = ready; audio.onerror = () => { ready(); button.title = "Не удалось загрузить MP3"; }; })(); </script> <style> .mp3-player button { display: block; width: 48px; height: 48px; padding: 0; border: 0; background: transparent; cursor: pointer; } .mp3-player svg { display: block; width: 100%; height: 100%; } .mp3-player .mp3-pause, .mp3-player .mp3-loader, .mp3-player.is-playing .mp3-play { display: none; } .mp3-player.is-playing .mp3-pause { display: inline; } .mp3-player [aria-busy="true"] .mp3-play, .mp3-player [aria-busy="true"] .mp3-pause { display: none; } .mp3-player [aria-busy="true"] .mp3-loader { display: inline; transform-origin: 100px 100px; animation: mp3-spin .8s linear infinite; } @keyframes mp3-spin { to { transform: rotate(360deg); } } </style>