En poursuivant votre visite de ce site, vous acceptez l'utilisation de cookies pour permettre ses différents services. Voir les Mentions légales.
 
 
 
Vous êtes ici :   Accueil » Un Audio Player simple intégré
 
 
 
    Imprimer la page...
    Imprimer la section...

Un Audio Player simple intégré

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 les marges entre le titre et le lecteur et entre le lecteur et la playlist, très variables suivant le navigateur...).

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:50px auto 0px; /*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="https://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 20434 fois


Réactions à cet article


Réaction n°2 

par AlexR le 10/12/2020 @ 00:43

Bonjour Jean-Denis.

Et merci pour ta réponse rapide ;)

En fait j'ai du mal m'expliquer.   Le script qui génère le fichier XML avec dedans la playlist au format demandé par "Audio player simple", je l'ai.   En effet, j'ai réussi à adapter le script qu'il y avait sur l'ancien système que j'utilisait.

Ce que je ne sais pas faire, c'est de modifier "AudioPlayersimple.html" afin qu'au lieu d'une playlist qu'on aurait édité manuellement dans "AudioPlayersimple.html" , il aille lire le fichier XML que j'ai créé.

En effet ce n'est pas très long à faire manuellement (sauf si il y à beaucoup de fichiers), mais je ne l'utilise pas pour faire une playlist que je ne change qu'une fois par mois, voir par an;   Je l'utilise plusieurs fois par jour pour mettre à disposition de mes clients plusieurs fichiers en écoute.     Et comme ce n'est en plus pas toujours moi qui le fait, mais aussi des personnes qui sont beaucoup moins à l'aise que moi dans le domaine, je voulais que ca reste le plus simple possible. (Comme sur mon ancien système en flash, ou il nous suffisait d'uploader les fichiers MP3, et de cliquer sur un lien pour générer ou mettre à jour la playlist).

Merci en tout cas pour ton aide et à bientôt.

Alex


Bonjour Alex,

Si si, il me semble que j'avais à peu près compris... sauf effectivement que le script que tu évoques générait le format demandé pour Audio player simple :

<div id="playlist">
<ul>
<li><a href="...">...<artiste>...</artiste></a></li>
<li><a href="...">...<artiste>...</artiste></a></li>
<li><a href="...">...<artiste>...</artiste></a></li>
...
</ul>
</div>

Je ne sais pas si c'est adaptable à la situation, mais il me semble qu'une possibilité serait d'utiliser un fichier indépendant non plus en .html mais en .php (le rendant ainsi dynamique et lui permettant d'utiliser la fonction include (elle permet d'insérer un bout de code .html dans un autre)

C'est ce que j'ai fait pour ce site (sous adHoc, mais le principe était déjà là sous guppy) : https://www.lacompagniedeselles.fr/

avec la bannière en haut à droite et le mini-diaporama en bas à droite qui changent à chaque changement de page.

Si tu le souhaites, tu peux m'envoyer ton script, m'expliquer comment tu l'utilises... et je regarderai si je peux en faire quelque chose... (je ne te promets rien, évidemment...)

Note bien que l'Audio player simple serait utilisé alors dans un Iframe et  non plus directement dans le code source d'un article de guppy (il serait peut-être possible de le faire, mais je n'ai jamais essayé...)

Cordialement,

Jean-Denis


Réaction n°1 

par AlexR le 09/12/2020 @ 05:06

Bonjour,

Super ce player avec playlist !!!

Avant j'utilisait celui-ci  (Player Flash)  pour générer rapidement des players avec une playlist. Mais comme le flash deviens obsolète, il me faut changer...

Ce que mon ancien player avait de bien, c'est qu'il scannait le dossier ou je mettait les MP3, et avec ça il créait automatiquement la playlist  (un fichier XML) qui était automatiquement reprise et lue par le player.  Ce qui étais pratique pour moi qui en crée très souvent.

J'ai réussi à récupérer le composant qui crée le XML et l'adapter pour qu'il génère son contenu au format ce qu'a besoin AudioPlayerSimple, a savoir :

      (

Titre morceau 2         Titre morceau 3         Titre morceau 4         Titre morceau 5

...Mais je ne sais pas comment dire à AudioPlayerSimple d'aller lire le XML ainsi crée.

Si quelqu'un peut m'aider.

D'avance Merci


Bonjour AlexR,

Merci de ta réaction. Je crains hélas de ne pas être capable de créer cet outil... cry

Cela doit être possible avec un script javascript, mais ce n'est pas à ma portée...

Mais la création d'une playlist avec le code html prend 2 ou 3 minutes grand maximum...

Je l'ai habillé un peu différemment en ajoutant et simplifiant le code pour les "artistes" pour le CMS adHoc que j'ai rejoint :

https://adhoc.71site.fr/pages/036-audio-players-un-audio-player-simple-integre-fr.php

Cordialement,

Jean-Denis