Player audio HTML5 lecture continue. [Résolu/Fermé]

Signaler
Messages postés
2283
Date d'inscription
lundi 12 décembre 2011
Statut
Membre
Dernière intervention
1 mai 2017
-
Messages postés
2283
Date d'inscription
lundi 12 décembre 2011
Statut
Membre
Dernière intervention
1 mai 2017
-
Bonjour

Je test actuellement ce player audio HTLM pour mon site, pour remplacer le lecteur flash que j'ai (DEWPLAYER)

Voici le code de base :

<html>
<head>
<title>HTML5 Audio Player with Playlist</title>
<script>
function loadSong(elt, e) {
if(!e) var e = window.event;
document.getElementById("player").src=elt.href;
document.getElementById("player").load();
document.getElementById("player").play();
return false;
}
window.onload = function() {
links = document.getElementById("playlist").getElementsByTagName("a");
for(var i = 0; i<links.length; i++) {
links[i].onclick=function(e) { return loadSong(this, e); };
}
}
</script>
</head>
<body>
<div>
<audio tabindex="0" id="player" controls="controls">
balise audio HTML5 inconnue</audio>
<ul id="playlist">
<li><a href="fichier1.ogg" onclick="loadSong()">fichier1</a></li>
<li><a href="fichier2.ogg" onclick="loadSong()">fichier2</a></li>
<li><a href="fichier3.ogg" onclick="loadSong()">fichier3</a></li>
</ul>
<ul id="signature">cc-by-sa <a href="http://ww55.monsite.org/"
target="_blank">signature</a></ul>
</div>
</body>
</html>


Ma question est toute bête, mais je sais pas comment faire.
Comment faire pour que la lecture se face en continue ????
CAD quand je clique sur un fichier, que les suivants continue sans avoir a cliquez.


Merci beaucoup

2 réponses

Messages postés
2379
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
10 mars 2020
425
Salut,

Tu peux utiliser l'événement onEnded de la balise audio pour détecter la fin de lecture du fichier afin de lancer la lecture du fichier audio suivant.
Un exemple simple ici : https://stackoverflow.com/questions/18274061/html-5-audio-tag-multiple-files

Bonne journée
Messages postés
2283
Date d'inscription
lundi 12 décembre 2011
Statut
Membre
Dernière intervention
1 mai 2017
1 138
je te remercie beaucoup :)
j'aurais du préciser que mes connaissance en js sont plutôt médiocre :(
j'ai fait du C# je voit bien ce qu'il faut faire mais comment...

Alors bon je tâtonne sans trop de résultat, j'ai déjà ajouter ça (pas de moquerie svp) :

// event listeners
document.getElementById("player").addEventListener("ended", PlayNext);


Le truc c'est que pour ma fonction PlayNext, je sais pas trop comment récupérer la valeur de l'élément suivant pour le faire "manger" a ma fonction loadsong.
ou bien ou trouver celle l'élément existant et l'incrémenter...

Bref je vais continuer à chercher et à essayer de comprendre comment ça fonctionne ^^
Salut,
avec HTML5 pas mal de nouvelles fonctionnalités.
Pour la playlist il faut faire un tableau(array) avec les url des fichiers.
En comptant la position(-1 car le premier indice du tableau est 0) on passe au suivant.
Voilà j'espère c'est clair.

L'autre truc à faire est de placer le code en utilisant body onload=fonctionprincipale()
(ou bien avec la fonction document.ready() de jquery qui fait la même chose) car cela vérifie que le DOM est bien chargé(l'arbre des balises accessible par javascript) avant d'y accéder sinon ça posera des problèmes.

Petit recap des événements de audio et video(et méthodes):
http://www.w3schools.com/tags/ref_av_dom.asp

Un petit exemple d'un lecteur (video) customizé(en cours de dév.).
Je n'ai pas encore implémenté complètement la fonction pour boucler sur toute la playlist par contre alors prendre le code tel qu'il est ;)

https://jsbin.com/doriwoluku/edit?html,js,output
Messages postés
2379
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
10 mars 2020
425
C'est un bon début !

Voici un exemple permettant de récupérer les musiques les unes après les autres :
<ul id="playlist">
<li><a href="fichier1.ogg" onclick="loadSong()" class="song">fichier1</a></li>
<li><a href="fichier2.ogg" onclick="loadSong()" class="song">fichier2</a></li>
<li><a href="fichier3.ogg" onclick="loadSong()" class="song">fichier3</a></li>
</ul>


var currentIdSong = 0; // numéro de la musique en cours (commence à 0)
var songs = document.querySelectorAll('.song'); // liste des musiques (balises a)
var songsLength = songs.length; // nombre de musiques
var currentSong = songs[0].getAttribute('href'); // nom du fichier de la musique en cours

function nextSong() {
    currentIdSong = (currentIdSong + 1) % songsLength;
    currentSong = songs[currentIdSong].getAttribute('href');
    return currentSong;
}

// test
console.log(currentSong); // fichier1.ogg
nextSong();
console.log(currentSong); // fichier2.ogg
nextSong();
console.log(currentSong); // fichier3.ogg
nextSong();
console.log(currentSong); // fichier1.ogg
nextSong();
console.log(currentSong); // fichier2.ogg
nextSong();
console.log(currentSong); // fichier3.ogg


J'ai ajouté une classe "song" afin de sélectionner plus facilement les liens.
On commence par initialiser plusieurs variables (voir commentaires), puis dans la fonction nextSong(), on utilise l'opérateur modulo pour boucler sur le nombre de musique et renvoyer la musique suivante.
Messages postés
2283
Date d'inscription
lundi 12 décembre 2011
Statut
Membre
Dernière intervention
1 mai 2017
1 138
Suite

Et dire que j'ai galérer tous ça parce j'étais en php 4.4.3 :(
Du coup ya plus de soucis...


Merci de vos contributions