Playlist musicale sans Flash.

Signaler
-
Messages postés
2738
Date d'inscription
samedi 16 février 2019
Statut
Membre
Dernière intervention
15 avril 2021
-
Bonjour à tous,
et déjà merci pour vos retours, vos connaissances, vos recherches,

Je ne comprenais pas : depuis 2-3 mois, mon site avait des bugs sur certaines applications. Après deux jours de recherche pour comprendre mon bug, à fouiller dans les codes, je viens de trouver : Flash n'existe plus. (oui, je suis en retard ..)

Maintenant, je dois trouver de quoi substituer ce que j'avais : ça fait plusieurs heures que je cherche sans trouver bonheur. Je me tourne donc vers vous.

Ce que je voudrais retrouver, ce que j'appelle une playlist radio blog :
C'est un lecteur de musique mp3 de plusieurs morceaux (j'en avais environ 200) qui sont placés dans un répertoire, hébergés sur mon serveur. Les morceaux s'enchaînent les uns après les autres, j'avais une option random très bienvenue, contrôle du volume, nom du morceau, bref, c'était vraiment le top.

Voici une page contenant cette playlist : elle fonctionnait très bien avant la disparition de Flash de nos écran : http://atchoumation.net/viajes/radioviaje/index.php ..

Si vous connaissez une alternative efficace à ça, ou si vous savez comment corriger le script .. je suis vraiment preneur !

Merci pour votre aide, ma "radio" est vraiment le fruit d'un travail de recherche (dans plusieurs pays d'Europe).
Sam







Configuration: Windows / Chrome 89.0.4389.114

2 réponses

Messages postés
2738
Date d'inscription
samedi 16 février 2019
Statut
Membre
Dernière intervention
15 avril 2021
521
Bonjour,

Il y'a des lecteur en HTML5 "tout fait", ça peut être un piste:

- http://www.instantshift.com/2012/06/08/15-free-html5-audio-players-for-your-website-and-blogs/


Cordialement.
Bonjour,
Et bien, j'avais vu cette page (assez vieillot, beaucoup de liens morts) : j'espérais quelque chose de plus simple (et surtout plus facilement modifiable).

J'ai fini par choisir Able Player .. (un peu à reculons)
J'ai créé ça : http://www.atchoumation.net/prog/scripts/ableplayer/demos/radio.html .

J'ai maintenant besoin d'informations sur la structure de ce code java (je ne maîtrise pas du tout ce langage), et aussi j'aimerais modifier/rajouter des choses : est-ce que c'est possible ? Comment faire ? Dans quel document on peut modifier ça ?

Voici mes questions :
- Que signifient les liens qui sont en <dependencies> ? c'est utile ? notamment celui vers ajax.googleapis.com ?
- Comment réduire la taille des boutons ?
- Comment créer une barre de défilement, pour éviter les 30/200 boutons les uns sous les autres ?
- Comment coder et créer un bouton : "Random" qui mélange tous les morceaux ?
et accessoirement : Comment modifier couleurs du cadre / t'aille d'écriture ?

Merci à vous,
Sam
> Atchoumation
Salut,
"J'ai maintenant besoin d'informations sur la structure de ce code java (je ne maîtrise pas du tout ce langage"

Non pas Java mais JavaScript qui n'ont pas grand chose à voir.

Quel genre d'informations?
C'est très proche de l'Action Script le JavaScript, c'est même une norme commune(ECMAScript).

Quand à la structure du "code"(ou plutôt d'un programme) c'est la même chose pour tout les langages de script(voire pour 90% des langages de programmation).
Avec comme particularité d'être objet(paradigme POO) pour JavaScript puisque le DOM.
Et aussi facilement avec une approche événementielle(tout comme l'était Action Script).

D’ailleurs les lecteurs sont basés sur l'API et ils peuvent tenir en une 20aine de lignes(voire moins tout dépends ce qu'on veut) et être agrémenté de CSS facilement...

Vous avez vu que dans le lien que vous indiquez le dernier mot est "radio". Pour un simple lecteur de fichiers audio peut-être pas nécessaire d'avoir quelque chose de plus compliqué que la demande à moins que vous vouliez une radio avec diffusion en direct - en vrai streaming- ? sinon je vois pas trop l'intérêt, prenez le player le plus simple qui comprends une playlist quitte à rajouter un peu de CSS pour les boutons.

Les tutos sur le web ça existe, pas très compliqué un simple lecteur, ici le minimum(un seul fichier) avec uniquement du HTML:

<audio controls>
  <source src="monAudio.mp3" type="audio/mpeg">
  <source src="monAudio.ogg" type="audio/ogg">
  <p>Votre navigateur ne prend pas en charge l'audio HTML. Voici un
     un <a href="myAudio.mp4">lien vers le fichier audio</a> pour le
     télécharger.</p>
</audio>

source avec les autres méthodes de l'objet/API audio:
https://developer.mozilla.org/fr/docs/Web/HTML/Element/audio

ou un exemple avec tuto complet(ou alors simplement copier coller les 3 "parties" indiqués) avec design graphique en CSS:
https://www.script-tutorials.com/html5-audio-player-with-playlist/

Bien sûr s'il faut gérer dynamiquement la playlist il faudra passer par une base de données et un programme serveur(donc si précédent avec Flash/SWF cela devait être limité de ce côté là).

Bonjour, et merci pour ton message et tes infos sur le javascript,
Grâce à ton dernier lien, j'ai trouvé jplayer (en fait, j'ai su ce que je devais chercher) : j'ai globalement trouvé bonheur.
Mais j'ai encore des petites choses à revoir sur ma page : http://www.atchoumation.net/viajes/radio-jplayer.html .. même si franchement, je touche au but (et j'en suis ravi !).

