• 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 simple intégré
 
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 simple, avec playlist !
très simple, responsive design, intégré directement dans un article, une boite libre de GuppY.

(une version .html dans un Iframe peut permettre de l'installer ailleurs aussi -voir plus bas dans l'article-)

L'origine de cet audio player est multiple, sur différents sites, il est difficile d'en créditer un auteur en particulier. Une recherche rapide sur le Web, peut donner beaucoup de sources d'inspiration et notamment ici pour l'essentiel.

L'aspect de la playlist peut être réglé assez facilement, mais le lecteur lui même est "classique" et dépend du navigateur utilisé. Il faut donc tester ensuite le rendu (en particulier pour la marge entre le titre et le lecteur).

Musiques, libres de droits, issues de Dogmazic

 

Ci-dessous, la partie <style></style> et la partie <script></script> à placer dans le code source, au début de l'article ou de la boite libre (éventuellement la partie surlignée en violet de <style></style> peut être placée dans le fichier styleplus de la skin). Ces parties sont commentées le plus possible pour vous aider à les adapter.

<style type="text/css">
#playlist,audio{ /*attribut de la playlist et du lecteur*/
    width: 90%; /*largeur en % pour être responsive, mais peut être en pixels*/
    padding:5px 0px;
}
audio { /*marge extérieure haute du lecteur*/
    margin-top:20px;
}
#playlist{    /*attribut de la playlist*/
    margin:0px auto; /*marges extérieures, auto pour centrer horizontalement*/
    background: linear-gradient(rgba( 230, 230, 230, 0.5), rgba( 180, 180, 180, 0.5)); /*couleur de fond*/
    border: solid 2px #197793; /*bordure : épaisseur-nature-couleur*/
    border-radius: 10px; /*arrondis*/
}
h1 { /*attributs titre*/
    font-size: 16px; /*taille police*/
    font-weight:bold; /*gras police : normal ou bold*/
    width: 90%; /*largeur en % pour être responsive, mais peut être en pixels*/
    margin:5px auto 10px; /*marges extérieures, auto pour centrer horizontalement*/
    color: #FFFFFF;    /*couleur du texte*/
    border-radius: 10px; /*arrondis*/
    padding: 5px; /*marges intérieures*/
    background: linear-gradient(rgba( 29, 41, 41, 1.0), rgba( 25, 119, 147, 1.0)); /*couleur de fond*/
}
h1 a, h1 a:hover { /*attributs liens et liens survolés du titre*/
    font-weight:bold; /*gras police : normal ou bold*/
    color: #CA7C3A; /*couleur du texte*/
    background:none; /*pas de fond*/
}
#playlist ul { /*attribut de la liste*/
  list-style:none; /*pas de puce*/
  margin:0; /*marges extérieures*/
  padding:0; /*marges intérieures*/
  }
#playlist .active a { /*attributs de la plage active*/
    text-decoration: none;
    color:#7B1E00; /*couleur du texte*/
    background: #95D7E8; /*couleur de fond*/
    border-radius: 4px; /*arrondis*/
}
#playlist li { /*attributs éléments liste*/
    border-bottom: 1px solid #7B1E00; /*bordure basse : épaisseur-nature-couleur*/
}
#playlist li:last-child { /*attributs dernier élément liste*/
    border:none; /*pas de bordure*/
}
#playlist li a{ /*attributs des plages*/
    color:#197793; /*couleur du texte*/
    padding: 3px; /*marges intérieures*/
    display: block;
}
#playlist li a:hover{ /*attributs des plages survolées*/
    color:#7B1E00; /*couleur du texte*/
    text-decoration: none;
}
div.center { /*centrage (de la playlist et du lecteur)*/
    text-align: center;
}
</style>

<!-- PARTIE SCRIPT : NE PAS MODIFIER
sauf volume initial .1 .2 .3 .4 etc...   -->
<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){
var audio;
var playlist;
var tracks;
var current;

init();
function init(){
    current = 0;
    audio = $('audio');
    playlist = $('#playlist');
    tracks = playlist.find('li a');
    len = tracks.length;
    audio[0].volume = .3; // mettre le volume initial
    playlist.find('a').click(function(e){
        e.preventDefault();
        link = $(this);
        current = link.parent().index();
        run(link, audio[0]);
    });
    audio[0].addEventListener('ended',function(e){
        current++;
        if(current == len){
            current = 0;
            link = playlist.find('a')[0];
        }else{
            link = playlist.find('a')[current];    
        }
        run($(link),audio[0]);
    });
}
function run(link, player){
        player.src = link.attr('href');
        par = link.parent();
        par.addClass('active').siblings().removeClass('active');
        audio[0].load();
        audio[0].play();
}
});//]]>
</script>

