Player audio HTML5 lecture continue.
Résolu
Ben314
Messages postés
2312
Date d'inscription
Statut
Membre
Dernière intervention
-
Ben314 Messages postés 2312 Date d'inscription Statut Membre Dernière intervention -
Ben314 Messages postés 2312 Date d'inscription Statut Membre Dernière intervention -
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 :
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
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
A voir également:
- Html5 player audio
- Musique audio - Télécharger - Lecture & Playlists
- Adobe flash player - Télécharger - Divers Web & Internet
- Realtek audio driver - Télécharger - Pilotes & Matériel
- Windows media player - Télécharger - Lecture
- Html5 video player - Télécharger - Divers Web & Internet
2 réponses
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
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
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) :
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 ^^
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
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
Voici un exemple permettant de récupérer les musiques les unes après les autres :
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.oggJ'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.