Chorale à 4 voix

Créer un jutebox mp3

Contexte

Ce jutebox est validé pour la version Php 8.2.
Il est créé pour faciliter le travail des chorales en éditant les enregistrements dans un espace privé.
Pour stocker les enregistrements, il faut créer un répertoire désignant le jutebox dans le répertoire documents. Dans ce répertoire, créer les répertoires nommés par le nom de l'ablum. Puis dans chaque répertoire, stocker les chants enregistrés en mp3. Ainsi le jutebox dispose de 2 niveaux.

Gestion des accès privés

Il est utilisé avec Pluxml et le plugins vip-zone. Toutefois, avec l'hébergement chez Ionos, , le filtrage des accès se fait par les lignes suivantes
<?php if (!isset($_SESSION['profil']) ) {$_SESSION['pageRequest'] = $_SERVER['REQUEST_URI'] ;
echo '<meta http-equiv="refresh" content="0;url=/core/admin/auth.php">'; echo 'die("redirection impossible")';} ?>
Reproduction strictement interdite.
Ces enregistrements sont destinés uniquement au travail des chanteurs de la chorale 

Style en accordéon

Le style est un double accordéon pour ouvrir l'album choisi puis le chant choisi
<style>
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 20px;
  transition: 0.4s;
}
.active, .accordion:hover {
  background-color: #ccc;
}

.accordion:after {
  content: '+';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "-";
}

.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
.accordion2 {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 8px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active, .accordion2:hover {
  background-color: #ccc;
}

.accordion2:after {
  content: '+';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 15px;
}

.active:after {
  content: "-";
}

.panel2 {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
</style>

Le programme de lecture des répertoires

Modifier la 3° ligne en indiquant le nom du jutebox.
Plusieurs jutebox peuvent ainsi être créer dans un même site.
<?php
# Nom du sous-dossier dans /data/documents/ contenant les fichiers à télécharger
$dir = 'mon jutebox/';
//Lister les albums
$diralbums ='data/documents/'.$dir; $albums0 = scandir($diralbums);
    foreach($albums0 as $value){if($value === '.' || $value === '..'|| $value === '.htaccess') {continue;}else{$albums[]=$diralbums.$value;}}
// --end preprocessing
?>
<h3><strong>Album</strong> </h3>
<?php
foreach($albums as $album)
{
$text = $album;
while (strrpos($text,"/")){ $text = substr($text, strrpos($text,"/")+1); }
echo '<button class="accordion">';
echo $text ;
echo'</button>';
echo'<div class="panel">';
$titre=$text;
$dirchant='data/documents/'.$dir.$text.'/';
$chants=array();
$chants0 = scandir($dirchant);
   foreach($chants0 as $value){if($value === '.' || $value === '..'|| $value === '.htaccess') {continue;}else{$chants[]= $dirchant.$value;}}
echo'<h3><Chant</h3>';
foreach($chants as $chant)
{
   $titre = $chant;
while (strrpos( $titre,"/"))
{
$titre= substr( $titre, strrpos( $titre,"/")+1);
}

  $titre = str_replace("_", " ", $titre); // Replace all _ with SPACE
  $titre = str_replace("'", " ", $titre); // Replace all _ with SPACE
$titre = str_replace(".mp3", "", $titre); // Replace all _ with SPACE<span style="white-space:pre">
echo'<button class="accordion2">';
echo $titre ;
echo'</button>';
echo'<div class="panel2">';
  
// --begin print les chants
?>
<center>
<figure>
<audio controls>
<source src="<?php echo $chant; ?>" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</figure>
</center>
</div>

<?php 
} ?>
</div>
<?php 
} ?>

Un peu de java

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  });
}

<script>
var acc = document.getElementsByClassName("accordion2");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  });
}