Quatre questions sur le cadre qui a été créé :
- Comment je peux centrer le cadre "div" ? j'ai essayé de placer le "center" à peu près partout, je n'ai pas trouvé le bon endroit.
- Comment insérer un scrolling, puisqu'il va y avoir environ 200 morceaux ?
- Dans quel endroit je peux modifier la taille du poster/image ?
- Il y a un bug dans tous les signes spéciaux sur la page que je viens de créer, les é, ñ, etc... d'où ça vient ? Quelque chose dans le "head" ?

J'apprends pas mal en tout cas, merci à vous,
Sam
Messages postés
2738
Date d'inscription
samedi 16 février 2019
Statut
Membre
Dernière intervention
15 avril 2021
521
Bonjour, je ne suis pas codeur donc il y'a peut être plus clean, mais en cherchant un peut sur le net:
Pour centrer:
Soit modifier les propriétés css de la classe
jp_container_1

Soit directement ajouter l'attribut à la div
style="margin:0 auto"



Pour le scrolling, dans les propriétés css mettre une auteur fixe et utiliser
overflow: scroll;

(+
overflow-x: hidden;
pour masquer le défilement horizontal)


Pour l'image je joue sur le style et je recentre avec le css:


Pour les accents je sais pas trop, ça ressemble à un copier/coller d'un texte qui avait un jeu de caractères différents...
>
Messages postés
2738
Date d'inscription
samedi 16 février 2019
Statut
Membre
Dernière intervention
15 avril 2021

Oh punaise !
T3chN0g3n, tu n'es peut être pas un codeur, mais tes deux premiers paragraphes (centrage, scrolling) sont parfaits !
Je m'occupe du reste maintenant ..

C'est très difficile de chercher sur internet, quand on n'a pas la lecture facile des codes ou qu'on ne sait pas quoi et où chercher .. ou de la place des codes dans les programmes. J'ai passé deux heures hier à chercher comment centrer, et à aucun moment, je n'ai vu ta manip (la seule qui a fonctionné ..). D'habitude, j'arrive à gérer sur mon site avec mes recherches, mais là, c'était trop complexe pour moi .. d'où ma demande d'aide. (et j'ai bien fait, vous m'avez vraiment bien aiguillé, sur mes recherches notamment).
> Atchoumation
Il serait plus simple et efficace d'apprendre plutôt que d'appliquer des choses que vous ne comprenez pas...et qui seront au niveau du résultat que pour la source utilisée hasardeuse.
Bref copier coller quelque chose ne sert à rien. Un langage est fait pour écrire des indications qui sont lues par une machine.
Ke veut dire qu'il n'y a pas de solutions passe partout et reproductible mais des moyens de produire ce qui est nécessaire, donc différent pour chaque cas.

Si on ne sait pas quelles instructions et comment les écrire difficile d'arriver à quelque chose.
HTML et CSS servent à intégrer des contenus pour l'un , à intégrer ou réaliser une mise en page pour l'autre.

"quand on n'a pas la lecture facile des codes"
Il faut donc apprendre comment ça marche ;)

"qu'on ne sait pas quoi et où chercher "
En effet c'est la compétence principale pour le développement informatique.
Du moment qu'on à compris pourquoi où et comment on sait ce' qu'il faut chercher.
Sinon c'est dur de trouver ce qu'on ne sait pas chercher.

Il y a toujours la référence pour le CSS avec des tutos. Des tutos vous en trouverez partout ailleurs en français aussi, et suivant votre niveau.

Pour les caractères il faut bien entendu utiliser un jeu de caractère compatible avec le français(qui comprend les accents et autres caractères spéciaux qui n'existent pas en anglais).

Ce genre de chose se trouve généralement dans le premier cours HTML au bout d'une dizaine de ligne.
Pour le français il faut indiquer "utf-8".

"mais tes deux premiers paragraphes (centrage, scrolling) sont parfaits ! "
Tant mieux si ça vous à aidé mais le CSS du centrage est faux et ne marche pas tel qu'il est écrit(ni ne sert au centrage d'ailleurs, il concerne les marges).
Et ce n'est pas ça un "scrolling" en informatique.

La propriété overflow concerne les barres de défilements d'un élément comme indiqué dans le manuel du CSS et la valeur scroll signifie défiler en anglais.
Un scrolling est une animation défilante ce qui n'a donc rien à voir.
C'est sûr qu'en employant les mauvais termes on ne risque pas de trouver ;)

https://www.w3schools.com/cssref/pr_pos_overflow.asp
Messages postés
2738
Date d'inscription
samedi 16 février 2019
Statut
Membre
Dernière intervention
15 avril 2021
521 > Totox
Bonjour aussi,

Et bien ... Super productif comme commentaire ... Vous avez des presta à vendre non ? Parce que à part essayer de décourager les gens dont ce n'est pas le métier mais qui essayent juste de débrouiller, je vois pas trop l'objectif, surtout que vous ne détaillez pas. Si votre seul solution c'est "lisez des références qui prennent des années à apprendre aux gens dont c'est le métier" merci, mais non merci.

Pour info le centrage fonctionne, je test avant de partager ...
"auto est remplacé par une valeur adaptée (il peut être utilisé pour centrer les blocs, par exemple, div { width:50%; margin:0 auto; } permet de centrer un conteneur div horizontalement)." Source : https://developer.mozilla.org/fr/docs/Web/CSS/margin

Et 99% de la population parle de "scrolling" pour le défilement de la molette, ont est pas informaticien, ont parle avec un vocabulaire que l'ont comprend. (Surtout que la valeur s'appelle littéralement "scroll") ...