Personnaliser balise audio.

Bonjour.
J'utilise le code suivant pour notre webradio :

Code:

---

1 2 3 4 5 6 7 8

<div align="center" id="webradio_encours"></div> <div class="audioplayer"> <p align="center"> <audio autoplay="" controls="controls" preload="none"> <source src="https://www.lesfloralies.ovh/floralies.ogg" type="audio/ogg"> </audio> </p> </div>

---

Je souhaiterais personnaliser l'affichage, simplifier. Mettre un 'gros bouton play sous la forme d'une image' pour lire le flux de la radio. Et un bouton 'pause' lorsque le flux est en cours de lecture.
Dois-je m'orienter vers du javascript ? Avez-vous un exemple ?
Pièce jointe 601127

Vous pouvez voir la page ici : https://www.lesfloralies.info

Merci à vous.

Citation:

---

Envoyé par hub73

Dois-je m'orienter vers du javascript ?

---

=> oui
il faut que tu rajoute un id a ton element audio pour pouvoir le selectionner/manipuler en JS <audio id="monAudio" autoplay="" controls="controls" preload="none"> par exemple.

Code:

---

1 2 3 4 5 6 7 8 9 10 11

function playPause() { const audio = document.getElementById('monAudio'); if (audio.paused) { audio.play(); //changer image tonImagePlaypause en "pause" } else { audio.pause(); //changer image tonImagePlaypause en "play" } } tonImagePlaypause.addEventListener("click", playPause);

---

Parfait. Tout fonctionne parfaitement. Un grand merci !
Le résultat final est ici : https://www.lesfloralies.info ou http://www.lesfloralies.info/program..._floralies.php