Bonjour et merci de passer du temps sur mon sujet.

J'aimerais créer un bouton play, mais juste le play que j'aurais designé au préalable et qu'il soit fonctionnel pour passer sur le bouton stop, le problème c'est que je ne sais pas quel type de code utiliser et c'est pour cela que je ne savais pas trop où poster ce message. je ne sais pas non plus comment faire en sorte que mon fichier m3u (qui est le flux de ma radio), ai la possibilité d'être écouté depuis ce lecteur, pouriez vous m'éclairer sur ces points ? afin que je puisse mener mes recherches sur ça création.

Merci d'avence pour vos réponses

9 réponses


Benjamin Derepas
Réponse acceptée

Tu peux regarder tu coté de l'api audio d'html-5.
Un exemple simple de ce que tu peux faire :

var audio = new Audio('intro.mp3');
var play = $("#play");
    audio.autoplay=false; // change si tu le souhaite 
    play.click(function(){
    if(audio.muted == false)
        {
            audio.muted=true;
        }
        else if(audio.muted == true)
        {
            audio.muted=false;
        }
Graph+
Auteur
Réponse acceptée

Je vais essayer ceci, comme la balise audio marche correctement, je me suis demandé si on peut la personnaliser, ça s'avere vrai, je donne mes résultat juste après http://www.cefim.eu/balise-html5-audio-comment-lutiliser-personnaliser/

Graph+
Auteur
Réponse acceptée

Merci pour vos réponse, je ne connaissais pas l'existence de "audio" pour l'html et mes questions étaient plus grande pour savoir comment m'y prendre, le fichier m3u est un flux, je ne peux donc pas attendre, mais j'ai ouvers le fichier m3u et pris le lien du flux qui s'y trouvais et avec mes petites connaissance en javascript et la page qui a été envoyé pour me permettre de personnaliser le lecteur m'ont permis d'avoir se que j'attendais : http://graph-plus.alwaysdata.net/sitec/2.0/

Je n'ai pas vraiment personalisé le lecteur, je lès juste caché avec le display none, et créé une commande à distance sur la même page, ainsi mon site commance à prendre forme avec le lecteur qui s'y ajoute. Merci ;)

Graph+
Auteur

Je vais tester ça et donner ma réponse ;-)

Graph+
Auteur

en html 5 ça fonctionne parfaitement

    <audio controls="controls" class="audio" id="audio">

            <source src="http://streaming.radionomy.com/radioGraphPlus" type="audio/mp3" />

    </audio>

Mais en revanche je ne comprends pas le code javascript pour lancer le son en appuyant sur l'image, voilà se que j'avais tenté de faire :

    <img src="player.png" alt="" class="player" id="play">  

    <audio controls="controls" class="audio" id="audio">

      <source src="http://streaming.radionomy.com/radioGraphPlus" type="audio/mp3" />

    </audio>

    <script type="text/javascript">

      var audio = new Audio('http://streaming.radionomy.com/radioGraphPlus');
      var play = $("#play");
      audio.autoplay=false; // change si tu le souhaite 
      play.click(function(){
        if(audio.muted == false)
          {
              audio.muted=true;
          }
          else if(audio.muted == true)
          {
              audio.muted=false;
          }

    </script>

Je ne suis pas un as en javascript mais je comprends bien ce code, ( lorsque l'on appuis sur un élément ayant l'id play tu réalise la fonction suivant -> if il n'y a pas de son, tu mets du son sinon si si il y a du son, tu éteins la musique ).

J'aimerais créer un bouton play, mais juste le play que j'aurais designé au préalable et qu'il soit fonctionnel pour passer sur le bouton stop

Tu voulais bien un bouton pour lancer/stoper le flux audio ?

Il me semble que l'on ne peut pas lire directement un fichier m3u.

Comme le fichier M3U est une liste de lecture et non un fichier data contenant ta musique.

Tu peux définir dans ta page, un événement pour savoir à quel moment ton morceau est fini

////
var audio = new Audio();

////// JAVASCRIPT //////
// Ta liste de lecture
var SoundTrack = [
'morceau1.mp3',
'morceau2/son2.mp3',
'udp://@224.127.127.1:1234'
];

// Evenement détectant la fin de la lecture du morceau
audio.addEventListener('onended', function(){
audio.src = SoundTrack.shift(); // On charge le morceau
audio.play(); // Et on le lance
SoundTrack.push(audio.src); // Si tu veux ta liste de lecture en boucle
}, false);

window.addEventListener('onload',function(){
audio.src = SoundTrack.shift(); // On charge le morceau
audio.play(); // Lecture automatique au chargement
SoundTrack.push(audio.src); // Si tu veux ta liste de lecture en boucle
},false);

// Bouton Play
$('#play').on('click',function(){ audio.play(); });

// Bouton Stop
$('#stop').on('click',function(){ audio.stop(); });

Graph+
Auteur

je fais des tests sur le site que je vous ai envoyé à cette heure donc certaines choses seront déformé ^^