Lecteur audio personnalisable
Salut !
Voici un LS d'un lecteur audio qui a été fait pour la demande de Mimio.
Le lecteur a un bouton Play/Pause ainsi qu'un bouton Repeat pour écouter une chanson en boucle.
Vous pouvez modifier le volume du lecteur (survolez l'icône du volume).
Le lecteur indique la progression de la chanson sous forme numérique (0:00) et sous forme barre de progression.
La barre de progression de la musique peut être déplacée pour avancer/reculer la chanson.
Il est possible de naviguer entre les chansons de la liste en cliquant sur le titre des chansons.
Le lecteur passe automatiquement à la prochaine chanson lorsqu'une chanson est terminée.
Lorsque la liste des chansons est terminée, cela recommence automatiquement au début.
Voilà l'aperçu :
Voilà l'aperçu de la version claire :
Voilà l'aperçu de la version sombre :
À noter que le rendu peut être différent selon les différents navigateurs.
Ce code est en trois parties.
- Tout d'abord, nous allons mettre le lecteur audio dans une page html.
- Ensuite, nous allons voir comment mettre des chansons dans le lecteur audio.
- Enfin, nous allons mettre placer le lecteur audio dans un iframe pour pouvoir le placer où on veut.
Mettre un crédit vers Never-Utopia est obligatoire si vous utilisez ce LS.
1. Lecteur audio (Page HTML)
Pour commencer, nous allons créer une page HTML dans laquelle nous allons mettre le code de notre lecteur audio.
Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > MODULES
> > > HTML & JAVASCRIPT
> > > > GESTION DES PAGES HTML
Ensuite, on clique sur le bouton vert "Création en mode avancé (HTML)".
On choisit un titre quelconque.
On coche "Non" aux questions "Voulez-vous utiliser le haut et le bas de page de votre forum ?" et "Utiliser cette page en tant que page d'accueil ?".
On met le code suivant et on enregistre :
- Code:
<!DOCTYPE html>
<html>
<head>
<base target="_blank" />
<meta name="author" content="Onyx" />
<meta charset="UTF-8" />
<title>Lecteur de musique</title>
<style>
body {
margin: 0px;
}
/*Bloc qui contient tout*/
#audiobloc {
width: 300px;
margin: auto;
position: relative;
background: #a3a3a3;
border: 1px solid #858585;
font-size: 14px;
font-family: 'Times New Roman';
}
/*Bloc des commandes du lecteur*/
#audiocommands {
padding: 10px 0px 10px 10px;
text-align: left;
height: 14px;
color: #656565;
}
/*Quand on passe sur les images de commandes*/
#audiocommands img {
cursor: pointer;
}
/*Bouton repeat*/
#audiocommand_loopstart {
opacity: 0.5;
margin-left: 5px;
}
/*Bouton repeat survolé*/
#audiocommand_loopstart:hover {
opacity: 1;
margin-left: 5px;
}
/*Bouton arrêter le repeat*/
#audiocommand_loopstop {
margin-left: 5px;
}
/*Bloc du temps en chiffres*/
#audio_time {
display: inline-block;
margin-left: 5px;
width: 31px;
margin-top: 1px;
text-align: left;
height: 13px;
line-height: 13px;
vertical-align: top;
font-size: 13px;
font-family: 'Times New Roman';
}
/*Espace à gauche de la barre de temps*/
#audiocommand_time {
margin-left: 0px;
}
/*Liste des chansons*/
#musiclist {
max-height: 100px; /*Hauteur maximale de la liste des chansons*/
overflow: auto;
border-bottom: 1px solid #858585;
}
/*Ligne de chaque chanson*/
.music_line {
text-align: left;
padding: 1px 5px 1px 5px;
border-bottom: 1px dotted #858585;
background: #c4c4c4;
color: #757575;
}
.music_line:nth-last-of-type(1) {
border: none;
}
/*Ligne survolée des chansons*/
.music_line:hover {
background: #dfdfdf;
}
/*Titre des chansons*/
.music_song {
cursor: pointer;
}
/*La ligne de la chanson active*/
#current_songline {
background: #dfdfdf;
color: #656565;
}
/*Enlever le style de base de la barre de temps pour mettre notre propre style*/
input[type=range] {
display: inline-block;
vertical-align: top;
-webkit-appearance: none;
width: 175px;
height: 12px;
background: transparent;
padding: 0px;
margin-top: 1px;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-ms-track {
width: 175px;
vertical-align: top;
display: inline-block;
cursor: pointer;
background: transparent;
border-color: transparent;
color: transparent;
padding: 0px;
}
/*Bouton de la barre de temps*/
/*Pour Chrome*/
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: none;
height: 12px;
width: 12px;
margin: -4px;
border-radius: 50%;
background: #757575;
cursor: pointer;
}
/*Pour Firefox*/
input[type=range]::-moz-range-thumb {
-webkit-appearance: none;
border: none;
height: 12px;
width: 12px;
border-radius: 50%;
background: #757575;
font-size: 0px;
cursor: pointer;
}
/*Pour Internet Explorer*/
input[type=range]::-ms-thumb {
-webkit-appearance: none;
border: none;
height: 12px;
width: 12px;
border-radius: 50%;
background: #757575;
cursor: pointer;
}
/*Barre de temps*/
/*Pour Chrome*/
input[type=range]::-webkit-slider-runnable-track {
width: 175px;
height: 4px;
cursor: pointer;
background: #c1c1c1;
border-radius: 2px;
margin: 1px;
}
/*Pour Firefox*/
input[type=range]::-moz-range-track {
width: 175px;
height: 4px;
cursor: pointer;
background: #c1c1c1;
border-radius: 2px;
}
/*Pour Internet Explorer - Toutes la ligne de temps*/
input[type=range]::-ms-track {
width: 175px;
height: 12px;
cursor: pointer;
border-radius: 2px;
border: none;
cursor: pointer;
}
/*Pour Internet Explorer - Partie avant le bouton de la ligne de temps*/
input[type=range]::-ms-fill-lower {
width: 175px;
height: 4px;
cursor: pointer;
background: #c1c1c1;
border-radius: 2px 0px 0px 2px;
border: none;
}
/*Pour Internet Explorer - Partie après le bouton de la ligne de temps*/
input[type=range]::-ms-fill-upper {
width: 175px;
height: 4px;
cursor: pointer;
background: #c1c1c1;
border-radius: 0px 2px 2px 0px;
border: none;
}
/*Bloc volume*/
#audiocommand_volume_bloc {
display: inline-bloc;
margin-left: 5px;
width: 14px;
height: 14px;
position: relative;
}
/*Image volume*/
#audiocommand_volume_bloc img {
width: 14px;
height: 14px;
}
/*Bloc barre volume*/
#audiocommand_volume_rangebloc {
position: absolute;
display: none;
bottom: 51px;
left: -37px;
background: #a3a3a3;
border: 1px solid #858585;
width: 80px;
padding: 3px;
height: 12px;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
/*Apparition barre volume*/
#audiocommand_volume_bloc:hover #audiocommand_volume_rangebloc {
display: block;
}
/*Barre de volume*/
/*Pour Chrome*/
#audiocommand_volume {
width: 80px;
margin: 0px;
}
#audiocommand_volume[type=range]::-webkit-slider-runnable-track {
width: 80px;
}
/*Pour Firefox*/
#audiocommand_volume[type=range]::-moz-range-track {
width: 80px;
}
/*Pour Internet Explorer*/
#audiocommand_volume[type=range]::-ms-track {
width: 80px;
}
/*Pour Internet Explorer - Partie avant le bouton*/
#audiocommand_volume[type=range]::-ms-fill-lower {
width: 80px;
}
/*Pour Internet Explorer - Partie après le bouton*/
#audiocommand_volume[type=range]::-ms-fill-upper {
width: 80px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script type="text/javascript">
//<!--
/*Faire fonctionner le lecteur audio*/
function playsong() {
$('#lecteuraudio').trigger('play');
$('#audiocommand_play').css('display', 'none');
$('#audiocommand_pause').css('display', 'inline-block');
}
/*Mettre le lecteur audio sur pause*/
function pausesong() {
$('#lecteuraudio').trigger('pause');
$('#audiocommand_pause').css('display', 'none');
$('#audiocommand_play').css('display', 'inline-block');
}
/*Mettre la chanson du lecteur audio en repeat*/
function loopsongstart() {
$('#lecteuraudio').attr('loop', 'loop');
$('#audiocommand_loopstart').css('display', 'none');
$('#audiocommand_loopstop').css('display', 'inline-block');
}
/*Enlever le repeat de la chanson du lecteur*/
function loopsongstop() {
$('#lecteuraudio').removeAttr('loop');
$('#audiocommand_loopstop').css('display', 'none');
$('#audiocommand_loopstart').css('display', 'inline-block');
}
/*Passer à la chanson suivante*/
function nextsong() {
var src_music;
var name_music;
var next_song;
var lecteur = $('#lecteuraudio');
next_song = $('#current_song').parent().next().find('.music_song:first');
if (next_song.length != 1) {
next_song = $('.music_song:eq(0)');
}
$('#current_song').removeAttr('id');
$('#current_songline').removeAttr('id');
next_song.attr('id', 'current_song');
next_song.parent().attr('id', 'current_songline');
src_music = next_song.attr('data-music-src');
lecteur.attr('src', src_music);
lecteur.attr('autoplay', 'autoplay');
lecteur.load();
$('#audiocommand_time').attr('max', $('#lecteuraudio')[0].duration);
}
/*Changer de musique au click + Barre de temps*/
$(function(){
var lecteur = $('#lecteuraudio');
var src_music;
var next_song;
/*Changer de musique au click*/
$('.music_song').click(function(){
src_music = $(this).attr('data-music-src');
$('#current_song').removeAttr('id');
$('#current_songline').removeAttr('id');
$(this).attr('id', 'current_song');
$(this).parent().attr('id', 'current_songline');
lecteur.attr('src', src_music);
lecteur.attr('autoplay', 'autoplay');
$('#audiocommand_play').css('display', 'none');
$('#audiocommand_pause').css('display', 'inline-block');
lecteur.load();
$('#audiocommand_time').attr('max', $('#lecteuraudio')[0].duration);
});
/*Mettre le volume à la valeur choisie*/
$('#lecteuraudio')[0].volume = $('#audiocommand_volume').val()/10;
/*Changer le volume*/
$('#audiocommand_volume').on('change', function() {
$('#lecteuraudio')[0].volume = $('#audiocommand_volume').val()/10;
});
/*Au changement de volume - changement icône*/
$('#lecteuraudio').on('volumechange', function(){
if ($('#lecteuraudio')[0].volume*10 > 7) {
$('#audiocommand_volume_full').css('display', 'inline-block');
$('#audiocommand_volume_middle').css('display', 'none');
$('#audiocommand_volume_low').css('display', 'none');
$('#audiocommand_volume_off').css('display', 'none');
}
else if ($('#lecteuraudio')[0].volume*10 > 3) {
$('#audiocommand_volume_full').css('display', 'none');
$('#audiocommand_volume_middle').css('display', 'inline-block');
$('#audiocommand_volume_low').css('display', 'none');
$('#audiocommand_volume_off').css('display', 'none');
}
else if ($('#lecteuraudio')[0].volume*10 > 0) {
$('#audiocommand_volume_full').css('display', 'none');
$('#audiocommand_volume_middle').css('display', 'none');
$('#audiocommand_volume_low').css('display', 'inline-block');
$('#audiocommand_volume_off').css('display', 'none');
}
else {
$('#audiocommand_volume_full').css('display', 'none');
$('#audiocommand_volume_middle').css('display', 'none');
$('#audiocommand_volume_low').css('display', 'none');
$('#audiocommand_volume_off').css('display', 'inline-block');
}
});
/*Mettre la durée totale de la chanson sur la barre de temps*/
$('#lecteuraudio').on('loadedmetadata', function() {
$('#audiocommand_time').attr('max', $('#lecteuraudio')[0].duration);
});
/*Changer la position de la chanson quand on bouge le pointeur de la ligne de temps*/
$('#audiocommand_time').on('change', function() {
$('#lecteuraudio')[0].currentTime = $('#audiocommand_time').val();
$('#audiocommand_time').attr('max', $('#lecteuraudio')[0].duration);
});
/*Faire avancer la barre de temps*/
$('#lecteuraudio').on('timeupdate', function(){
var curtime = parseInt($('#lecteuraudio')[0].currentTime, 10);
$('#audiocommand_time').val(curtime);
$('#audio_time').html(formatTime(curtime));
function formatTime(seconds) {
minutes = Math.floor(seconds / 60);
seconds = Math.floor(seconds % 60);
seconds = (seconds >= 10) ? seconds : "0" + seconds;
return minutes + ":" + seconds;
}
});
});
//-->
</script>
</head>
<body>
<div id="audiobloc">
<div id="musiclist">
<!-- DÉBUT DE TOUTES LES CHANSONS -->
<!-- CHANSON 1 -->
<div class="music_line" id="current_songline">
<span data-music-src="URL DE LA CHANSON (EN FORMAT MP3)" class="music_song" id="current_song">
0:00 - TITRE DE LA CHANSON
</span>
</div>
<!-- FIN CHANSON 1 -->
<!-- CHANSON XXX -->
<div class="music_line">
<span data-music-src="URL DE LA CHANSON (EN FORMAT MP3)" class="music_song">
0:00 - TITRE DE LA CHANSON
</span>
</div>
<!-- FIN CHANSON XXX -->
<!-- FIN DE TOUTES LES CHANSONS -->
</div>
<!-- COMMANDES DU LECTEUR AUDIO -->
<div id="audiocommands">
<!-- COMMANDE PLAY -->
<span onclick="playsong()" id="audiocommand_play"><img src="http://www.aht.li/3055457/Play_Gris.png" alt="Play" /></span>
<!-- COMMANDE PAUSE -->
<span onclick="pausesong()" id="audiocommand_pause" style="display: none;"><img src="http://www.aht.li/3055456/Pause_gris.png" alt="Pause" /></span>
<!-- TEMPS DE LA CHANSON -->
<span id="audio_time">0:00</span>
<!-- BARRE DE PROGRESSION DE LA CHANSON -->
<input type="range" id="audiocommand_time" value="0" max=""></input>
<!-- COMMANDE VOLUME -->
<span id="audiocommand_volume_bloc">
<img id="audiocommand_volume_full" src="http://www.aht.li/3055459/Volume_Max_Gris.png" alt="Volume Maxumum" />
<img id="audiocommand_volume_middle" src="http://www.aht.li/3055460/Volume_Middle_Gris.png" alt="Volume Middle" style="display: none;" />
<img id="audiocommand_volume_low" src="http://www.aht.li/3055458/Volume_Low_Gris.png" alt="Volume Minimum" style="display: none;" />
<img id="audiocommand_volume_off" src="http://www.aht.li/3055461/Volume_No_gris.png" alt="Volume Off" style="display: none;" />
<span id="audiocommand_volume_rangebloc">
<input type="range" id="audiocommand_volume" value="10" max="10"></input>
</span>
</span>
<!-- COMMANDE RÉPÉTER LA CHANSON -->
<span onclick="loopsongstart()" id="audiocommand_loopstart"><img src="http://www.aht.li/3055455/Loop_gris.png" alt="Repeat" /></span>
<!-- COMMANDE ARRÊTER DE RÉPÉTER LA CHANSON -->
<span onclick="loopsongstop()" id="audiocommand_loopstop" style="display: none;"><img src="http://www.aht.li/3055455/Loop_gris.png" alt="No Repeat" /></span>
</div>
<!-- FIN COMMANDES DU LECTEUR AUDIO -->
<!-- LECTEUR AUDIO -->
<audio id="lecteuraudio" preload="none" onended="nextsong()" src="URL DE LA PREMIÈRE CHANSON">
Votre navigateur ne supporte pas ce lecteur audio.
</audio>
<!-- FIN LECTEUR AUDIO -->
</div>
</body>
</html>
Lorsque vous modifiez votre lecteur audio, il faut cliquer sur le triple engrenage (
), pas l'engrenage normal. Sinon, cela va se déformer d'une façon très très horrible.
), pas l'engrenage normal. Sinon, cela va se déformer d'une façon très très horrible.Si vous le souhaitez, vous pouvez modifier l'apparence de toutes les parties du lecteur. J'ai annoté le CSS, alors je vais vous laissez travailler dessus pour essayer d'arriver à un résultat qui vous convient ^^
Sinon, vous pouvez également utiliser une des deux autres versions déjà faites (version claire et version sombre) qui sont dans le 2e post.
2. Comment mettre des chansons dans le lecteur audio
Un lecteur audio sans musique ne sert pas à grand chose, vous serez sûrement d'accord. Du coup, nous allons voir comment ajouter des chansons.
Important : Les chansons ajoutées doivent absolument être au format MP3, donc elles doivent avoir l'extention ".mp3" à la fin.
La première étape est d'héberger les chansons sur le web. Pour cela, vous pouvez utiliser un hébergeur quelconque. Personnellement, j'utilise Archive-Host qui a une option gratuite pour les particuliers.
Bref, vous vous rendez sur l'hébergeur de votre choix et vous hébergez votre chanson. Puis, vous prenez le lien direct et vous allez le mettre dans le lecteur audio.
Pour cela, il vous suffit de retrouver ce bout de code :
- Code:
<!-- CHANSON XXX -->
<div class="music_line">
<span data-music-src="URL DE LA CHANSON (EN FORMAT MP3)" class="music_song">
0:00 - TITRE DE LA CHANSON
</span>
</div>
<!-- FIN CHANSON XXX -->
Et de mettre le lien de votre chanson à la place de "URL DE LA CHANSON (EN FORMAT MP3)".
Vous pouvez en profiter pour mettre la durée totale de la chanson à la place de "0:00".
Enfin, vous pouvez mettre le titre de la chanson à la place de "TITRE DE LA CHANSON".
Pour chaque nouvelle chanson dans votre liste, vous copiez/collez le code ci-haut et le mettez à la suite de la chanson précédente.
Évidemment, il y a une exception (parce que sinon c'est trop simple, non?)
Pour la première chanson de la liste, il faut que vous la mettiez dans ce bout de code :
- Code:
<!-- CHANSON 1 -->
<div class="music_line" id="current_songline">
<span data-music-src="URL DE LA CHANSON (EN FORMAT MP3)" class="music_song" id="current_song">
0:00 - TITRE DE LA CHANSON
</span>
</div>
<!-- FIN CHANSON 1 -->
Et il faut également mettre le lien de la chanson directement dans le lecteur audio de départ à cet endroit :
- Code:
<!-- LECTEUR AUDIO -->
<audio id="lecteuraudio" preload="none" onended="nextsong()" src="URL DE LA PREMIÈRE CHANSON">
Votre navigateur ne supporte pas ce lecteur audio.
</audio>
<!-- FIN LECTEUR AUDIO -->
C'est tout pour cette partie ~
3. Mettre le lecteur audio dans un iframe
Maintenant que la page HTML est créée avec le lecteur audio, il faut la mettre accessible aux membres.
Pour cela, vous devez vous rendre là où vous voulez que le lecteur soit soit et y mettre le code suivant :
- Code:
<iframe style="display: block; height: 150px; width: 302px; margin: auto; border: none;" src="LIEN DE LA PAGE HTML" frameborder="0"></iframe>
Comme vous pouvez le deviner, il faut mettre le lien de la page HTML là où c'est écrit. Mais peut-être que vous vous demandez d'où sort ce lien? Ce n'est pas trop compliqué ^^
Quand on va dans la gestion de nos pages HTML, la dernière qui a été enregistrée (donc normalement, votre lecteur audio), se trouve en haut de la liste. Il vous suffit de copier l'url de votre page HTML et de la mettre là où nous l'avons vu ci-haut. C'est vraiment écrit "URL DU LIEN", alors vous ne pouvez pas vous tromper
C'est tout! Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans Un problème avec mon code ou Personnalisations si vous avez besoin d'aide pour personnaliser le code.
À plus !
Un petit oubli - Rappel sur le droit d'auteur
Bien qu'il n'y ait aucun problème à avoir un lecteur audio sur un site (dieu sait qu'on trouve 72 codes juste en tapant sur google), le contenu qu'on y met est une autre histoire. Si les musiques que vous mettez dans le lecteur ne sont pas libres de droit ou ne vous appartiennent pas, c'est contre le droit d'auteur. Voir le message de TiGraou ci-bas qui résume tout :
TiGraou a écrit:Je trouve que c'est une bonne idée un lecteur musique mais il faut faire attention: La musique (MP3, radio…), les archives, les logiciels, sont protégés par le droit d’auteur. Il n’est donc pas possible de les reproduire ou de les diffuser sans autorisation de l’auteur.
Vous avez le risque de voir votre forum clôturé, je dis ça je dis rien. ^^ (voici le lien en question: http://forum.forumactif.com/t221386-mettre-de-la-musique-sur-votre-forum-vos-droits-a-connaitre
Pour ceux qui cherchent des musiques à télécharger et en toute légalité: Taper juste sur google "musique gratuite et libre de droit" ( quoi? ce n'est pas ce que vous voulez? \o/ )
Merci de laisser un message pour donner vos impressions/commentaires/remerciements ^^
Dernière édition par Onyx le Ven 19 Juin 2020 - 20:27, édité 19 fois