Ci-dessous, la partie du code qui permet les appels aux fichiers musicaux, à placer où vous le souhaitez dans l'article. Il faut bien sûr adapter les liens, et ensuite, il est tout à fait possible de personnaliser directement dans l'éditeur de GuppY l'écriture des titres. Notez que le premier item à une classe particulière : c'est le premier sélectionné... Mais ce n'est pas une obligation (car le player ne démarre pas automatiquement), et on peut en cliquant démarrer n'importe quel morceau, la playlist se déroulera ensuite à partir de ce morceau et tourne en boucle.

<div class="center">
    <h1>Musiques, libres de droits, issues de <a href="http://www.dogmazic.net/" target="_blank"><em>Dogmazic</em></a></h1>
&nbsp;

    <audio controls="" id="audio" preload="auto" tabindex="0" type="audio/mpeg">Désolé, votre navigateur ne supporte pas HTML5 audio.</audio>
</div>

<div id="playlist">
    <ul>
        <li class="active"><a href="file/List/Que_sommes_nous_en_train_de_faire.mp3">Que sommes nous en train de faire <span style="color:#ff0000;"><em>-[Dogbreath]-</em></span></a></li>
        <li><a href="file/List/Suonos_fur_monkey_s_corones.mp3">Suonos für monkey's corones <span style="color:#ff0000;"><em>-[Dogbreath]-</em></span></a></li>
        <li><a href="file/List/La_grande_peste_de_1348.mp3">La grande peste de 1348 <span style="color:#ff0000;"><em>-Phat-</em></span></a></li>
        <li><a href="file/List/What_cool.mp3">What cool <span style="color:#ff0000;"><em>-Tom la mèche-</em></span></a></li>
        <li><a href="file/List/Jazz_urban.mp3">Jazz urban <span style="color:#ff0000;"><em>-Les Oreilles en ballades-</em></span></a></li>
    </ul>
</div>

Ci-dessous, la structure de cette partie du code à copier-coller et adapter, bien sûr ! Et en cas de liste plus longue ou plus courte, ajoutez ou supprimez une partie <li></li>

<div class="center">
    <h1>
MES MUSIQUES</h1>
&nbsp;

    <audio controls="" id="audio" preload="auto" tabindex="0" type="audio/mpeg">Désolé, votre navigateur ne supporte pas HTML5 audio.</audio>
</div>

<div id="playlist">
    <ul>
        <li class="active"><a href="
file/Mes_musiques/morceau01.mp3">Titre morceau 1</a></li>
        <li><a href="
file/Mes_musiques/morceau02.mp3">Titre morceau 2</a></li>
        <li><a href="
file/Mes_musiques/morceau03.mp3">Titre morceau 3</a></li>
        <li><a href="
file/Mes_musiques/morceau04.mp3">Titre morceau 4</a></li>
        <li><a href="
file/Mes_musiques/morceau05.mp3">Titre morceau 5</a></li>
    </ul>
</div>

Une version .html intégrable dans un Iframe est également possible. Un zip est téléchargeable ici.

Ce zip contient un fichier AudioPlayersimple.html et un dossier APSjs qui contient le fichier jquery-2.4.4.js. Le fichier AudioPlayersimple.html contient les mêmes informations que ci-dessus et se règle de la même manière.

Pour créer votre propre AudioPlayersimple, vous pouvez enregistrer ce fichier sous un nouveau nom, et l'adapter, notamment pour les chemins des morceaux musicaux, l'important est de laisser ce (ces) fichier(s) au même niveau que le dossier APSjs et son contenu.

Ci-dessous, le contenu du fichier AudioPlayersimple.html pour information.

Pour toute question ou aide pour utiliser ce dispositif, postez sur le forum de ce site.


Date de création : 31/12/2016 @ 07:07
Catégorie : Astuces - Audio Player
Page lue 783 fois


Réactions à cet article

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

Vous êtes ici :   Accueil » Un Audio Player simple intégré
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.
BHmf6
Recopier le code :
11 Abonnés