Pour nous contacter : soyez au rendez-vous sur IRC ! ⋅ Parcourir l'archive musicale Dogmazic ⋅ Notre Blog
Notre Documentation

Un player audio libre en HTML (5 et 4) pour votre site web

novembre -1 modifié dans Tech
Salut,

Slcnc Mini Player vient de sortir, c'est un player minimal à intégrer sur des sites web, il nécessite un hébergement web supportant PHP.

Il fonctionne avec les navigateurs récents, même si Flash n'est pas installé sur le navigateur de la personne qui visite votre site web.

[edit : et même, avec des navigateurs moins récents que ça, depuis la version 0.3 du player, si j'ai fait du bon boulot]

Il s'installe très facilement - pas de base de donnée. Une ligne de configuration à éditer, copie des fichiers php sur le serveur web, et c'est prêt à recevoir l'audio.

On peut télécharger le logiciel sur Sourceforge, où il y a aussi des liens vers des exemples d'intégration.

https://sourceforge.net/projects/slcncminiplayer/

Si vous avez besoin d'une fonctionnalité en plus ou de support pour le déploiement n'hésitez pas à me contacter shangri-l@hotmail.fr

Ce que j'aimerais bien ajouter dans le futur, c'est du support pour la lecture continue automatique.

Bonne journée

Réponses

  • J'ajoute que le support de l'audio HTML5 quand c'est en double format mp3 et ogg (pour que ça passe partout) pose encore des problèmes à Chromium sous Linux, au niveau de la liaison avec les codecs installé sur le système (donc peut être que c'est spécifique à certains codecs). En tous cas avec ce navigateur en particulier sur ce système en particulier, le rendu est affreux, tout déformé et joué trop vite.
  • Bonjour,

    Le player ne semble pas être colmpatible avec IE9 (comme s'est étonant).

    Nous avons le message suivant :
    Your browser is old for audio
    Feeling Feeling on : Lift/Locked by Me In The Bath

    Hors sur mon poste toutes les màj sont présente.

    Sous Firefox 10.0.1 et le même poste aucun probleme
  • Tiens, c'est curieux, pourtant théoriquement IE9 supporte le tag HTM5 'audio', à partir du moment où l'un des formats proposés est mp3.

    Je viens de faire quelques essais pour aider, peut-être, IE, mais ce n'est pas possible en fait, car ça rend le player incompatible avec Chrome.

    Tout ça signifie que IE9 dans la version utilisée ne supporte pas l'attribut "source" pour le tag audio, qui permet de spécifier de multiples sources dans différents formats. Donc au choix, soit on code de l'audio spécifique à IE9 et qui marchera aussi sur Safari uniquement, soit on code de l'audio standard qui marchera sur tous les navigateurs récents sauf IE9.
  • J'ai trouvé un début de réponse pour IE 9, il ne prend en charge que le MP3 et le MP4 pour l'audio et le type MINE doit être correcte par rapport au format sinon il ne lit pas.

    C.f. : http://msdn.microsoft.com/fr-fr/library/ie/gg589483(v=vs.85).aspx

    Bon sa me rapelle que je ferais bien de me rafraichir les connaissance sur le acheteumeuleu vu que je n'ai même pas été voir les nouveautés de la version 5.:P
  • Ok merci, le problème était dans le mime type je crois, je mettais 'audio/mp3' alors que le mime canonique est plutôt 'audio/mpeg'.

    J'ai changé ça sur les sites qui sont présentés comme exemples d'intégration, peut-être que ça passera sous IE maintenant, en tous cas ça règle le problème de son pourri sous Chromium/Linux.

    Si vous avez votre propre installation du player chez vous, il faut remplacer, dans "embed.php", les deux lignes qui, chacune, disent :

    [code:1]echo '<audio controls="controls" ><source preload="none" type="audio/ogg" src="audio/'.str_replace (".flac",".ogg",str_replace('"','\\"',$tableau[$ind])).'"></source><source preload="none" type="audio/mp3" src="audio/'.str_replace (".flac",".mp3",str_replace('"','\\"',$tableau[$ind])).'"></source>Your browser is old for audio</audio><br/>';[/code:1]

    par

    [code:1]echo '<audio controls="controls" ><source preload="none" type="audio/ogg" src="audio/'.str_replace (".flac",".ogg",str_replace('"','\\"',$tableau[$ind])).'"></source><source preload="none" type="audio/mpeg" src="audio/'.str_replace (".flac",".mp3",str_replace('"','\\"',$tableau[$ind])).'"></source>Your browser is old for audio</audio><br/>';[/code:1]

    En attendant que je bascule la modif sur la prochaine version du player téléchargeable sur Sourceforge.

    Merci encore
  • Non, j'ai parlé trop vite, pour Chromium sous Linux le bug est encore là. C'est juste qu'il ne se manifeste pas toujours.
  • le problème est toujours présent sous IE 9 même après avoir vidé et rechargé le cache.

    J'ai téléchargé les sources pour voir aussi de mon coté.

    Petite question, n'est se pas un peu prématuré de passer en HTML5 alors qu'il ne sera mis en activité que cette année et recommandé en 2020?

    Je dis cela pour des problème de compatibilité des navigateurs et aussi car il sera amener a évoluer en fonction des retours auprès de la w3c qui risque de faire des modifs et de devoir reprendre le code mis en place?
  • j'ai pas attendu 2010 que Css 2 soit valide W3C pour en faire :)

    Les premiers browsers majeurs qui supportaient HTML 5 sont sortis il y a des anne'es.

    Si je prends un de mes blogs plutot grand public, il y a 90% des browsers qui supportent Html5 sur les cents derniers acce's.

    J'ai mis du code de fallback qui peut peut etre marcher sous IE sur les sites exemples liste's sur la page sourceforge du projet, la modif est en ligne, c'est a' tester.
  • shangril écrit:
    il y a 90% des browsers qui supportent Html5 sur les cents derniers acce's.

    94% si on compte IE9
  • la version 0.2 est sortie, elle corrige le bug d'IE9 j'espere, et ajoute certains vieux browsers, comme Firefox avant la 3.0, sur la liste des navigateurs qui devraient fonctionner.
  • J'ai encore fait un peu de dev (ce qui peut expliquer des trucs bizarre si vous avez visité les sites exemples dans la demi heure précédentes), je suis arrivé à ça

    -si support du tag audio, on utilise le tag audio
    -sinon, si support du streaming mp3 direct par le browser, on utilise ça
    -au pire, on donne des liens pour déclencher le streaming dans le lecteur de média par défaut du système, via une liste m3u

    Donc, ça devrait fonctionner sur tout browser supportant les iframe, qui doivent exister depuis 2000 ou 2001 ou peut-être même avant. Les iframes, c'est du HTML 4.01.

    Sauf que bien sûr, comme je n'ai pas de musée des navigateurs sous la main, je n'ai pas pu tester. Donc on verra s'il y a des retours. Mais théoriquement c'est juste le plus portable des players possible, en admettant que le code que je viens de rajouter fonctionne.

    Pour une migration depuis une 0.1 ou une 0.2 : remplacez juste le fichier embed.php par sa nouvelle version. N'oubliez pas de l'éditer avant pour préciser l'emplacement de la bibliothèque de lecture des tags ID3, mais si vous avez installé une version précédente, vous saviez déjà que c'est nécessaire.
  • Ok, d'après ce que je viens de voir passer dans les logs pour les accès qui ont eu lieu cette nuit, on dirait bien que la fonction 'si pas de support du tag audio, utiliser le streaming direct mp3 via navigateur, si disponible' est utilisable :

    J'ai dans les logs des accès directs aux fichiers audio par IE6, IE7 et IE8. Après c'est pas certain que ça veuille bien dire ça, mais c'est une possibilité.

    Aussi ;

    Il y a des chances pour que le player soit intégré sur http://projectnovacomponere.webs.com qui est un site de création musicale collaborative, d'après les retours que j'ai eu via Diaspora.

    Et sinon, les IFRAMES sont apparues en 1997, et ont été standardisées dans HTML4. Désolé pour les gens qui utilisent encore IE3 ou Netscape 3, ça ne va pas marcher. Faut mettre à jour, les gens (enfin si vous pouvez).
  • Salut,

    Les versions 0.5 et 0.4 sont sorties. La 0.4 c'est juste de la correction de bugs mineurs (un bug spécifique à Elinks, un bug spécifique au mode "streamer tout l'audio disponible", un bug spécifique à certains environnements CSS bien particuliers + mise à jour de la documentation incluse). La 0.5 apporte, par contre, des fonctionnalité sympa

    -des pages faciles à partager pour la selection actuelle du player, aussi pour chaque artiste, album, morceau. Possibilité d'intégrer facilement un widget tiers genre AddThis pour avoir les boutons Facebook, Twitter etc. Des liens "share" s'affichent sous chaque morceau.

    Voir une demo sur par exemple http://nicolaschartoire.com

    -effet de bord, il est maintenant possible d'obtenir un player intégrable juste pour une chanson ou juste pour un album (et toujours, juste pour un artiste, ça ça a pas changé)

    Petit bug pas encore corrigé : si deux chansons, sur le même album, ont exactement le même titre, elle s'afficheront toute les deux sur la page "chanson" et dans le player "chanson".

    Pour une migration depuis une version antérieure, une fois que vous aurez modifié le fichier embed.php comme d'habitude pour indiquer l'endroit ou votre bibliothèque php-getid3 est située, remplacer tous les fichiers PHP sur votre serveur web par les fichiers PHP de la nouvelle version.

    Ça se passe toujours sur

    https://sourceforge.net/projects/slcncminiplayer/
  • Yellow,

    La version 0.6 est sortie :

    https://sourceforge.net/projects/slcncminiplayer/

    Au programme :

    -une interface simplifiée pour générer le code d'intégration du player
    -support pour les albums multi-artistes (splits, compilations...)

    Un exemple d'intégration du player est sur http://nicolaschartoire.com

    En cas de migration depuis une version antérieure:

    -décompressez l'achive de la 0.6

    -modifier "embed.php" avec le bon emplacement pour la bibliothèque de lecture des tags et éventuellement votre code de partage sur les réseaux sociaux (genre, code AddThis)

    -remplacer player.php et embed.php sur votre serveur web par les nouvelles versions.
  • Ok, j'ai repéré un bug que j'ai introduit par mégarde dans la 0.6 :

    Les pages de partage de chanson n'affiche pas uniquement la chanson, mais un peu de tout (ce qui est pas bien).

    J'ai corrigé sur les serveurs en prod, ça sera introduit dans la prochaine release.
  • Salut,

    La 0.7 vient de sortir, elle n'apporte rien de neuf mais corrige le petit bug sur les pages de partage qui était apparu dans la 0.6.

    C'est toujours sur

    http://sourceforge.net/projects/slcncminiplayer/

    C'est toujours libre, c'est toujours gratuit, ça requiert toujours un hébergement web supportant PHP (mais pas besoin de base de donnée), et ça vous permet d'ajouter de la musique à votre site web simplement et rapidement.

    Ça passera sur absolument n'importe quel navigateur de ce siècle, même du début.

    En particulier, ça n'utilise pas Flash, donc ça marchera pour les visiteurs et visiteuse de votre site possédant des périphériques pour lesquels Flash n'est pas disponible (pour autant que je sache, c'est le cas des iPod, iPad, iPhone, ce genre de trucs).

    Le player propose des pages de partage, pour partager un artiste, un album, une chanson. On peut optionnellement ajouter un code copié collé depuis un service genre AddThis pour avoir les boutons Facebook, Twitter et autre.

    Le player supporte les albums multi-artistes (compilations, splits)

    On peut avoir un player pour tout l'audio qu'on a sur son site, pour chaque artiste, pour chaque album, pour chaque chanson. À chaque fois c'est une seule ligne de code que vous aurez à mettre sur votre site, il y a un formulaire pour la générer selon votre sélection musicale.

    Vous pouvez très bien avoir un hébergement PHP pour ce player et intégrer ensuite le code sur un autre site qui n'a pas PHP, par exemple un blog hébergé sur un service de blogging.

    Si vous avez vraiment besoin d'un player mais que prendre un hébergement est quelque chose que vous ne pouvez ou ne voulez faire, vous pouvez me contacter pour que j'héberge votre audio chez moi, si vous n'avez pas des milliers d'écoute quotidiennes, c'est gérable, et vous pourrez intégrer le player sur n'importe quel site ou blog.

    Le player permet aussi à vos auditeurs d'intégrer votre musique sur leur propre site ou blog en quelques clics.

    Parmi les trucs que j'envisage plus ou moins d'ajouter - n'hésitez pas à me contacter pour toute demande de fontionnalité, à la base ce player a été codé suite à une requète d'un musicien qu'on peut trouver sur Dogma :

    -gestion d'un historique des écoutes, pour que chaque fois que l'on clique sur "plus de morceaux", ça ne propose que des nouveaux pas encore écoutés.

    -mode "lecture continue"

    -gestion du téléchargement des morceaux, avec possibilité d'avoir ou non les liens téléchargement, globalement, artiste par artiste, album par album ou morceau par morceau.

    -peut-être, gestion d'un module e-commerce, aussi activable/désactivable artiste par artiste, album par album ou chanson par chanson, avec en plus la possibilité d'activer ou de désactiver la vente en ligne format par format (exemple : je vends mes flacs, je donne mes mp3s)

    -pourquoi pas, gestion des kits de remix

    La procédure d'intallation du player sur votre hébergement est simplissime, une bibliothèque libre a télécharger, une ligne de configuration à éditer, on mets les fichiers sur le serveur web et c'est prêt à recevoir l'audio.

    Notez que plusieurs fournisseurs d'accès internet incluent un hébergement supportant PHP tout à fait convenable pour ce player avec leur abonnement ADSL.

    Merci à ceux et celles qui l'ont déjà téléchargé.

    Un exemple d'intégration un peu chiadé : http://nicolaschartoire.com
    Un exemple d'intégration basique : http://meinthebath.com

    Télécharger Slcnc Mini Player pour l'installer sur votre site web :

    http://sourceforge.net/projects/slcncminiplayer/
  • Salut,

    Slcnc Mini Player a été intégré à Dagloo, le CMS sous GPL de site de musique, dont les sources ne sont pas encore en ligne mais disponible sur demande par email.

    http://clewn.org est un service en ligne non-commercial opérant Dagloo, donc en allant poster vos morceaux sur Clewn.org vous pouvez ensuite les intégrer sur votre site web en utilisant le player.

    Le seul inconvénient est que pour le moment il n'y a pas de gestion de compte, donc pour éventuellement effacer un morceau plus tard, il faut contacter l'équipe de Clewn, c'est à dire moi.

    Clewn propose aussi des critiques par album, artiste, ou morceau, des "pages" un peu à la Facebook ou Google+ en beaucoup plus basique, et (bientôt) des communautés en ligne avec widget intégrable sur votre site web pour que les gens puissent laisser un petit message quand ils débarquent sur votre site.

    Les critiques sont gérées par le player intégrable, aussi les gens peuvent poster des critiques sur vos morceaux directement depuis votre propre site web si vous avez intégré le player dessus.

    C'est probable que le développement de Slcnc Mini Player sera plus ou moins freezé et que le dev se concentrera sur la version du player dispo via Dagloo. Déployer Dagloo sur un serveur se fait presque aussi rapidement que déployer Slcnc Mini, si vous voulez héberger le truc par vous-même : il n'y a pas de base de données.

    En particulier, j'ai repéré un bug dans la dernière version en date de Slcnc Mini Player, bug qui empèche de streamer sur les browser HTML5/MP3 (safari en particulier) ; pour le corriger, il faut bouger un tag ouvrant <audio> qui s'est retrouvé par mégarde après le tag <source> qu'il est censé encadrer. Le bug est corrigé sur la version intégrée à Dagloo.

    Aussi, http://clewn.org passe par un hébergement payant, donc le player là-bas est beaucoup plus rapide que sur mon serveur auto-hébergé, si vous voulez voir une petite démo...

    Bonne soirée,

    Nico

Ajouter un commentaire

GrasItaliqueBarréListe ordonnéeListe non ordonnée
Emoji
Image
Aligner à gaucheCentrer le texteAligner à droiteBasculer en code HTMLBasculer en mode plein écranAllumer les lumières
Déplacer image/fichier