PP-MB03

Dies ist ein Platzhalter für benutzerdefinierten Code.
Wechseln Sie zur Vorschau oder veröffentlichen Sie die Seite,
um zu sehen, wie der Code funktioniert. Zum Bearbeiten Doppelklick ausführen

<!DOCTYPE html> <html> <head> <html> <head> <style> .player { background-color: transparent; height: 80px; width: 80px; border-radius: 80px; display: flex; justify-content: center; align-items: center; margin: 0 auto; } .play-button { background-color: ColorOne; border-radius: 50%; height: 80px; width: 80px; display: flex; justify-content: center; align-items: center; margin: 0 auto; cursor: pointer; } .play-symbol { border-style: solid; border-width: 20px 0 20px 30px; border-color: transparent transparent transparent #ee8d00; } .stop-symbol { background-color: #ee8d00; height: 20px; width: 20px; margin: 0 auto; } </style> </head> </html>

Wir arbeiten mit professionellen Sprecher.innen,

die Ihrem Unternehmen den richtigen Touch verleihen!

Dies ist ein Platzhalter für benutzerdefinierten Code.
Wechseln Sie zur Vorschau oder veröffentlichen Sie die Seite,
um zu sehen, wie der Code funktioniert. Zum Bearbeiten Doppelklick ausführen

<!DOCTYPE html> <html> <body> <audio controls id="audio1" style="display:none"> <source src="https://us-ms.gr-cdn.com/getresponse-MTsRv/recordings/8648a1de-72d1-4b62-95ed-89664cbaff0c.mp3" type="audio/mpeg"> </audio> <div class="player" id="player1"> <div class="play-button" id="play-stop-toggle1"> <div class="play-symbol"></div> </div> </div> <script> const audio1 = document.querySelector("#audio1"); const playStopToggle1 = document.querySelector("#play-stop-toggle1"); playStopToggle1.addEventListener("click", function () { if (audio1.paused) { audio1.play(); playStopToggle1.innerHTML = '<div class="stop-symbol"></div>'; } else { audio1.pause(); playStopToggle1.innerHTML = '<div class="play-symbol"></div>'; } }); </script> </body> </html>

Dies ist ein Platzhalter für benutzerdefinierten Code.
Wechseln Sie zur Vorschau oder veröffentlichen Sie die Seite,
um zu sehen, wie der Code funktioniert. Zum Bearbeiten Doppelklick ausführen

<!DOCTYPE html> <html> <body> <audio controls id="audio2" style="display:none"> <source src="https://us-ms.gr-cdn.com/getresponse-MTsRv/recordings/e47281d2-1f8f-4d6b-a1fd-8baf2205fb0d.mp3" type="audio/mpeg"> </audio> <div class="player" id="player2"> <div class="play-button" id="play-stop-toggle2"> <div class="play-symbol"></div> </div> </div> <script> const audio2 = document.querySelector("#audio2"); const playStopToggle2 = document.querySelector("#play-stop-toggle2"); playStopToggle2.addEventListener("click", function () { if (audio2.paused) { audio2.play(); playStopToggle2.innerHTML = '<div class="stop-symbol"></div>'; } else { audio2.pause(); playStopToggle2.innerHTML = '<div class="play-symbol"></div>'; } }); </script> </body> </html>

Dies ist ein Platzhalter für benutzerdefinierten Code.
Wechseln Sie zur Vorschau oder veröffentlichen Sie die Seite,
um zu sehen, wie der Code funktioniert. Zum Bearbeiten Doppelklick ausführen

<!DOCTYPE html> <html> <body> <audio controls id="audio3" style="display:none"> <source src="https://us-ms.gr-cdn.com/getresponse-MTsRv/recordings/e47281d2-1f8f-4d6b-a1fd-8baf2205fb0d.mp3" type="audio/mpeg"> </audio> <div class="player" id="player3"> <div class="play-button" id="play-stop-toggle3"> <div class="play-symbol"></div> </div> </div> <script> const audio3 = document.querySelector("#audio3"); const playStopToggle3 = document.querySelector("#play-stop-toggle3"); playStopToggle3.addEventListener("click", function () { if (audio3.paused) { audio3.play(); playStopToggle3.innerHTML = '<div class="stop-symbol"></div>'; } else { audio3.pause(); playStopToggle3.innerHTML = '<div class="play-symbol"></div>'; } }); </script> </body>

Dies ist ein Platzhalter für benutzerdefinierten Code.
Wechseln Sie zur Vorschau oder veröffentlichen Sie die Seite,
um zu sehen, wie der Code funktioniert. Zum Bearbeiten Doppelklick ausführen

<!DOCTYPE html> <html> <body> <audio controls id="audio4" style="display:none"> <source src="https://us-ms.gr-cdn.com/getresponse-MTsRv/recordings/e47281d2-1f8f-4d6b-a1fd-8baf2205fb0d.mp3" type="audio/mpeg"> </audio> <div class="player" id="player4"> <div class="play-button" id="play-stop-toggle4"> <div class="play-symbol"></div> </div> </div> </body> </html> <script> const audio4 = document.querySelector("#audio4"); const playStopToggle4 = document.querySelector("#play-stop-toggle4"); playStopToggle4.addEventListener("click", function () { if (audio4.paused) { audio4.play(); playStopToggle4.innerHTML = '<div class="stop-symbol"></div>'; } else { audio4.pause(); playStopToggle4.innerHTML = '<div class="play-symbol"></div>'; } }); </script> </body> </html>

Das sind beispielhafte Mailboxen!

prägnant und professionell, genau wie Sie es wollen!

4Jobs Personalmanagement GmbH

AMSC Austria GmbH

Webhotels

Hans Pichler Gesellschaft m.b.H.