Sindbad~EG File Manager

Current Path : /var/www/web2/visor_mapa_heim/
Upload File :
Current File : /var/www/web2/visor_mapa_heim/grabar.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Web Recorder</title>
    <link rel="stylesheet" href="dist/grabar-style.css" />
    <link rel="stylesheet" href="dist/fontawesome/css/all.css" />
  </head>
  <body>
    <header>
      <h1>Grabar Comentario</h1>
    </header>
    <main>
      <div class="controls">
 	
        <button type ="button" id="mic">Abrir Micrófono</button>
        <button type ="button" id="record" hidden>Grabar</button>        
        <button onclick= "window.close();" class="btn"><i class="fas fa-microphone-alt-slash fa-2x fa-pull-left"></i> &nbsp; Cerrar<br>Volver al Visor</button>

      </div>
      <ul id="recordings"></ul>
    </main>
    
    <script>
      window.addEventListener('DOMContentLoaded', () => {
        const getMic = document.getElementById('mic');
        const recordButton = document.getElementById('record');
        const list = document.getElementById('recordings');
        if ('MediaRecorder' in window) {
          getMic.addEventListener('click', async () => {
            getMic.setAttribute('hidden', 'hidden');
            try {
              const stream = await navigator.mediaDevices.getUserMedia({
                audio: true,
                video: false
              });
              const mimeType = 'audio/webm';
              let chunks = [];
              const recorder = new MediaRecorder(stream, { type: mimeType });
              recorder.addEventListener('dataavailable', event => {
                if (typeof event.data === 'undefined') return;
                if (event.data.size === 0) return;
                chunks.push(event.data);
              });
              recorder.addEventListener('stop', () => {
                const recording = new Blob(chunks, {
                  type: mimeType
                });
                renderRecording(recording, list);
                chunks = [];
              });
              recordButton.removeAttribute('hidden');
              recordButton.addEventListener('click', () => {
                if (recorder.state === 'inactive') {
                  recorder.start();
                  recordButton.innerText = 'Stop';
                } else {
                  recorder.stop();
                  recordButton.innerText = 'Grabar';
                }
              });
            } catch {
              renderError(
                'El micrófono no esta abierto. La aplicación no funcionará.'
              );
            }
          });
        } else {
          renderError(
            "Lo siento, su navegador no soporta MediaRecorder API. Esta aplicación no funcionará."
          );
        }
      });

      function renderError(message) {
        const main = document.querySelector('main');
        main.innerHTML = `<div class="error"><p>${message}</p></div>`;
      }

//FECHA/HORA

function appendLeadingZeroes(n){
  if(n <= 9){
    return "0" + n;
  }
  return n
}
function getFormattedTime() {
    var today = new Date();
    var y = today.getFullYear();
    // JavaScript months are 0-based.
    var m = today.getMonth() + 1;
    var d = today.getDate();
    var h = appendLeadingZeroes(today.getHours());
    var mi = appendLeadingZeroes(today.getMinutes());
    var s = today.getSeconds();
    return  d + "-" + m + "-" + y + "_" + h + mi; // + "-" + s; 	
}

      function renderRecording(blob, list) {
        const blobUrl = URL.createObjectURL(blob);
        const li = document.createElement('li');
        const audio = document.createElement('audio');
        const anchor = document.createElement('a');
        anchor.setAttribute('href', blobUrl);
        const now = new Date();
        anchor.setAttribute(
          'download',
         getFormattedTime() + ".webm"
        );
        anchor.innerText = 'Guardar la Grabación';
        audio.setAttribute('src', blobUrl);
        audio.setAttribute('controls', 'controls');
        li.appendChild(audio);
        li.appendChild(anchor);
        list.appendChild(li);
      }
    </script>
  </body>
</html>

Sindbad File Manager Version 1.0, Coded By Sindbad EG ~ The Terrorists