Server : Apache
System : Linux ks5.tuic.fr 6.1.0-18-amd64 #1 SMP PREEMPT_DYNAMIC Debian 6.1.76-1 (2024-02-01) x86_64
User : pragmatice ( 1003)
PHP Version : 8.2.24
Disable Function : NONE
Directory : /home/pragmatice/public_html/tests/micro_modif/
|
Server : Apache System : Linux ks5.tuic.fr 6.1.0-18-amd64 #1 SMP PREEMPT_DYNAMIC Debian 6.1.76-1 (2024-02-01) x86_64 User : pragmatice ( 1003) PHP Version : 8.2.24 Disable Function : NONE Directory : /home/pragmatice/public_html/tests/micro_modif/ |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test Micro</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
#playlist {margin:20px 0 0 0; padding:0;}
#playlist li {list-style:none; margin:5px 0; padding:3px 5px; background-color: #CCC; display:flex; align-items: center; justify-content: center; flex-wrap: wrap; border-radius: 10px;}
#playlist li .btn, #playlist li audio, #zone_montage .btn {margin:2px 5px;}
#zone_montage {background-color: #80FF80; padding:10px; margin-top:20px; border-radius: 10px;}
.enr_montage {margin-top:5px; display:flex; align-items: center; justify-content: center; flex-wrap: wrap;}
</style>
</head>
<body>
<div class="container text-center mt-3">
<button class="btn btn-primary btn-lg mb-3">Commencer l'enregistrement</button>
<ul id="playlist"></ul>
<div id="zone_montage">
<h5>Pour créer un enregistrement de plusieurs sons, cliquer sur leurs numéros.</h5>
<div class="ref_montage"></div>
<div class="enr_montage">
<audio preload="auto" src="son_vide.mp3" controls=""></audio>
<button class="btn btn-primary">Valider</button>
<button class="btn btn-secondary">Telecharger</button></li>
</div>
</div>
</div>
<!-- <script src="js/adapter.js"></script> -->
<!-- <script src="https://unpkg.com/mic-recorder-to-mp3"></script> -->
<script src="js/mic-recorder-to-mp3.min.js"></script>
<script src="js/jquery.min.js"></script>
<script>
var cpt = 0;
const button = document.querySelector('button');
const recorder = new MicRecorder({
bitRate: 128
});
button.addEventListener('click', startRecording);
function startRecording() {
recorder.start().then(() => {
button.textContent = "Arrêter l'enregistrement";
button.classList.toggle('btn-danger');
button.removeEventListener('click', startRecording);
button.addEventListener('click', stopRecording);
}).catch((e) => {
console.error(e);
});
}
function stopRecording() {
recorder.stop().getMp3().then(([buffer, blob]) => {
console.log(buffer, blob);
const file = new File(buffer, afficherDateJour()+'.mp3', {
type: blob.type,
lastModified: Date.now()
});
const li = document.createElement('li');
const player = new Audio(URL.createObjectURL(file));
player.controls = true;
li.appendChild(player);
document.querySelector('#playlist').appendChild(li);
// Ajout du bouton de saisie du nom du fichier => supprimé par Eric
/*
const inputFilename = document.createElement("INPUT");
inputFilename.setAttribute("type", "text");
inputFilename.setAttribute('size', 10);
inputFilename.classList = "toto";// Eric
li.appendChild(inputFilename);
*/
// Ajout d'un bouton de suppression
$("<button class='btn btn-danger bt_supprimer_enregistrement' data-enr='"+cpt+"'>Sup</button>").prependTo("li:last");
// Ajout d'un bouton pour le montage
$("<button class='btn btn-secondary bt_select_enregistrement'>"+cpt+"</button>").prependTo("li:last");
cpt++;
afficherOuNonZoneMontage();
// Ajout du bouton d'upload
const buttonUpload = document.createElement("button");
buttonUpload.innerHTML = "Valider";
buttonUpload.classList = "btn btn-primary";
li.appendChild(buttonUpload);
buttonUpload.addEventListener ("click", function() {
$.ajax({
type: 'POST',
//url: 'upload.php?name='+inputFilename.value,
url: 'upload.php?name='+"toto",// Eric => à remplacer par le nom souhaité défini à l'ouverture de la modale
data: blob,
processData: false,
contentType: false
}).done(function(data) {
console.log(data);
});
});
// Ajout du bouton de téléchargement
const buttonDownload = document.createElement("button");
buttonDownload.innerHTML = "Telecharger";
buttonDownload.classList = "btn btn-secondary";
li.appendChild(buttonDownload);
buttonDownload.addEventListener ("click", function() {
var lenom = prompt("Saisir le nom du fichier", "");// Eric => pour afficher un prompt
if (lenom != null) {
if (lenom == "") lenom=afficherDateJour();
lenom = remplaceCarInterdit(lenom);
var tmplink = document.createElement('a');
tmplink.setAttribute('href', URL.createObjectURL(file));
//tmplink.setAttribute('download', inputFilename.value);
tmplink.setAttribute('download', lenom);// Eric => ligne du dessus remplacée poru récupérer le prompt
document.body.appendChild(tmplink);
tmplink.click();
document.body.removeChild(tmplink);
}
});
button.textContent = "Commencer l'enregistrement";
button.classList.toggle('btn-danger');
button.removeEventListener('click', stopRecording);
button.addEventListener('click', startRecording);
}).catch((e) => {
console.error(e);
});
}
// masquage des éléments à l'ouverture
$("#zone_montage").hide();
$(".enr_montage").hide();
// Supprimer un enregistrement originel
$('body').on('click', '.bt_supprimer_enregistrement', function () {
$(this).parent().remove();
$(".ref_montage > .btn[data-enr='"+$(this).attr('data-enr')+"']").remove();
afficherOuNonZoneLecteur();
});
// Sélectionner un enregistrement
$('body').on('click', '.bt_select_enregistrement', function () {
$(".ref_montage").append("<button class='btn btn-secondary' data-enr='"+$(this).text()+"'>"+$(this).text()+"</button>");
genererSonConcantene();
afficherOuNonZoneMontage();
});
// Supprimer un enregistrement sélectionné
$('body').on('click', '.ref_montage > .btn', function () {
$(this).remove();
genererSonConcantene();
});
// Générer le son concaténé
function genererSonConcantene() {
///////////// code qui crée le son concaténé, prêt à être téléchargé ou uploadé
afficherOuNonZoneLecteur();
}
function afficherOuNonZoneMontage() {
if ($("#playlist li").length > 0) $("#zone_montage").slideDown();
else $("#zone_montage").slideUp();
}
function afficherOuNonZoneLecteur() {
if ($(".ref_montage > .btn").length > 0) $(".enr_montage").slideDown();
else {
$(".enr_montage").slideUp();
$(".enr_montage > audio").attr("src","son_vide.mp3");
}
}
function remplaceCarInterdit(chaine) {
chaine = chaine.replace(/ |\*|\||:|"|<|>|\?/g,"-")
return chaine;
}
function afficherDateJour() {
var ladate=new Date();
return (ladate.getDate().toString().replace(/^(\d)$/,'0$1')+"-"+(ladate.getMonth()+1).toString().replace(/^(\d)$/,'0$1')+"-"+ladate.getFullYear()+"-"+ladate.getHours().toString().replace(/^(\d)$/,'0$1')+"h-"+ladate.getMinutes().toString().replace(/^(\d)$/,'0$1')+"m-"+ladate.getSeconds().toString().replace(/^(\d)$/,'0$1')+"s");
}
</script>
</body>
</html>