Hoya player audio

Soyez le premier à donner votre avis sur cette source.

Vue 3 097 fois - Téléchargée 700 fois

Description

il s'agit d'un player audio utilisant la balise audio.

-il est positionné sur la gauche et est retractable.

-il comporte une playliste elle aussi retractable.

-des que l'on quite la page pour aller sur une autre page du meme domaine(site) la lecture reprend la ou elle s'est arreté.

-il geré le mp3 et le ogg tous dependra apres de la prise en charge de l'un ou de l'autre des formats par le navigateur.

-on peut aussi rajouter de simples lien dans une page vers des fichiers musicaux et au chargement de la page un icone de lecture pause au debut de chaques liens sera cree dynamiquement et dès que l'on clic sur un lien la lecture du dit fichier et lance sans changer de page.

-la position de lecture et du son ainsi que le titre en cour et la position marche arret sont conservé des que l'on quite la page.

_on peut aussi choisir si le lecteur doit se mettre en route au chargement de la page.

sa mise en oeuvre est tres simple il suffit de rajouter dans la page un lien ver le js et le css

quand a la liste de lecture il suffit de modifier le array se trouvant au debut du fichier js et pour simplifier la creation du array j'ai rajouter dans le zip un fichier qui sert gerer une playlist et a generer le array contenant les liens vers les fichiers musicaux


lien pour testé page teste

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Messages postés
1768
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
21 octobre 2020
105
de nos jour du fait que je n'utilise pas jQuery j'avoue me sentir de plus en plus seul.
Messages postés
706
Date d'inscription
mercredi 17 novembre 2004
Statut
Membre
Dernière intervention
29 septembre 2013

Bonjour,

Code de qualité, épuré et commenter correctement pour qu'il soit relativement compréhensible au premier coup d'oeil. Pour ma part j'aurai plutot utilisé jquery que ce soit sur la gestion des évènements et les interactions avec l'objet audio mais ce n'est qu'une question de goût de chacun.

Quoi qu'il en soit félicitation, code fonctionnel et exemple épuré et visuellement attractif
Messages postés
195
Date d'inscription
lundi 28 janvier 2013
Statut
Membre
Dernière intervention
13 janvier 2017
3
superbe :)

Quelques idées d'améliorations :

- tu pourrais systématiser l'utilisation de addEventListener au lieu de passer par des setAttribute('on...' surtout que tu l'utilises en fin de script pour le load
- tu pourrais l'orienter composant un peu à la jQuery UI histoire de pouvoir l'instancier avec des options, et laisser l'utilisateur se charger de l'init
- tu pourrais en faire un deux composants : un qui gère la balise audio avec les helpers de playlist et autres fonctions style play, rewind ... et un composant interface qui construit et dirige l'interface que tu proposes ... juste histoire d'utiliser ton composant audio facilement sur une autre interface ou présentation ...

En tout cas félicitations, le résultat claque bien !

Bonne continuation
Messages postés
1768
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
21 octobre 2020
105 >
Messages postés
195
Date d'inscription
lundi 28 janvier 2013
Statut
Membre
Dernière intervention
13 janvier 2017

j'utilise generalement addEventListener et j'utilise aussi setAttribute car il donne l'avantage de pouvoir mettre des parametres j'aurait aussi pu mettre une fonction anonyme.

en ce qui concerne les composant je m'efforce de faire des fonction qui on une utilité bien précise et globaliste afin d'être utilisables mais c'est pas toujours évident et pour cette source j'ai vraiment fait quelle que chose de spécifique j'ai dalleur préféré faire un objet unique considérant qu'il n'est pas utile d'avoir plusieurs lecteurs audio dans une page puisque le cerveau ne peut écouté qu'une chanson a la fois il a par contre l'avantage de pouvoir écouté tous les liens d'une page sans s'encombrer d'un multitude de lecteurs qui ralentisses de façon importantes le chargement d'une page.

en tous cas merci pour les compliments.

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.