Une page "musique" lecteur audio HTML5...

Bonjour à tous,

Très simplement, je cherche à reproduire ceci : https://demo.audiotheme.com/promenade/music/live-at-blues-alley/

C'est à dire, sur une page, mettre à l'écoute des morceaux de musique avec un affichage "en ligne", avec sur chaque ligne :
Bouton play/pause - le nom de la musique
et juste en dessous une petite timeline
et rien d'autre

Cela fait des heures que je fouille sur le net, je trouve beaucoup de plugin ou script qui embarque un petit lecteur carré et assez "moche" qui ressemble a des lecteurs flash...

J'ai l'impression que ce que je souhaite faire est basique, mais pas moyen de trouver comment faire...

Une aide serait précieuse..merci

Salut

exemple assez simple ici

http://codepen.io/anon/embed/Kfgix?height=213amp;theme-id=5580amp;slug-hash=Kfgixamp;default-tab=result

Bonjour Jencal,

Merci pour ta réponse.

En effet, ça se rapproche déjà plus de ce que je cherche... Je vais regarder.

Si vous avez d'autres pistes, je prends !

Merci

Le soucis que je rencontre avec cet exemple, c'est que ça ne gère qu'une seule piste, or je souhaite en mettre plusieurs...

Sur mon exemple, lorsque l'on clique sur le "play" d'un autre morceau, le précédent s'arrête et le nouveau commence.
C'est cela que je cherche à faire.
J'ai reussi à mettre 1 morceau avec l'exemple de Jencal, mais je n'arrive pas à en mettre plusieurs.

Merci par avance de votre aide

Oui tu as le même exemple ici :

http://codepen.io/katzkode/pen/ZbxYYG

Haha justement, en même temps que j'écrivais ce message je fouillais sur ce site et je l'ai trouvé en même temps
Merci je crois que ça va le faire, je suis en plein test

Bon pour l'instant ça ne marche pas...
le html "<div id="audio-players"></div>" ne génère pas les dit-lecteurs...
Je cherche mais pour l'instant je ne comprends pas d'où vient le soucis.

J'ai le message d'erreur suivant :

"Uncaught TypeError: $ is not a function"
ligne 210, qui correspond à cette partie du code JS :

function createAudioPlayers() {
	for (f in files) {
		var playerString = "<div id=\"audioplayer-" + f + "\" class=\"audioplayer\"><button id=\"playbutton-" + f + "\" class=\"play playbutton\"></button><div id=\"timeline-" + f + "\" class=\"timeline\"><div id=\"playhead-" + f + "\" class=\"playhead\"></div></div></div>";
		$("#audio-players").append(playerString);
	}
}

Je n'y comprends rien en JS, est-ce que quelqu'un sait de quoi il s'agit ?

Bonsoir.

$... c'est plus que du JS, c'est du JQuery...
Personnellement je ne connais pas.

Arf... en plus, je commençais à vraiment bien l'aimer ce lecteur.... Personne ?

Et il y a aussi que je ne vois pas comment faire figurer les titres de mes morceaux dans ce code...

En fait ça ne reprend pas le titre, mais le nom du fichier "machintruc.mp3", c'est pas très jolie... il n'y aurait pas un moyen de saisir manuellement le titre ?

Oui importer jquery c'est comme ça , mais fait le dans le head non ? car peut être que tu importes TON script avant d'importer jquery...

Pour les titres, tu peux placer les titres dans un tableau (si tu connais bien l'ordre) et ensuite dans la boucle tu fais appel à ce tableau:

Dans ce nouvel exemple http://codepen.io/JUSEN/pen/gwkWgQ

j'ai ajouter un tableau, où tu peux changer les titres des exemples.

Merci BEAUCOUP Jencal, tu me sauves la vie.
Je vais très vite tester tout ça et je te fais un retour.