Discussion :

[hub73]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?


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

Merci à vous.

[Doksuri]

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 javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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);

[hub73]

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