• Sur ce site, vous trouverez :
    Camera ! Évidemment...

    ...mais aussi des carousels : WaterwheelCarousel par exemple...

  • ... des informations sur les iFrames responsives

    Une solution élégante pour rendre les iFrames (cadres, dans lesquels on intègre d'autres pages) "responsive design" : Ils s'adapteront automatiquement et de manière proportionnelle à la dimension de la page.

    Lisez le tutoriel

    Lisez également ce tutoriel

    pour créer un bandeau "responsive design", constitué de cellules indépendantes, au contenu varié, à placer en haut, en bas, dans la boite édito, dans un article...de votre site.

  • ...un Audio Player dans un Iframe... ...et un autre intégré dans Guppy

  • ...des images qui changent au survol de la souris... ...par exemple :

    ...mais bien d'autres effets à découvrir, notamment celui que vous êtes en train d'utiliser...

  • ...et bien sûr des skins pour habiller vos sites GuppY V5...la série "Transparences" avec ici FeatureCarousel

  • Camera

    Camera

    ¤ Camera est un slider développé par Manuel Masia. On peut l'utiliser très facilement dans GuppY.

    Dans ses différentes options possibles, on peut faire varier les transitions, les apparitions de titres, les vignettes de pagination. Camera peut même intégrer des vidéos !

    Sur ce site quelques tutoriels pour mieux maitriser Camera.

    Informations Camera

    ¤ Deux carousels de Brian Osborne sont disponibles lisez les tutoriels dédiés : WaterwheelCarousel et FeatureCarousel.

  • iFrames

    iFrames responsives

    Une solution élégante pour rendre les iFrames (cadres, dans lesquels on intègre d'autres pages) "responsive design" : Ils s'adapteront automatiquement et de manière proportionnelle à la dimension de la page.

    Lisez le tutoriel

    Lisez également ce tutoriel

    pour créer un bandeau "responsive design", constitué de cellules indépendantes, au contenu varié, à placer en haut, en bas, dans la boite édito, dans un article...de votre site.

  • Audio-Players

    Audio-Players

    ¤ Un Audio-player à mettre en place dans un iFrame. Il affiche les pochettes d'album des morceaux qui sont joués. Léger et "customisable", quelques skins en téléchargement lui sont destinées. Il peut être amélioré ! Adeptes du Javascript... à vos claviers ! wink

    Lisez le tutoriel

    ¤ Un deuxième Audio-player simple avec playlist également peut être intégré directement dans GuppY.

    Lisez le tutoriel

  • Effets au survol

    Effets au survol

    Des astuces amusantes, surtout en CSS, pour agrémenter les sites.

    Au survol de la souris : des images qui changent, qui pivotent et font apparaitre un nouveau contenu, les boutons déroulants offrant de nouvelles informations, une boîte-menu déroulante (celle-là même que vous utilisez)... et d'autres, à venir, sans doute.

    La possibilité aussi de personnaliser des infobulles dans une image mappée cliquable générée par Gimp (traitement d'image libre et gratuit). Lisez le tutoriel

    Des liens vers des tutoriels sont disponibles dans le menu "Astuces>Changements au survol"

  • Skins

    Skins pour GuppY V5

    Quelques skins sont disponibles en téléchargement pour habiller les sites GuppY. Elles sont toutes compatibles "Config Look" et adaptées à la dernière version (GuppY 5.01.07 et +). Elles peuvent être testées sur Démo-skins.

    Démo-skins

    Zone de téléchargement

    FAQ (voir pour les skins version 5.02.00)

 
Vous êtes ici :   Accueil » Un Audio Player dans un Iframe
 
Prévisualiser...  Imprimer...  Imprimer la page...
Prévisualiser...  Imprimer...  Imprimer la section...
Recherche
 
Fermer
Calendrier

imasso.gif

rss Cet article est disponible en format standard RSS pour publication sur votre site web :
http://www.71site.fr/data/fr-articles.xml

Un Audio Player (léger) dans un Iframe

L'origine de ce player est là : https://www.script-tutorials.com/html5-audio-player-with-playlist/

et j'en remercie Andrey son auteur...

Je n'ai pas (encore ?) réussi à l'intéger au coeur de GuppY. Mais en l'état, il peut être mis en place dans un Iframe facilement (voir en bas de cet article). Cela peut être utile pour l'utiliser dans GuppY V5 bien sûr mais également dans une version ancienne de GuppY, ou un autre CMS, ou encore dans un site en pur html...

Ci-dessous le contenu du zip Audioplayer.zip à télécharger.

arbor-APiframe.jpg

Le dossier css contient le fichier audioplayer.css et le dossier images

Le dossier js contient 3 fichiers (audioplayer.js), (jquery-1.7.2.min.js), (jquery-ui-1.8.21.custom.min.js)

On peut le décompresser, le placer par exemple dans le dossier file de GuppY ou ailleurs mais il faut placer ensuite ses propres dossiers musiques au même niveau que List (qui contient les musiques et les pochettes) et les fichiers .html que vous allez créer au même niveau que AudioPlayer.html

Il suffit ensuite d'appeler AudioPlayer.html dans un Iframe.

On peut le tester directement en lançant ce fichier, il s'ouvrira avec votre navigateur par défaut, cela permet de s'assurer qu'il fonctionne avant de le mettre en ligne...

Cet Audio Player n'est pas à proprement parler "responsive design", mais j'ai modifié la taille en largeur : elle est de 300px ce qui lui permet de s'afficher sans problème sur les smartphones de faibles définitions. La longueur de la playlist est en fonction du nombre de morceaux de musique que vous y ajouterez. Il est possible de créer autant d'Audio Player que l'on veut. Dans des Iframes différents il n'y aura pas de conflit.

Au préalable, il faut préparer vos morceaux au format .mp3 et éventuellement des imagettes de pochette au format .jpg .png .gif par exemple de 94x94px. J'ai placé les miens dans le dossier List (il y a dans ce dossier une imagette nommée cover1.png utilisable). Il faut choisir la skin de l'Audio Player, ces skins sont situées dans le dossier AudioPlayer/css/images (vous pouvez en télécharger d'autres sur ce site, en fabriquer à votre convenance : Un logiciel libre et gratuit comme GIMP ou gratuit comme Photofiltre7 peut très bien faire ce travail -personnellement j'utilise Photofiltre le plus souvent-). la "skin" de base est ce sprite ci (spr.png) :

spr.png
 

Paramétrage, modification, "customisation" de l'Audio Player

Les adeptes de javascript pourront peut-être améliorer AudioPlayer/js/audioplayer.js (notamment lui permettre d'enchainer les fichiers de la playlist automatiquement... ce que je ne sais pas faire...rolleyes ... Je suis donc preneur de toute bonne idée !)

Les adeptes du css pourront fouiller dans le fichier Audioplayer/css/audioplayer.css afin de l'habiller encore plus finement.

Pour les autres wink... afin de modifier AudioPLayer.html, il faut l'ouvrir en local avec un éditeur de texte pur (notepad++ par exemple), on trouve différentes lignes de code modifiables assez facilement.

¤ Dans la partie <style> </style>, ci-dessous...

<style>
        .player {    background: transparent url("AudioPlayer/css/images/spr7.png") no-repeat scroll center top; }
        .controls .play, .controls .pause, .controls .rew, .controls .fwd {    background: transparent url("AudioPlayer/css/images/spr7.png") no-repeat scroll 0 0; }
            .controls .play { background-position: -8px -171px;    } /* ne pas modifier : IMPORTANT ! */
            .controls .pause { background-position: -8px -198px; } /* ne pas modifier : IMPORTANT ! */
            .controls .rew { background-position: -54px -171px;    } /* ne pas modifier : IMPORTANT ! */
            .controls .fwd { background-position: -100px -171px; } /* ne pas modifier : IMPORTANT ! */
        .ui-slider-range {  background: transparent url("AudioPlayer/css/images/spr7.png") no-repeat scroll 5px -222px; }
        .volume .ui-slider-handle {  background: url("AudioPlayer/css/images/spr7.png") no-repeat scroll -201px -188px rgba(0, 0, 0, 0); }
        .title {  color: #FFFFFF; font-size: 11px; font-weight: bold; } /* Attributs titre actif en haut */
        .artist {  color: #DED35F;  font-size: 11px; } /* Attributs artiste en haut */        
        .playlist { background-color: #AF3806; background: linear-gradient( #AF3806, #B54707); } /* Attributs fond playlist en bas */
        .playlist li {   color: #DDDDDD; font-size: 12px; } /* Attributs titres en bas */
        .playlist li.active {   color: #FFFFFF;  font-weight: bold; } /* Attributs titre actif en bas */    
</style>

... on peut remplacer 4 fois spr7 par le sprite que vous avez choisi (ou fabriqué !), on peut modifier les attributs (police, taille, couleur) des différents titres. J'ai commenté les 4 lignes concernées .title .artist .playlist li .playlist li.active. Pour le fond de la playlist, si vous utilisez une skin avec une image, il suffit de l'appeler dans la règle .playlist ainsi :

.playlist {    background: transparent url("AudioPlayer/css/images/fond-bois.jpg") no-repeat scroll center top; width: 294px; border : 1px solid #000000; }

¤ Dans la partie <body><ul> </ul></body>, ci-dessous...

<ul class="playlist visible">
    <li data-audiourl="List/Que_sommes_nous_en_train_de_faire.mp3" data-cover="List/LaMarge.jpg" data-artist="[Dogbreath]">Que sommes nous en train de faire ?</li>
    <li data-audiourl="List/Suonos_fur_monkey_s_corones.mp3" data-cover="List/Suonos.jpg" data-artist="[Dogbreath]">Suonos für monkey's corones</li>
    <li data-audiourl="List/La_grande_peste_de_1348.mp3" data-cover="List/LaGrandePeste.jpg" data-artist="Phat">La grande peste de 1348</li>
    <li data-audiourl="List/What_cool.mp3" data-cover="List/Voyageur.jpg" data-artist="Tom la mèche">What cool</li>
    <li data-audiourl="List/Jazz_urban.mp3" data-cover="List/Sandwich.jpg" data-artist="Les Oreilles en ballades">Jazz urban</li>
</ul>

... on écrit, comme sur le modèle dans la balise <li> le chemin et le nom du fichier du morceau de musique : data-audiourl, le chemin et le nom de l'éventuelle imagette de la pochette : data-cover, le nom de l'artiste : data-artist et entre les balises <li> </li> le nom du morceau de musique.

Rappel : les noms de fichiers ne doivent pas avoir d'accents, mais pour les noms des artistes et des morceaux il n'y a pas de souci.


Il faut laisser le dossier AudioPlayer à sa place, c'est celui qui contient les fichiers javascripts et css (y compris les skins d'Audio Player).


Pour créer d'autres Audio Players :

¤ créer d'autres dossiers musiques (et éventuellement de pochettes) au même niveau que List

¤ dupliquer le fichier AudioPlayer.html en lui donnant un autre nom

¤ l'aménager en le laissant lui aussi au même niveau pour ne pas rompre les liens...

¤ l'intégrer dans un iframe dans un article, une boite libre...
 

Voilà, ci-dessous le code .html de AudioPlayer.html.

Et ci dessous l'iframe tout à fait "basique", mis en place avec CKEditor dans GuppY, qui le contient :

Pour plus d'informations et/ou d'aides pour installer ces dispositifs, contacter le webmestre de ce site.


Date de création : 17/02/2016 @ 06:56
Catégorie : Astuces - Audio Player
Page lue 3305 fois


Réactions à cet article

Personne n'a encore laissé de commentaire.
Soyez donc le premier !

Vous êtes ici :   Accueil » Un Audio Player dans un Iframe
Préférences

Se reconnecter :
Votre nom (ou pseudo) :
Votre mot de passe


  Nombre de membres 35 membres
Connectés :
( personne )
Snif !!!
Lettre d'information
Pour avoir des nouvelles de ce site, inscrivez-vous à notre Newsletter.
x5B9M
Recopier le code :
11 Abonnés