Spaces:

Dmtlant
/

BarVOx

Running

App Files Files Community

Dmtlant commited on Oct 1, 2024

Commit

7d44b25

verified ·

1 Parent(s): f7a05cc

Update index.html

Browse files

Files changed (1) hide show

index.html +208 -93

index.html CHANGED Viewed

@@ -1,115 +1,230 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <title>TTS GUI</title>
-  <style>
-    body {
-      font-family: Arial, sans-serif;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      height: 100vh;
-      margin: 0;
-      background-color: #f0f0f0;
-    }
-    .container {
-      background-color: white;
-      padding: 20px;
-      border-radius: 8px;
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-      width: 400px;
-    }
-    textarea {
-      width: 100%;
-      height: 100px;
-      font-size: 16px;
-      padding: 10px;
-      box-sizing: border-box;
-      border: 1px solid #ccc;
-      border-radius: 4px;
-      resize: vertical;
     }
-    button {
-      width: 100%;
-      font-size: 16px;
-      padding: 10px;
-      background-color: #4CAF50;
-      color: white;
-      border: none;
-      border-radius: 4px;
-      cursor: pointer;
-      margin-top: 10px;
     }
-    button:hover {
-      background-color: #45a049;
     }
-    #log-container {
-      margin-top: 20px;
-      width: 100%;
-      max-height: 200px;
-      overflow-y: auto;
-      background-color: #f0f0f0;
-      padding: 10px;
-      border-radius: 4px;
-      font-size: 14px;
     }
-  </style>
-</head>
-<body>
-  <div class="container">
-    <textarea id="text-input" placeholder="Enter text to convert to speech"></textarea>
-    <button onclick="generateSpeech()">Generate Speech</button>
-    <div id="log-container">
-      <pre id="log"></pre>
-    </div>
-  </div>
-  <script>
-    async function generateSpeech() {
-      const textInput = document.getElementById('text-input').value;
-      const response = await query({ "inputs": textInput });
-      const audioBlob = response;
-      const audioUrl = URL.createObjectURL(audioBlob);
-      // Create an Audio object and set its src property to the Blob URL
-      const audio = new Audio(audioUrl);
-      audio.play();
-      // Log the audioBlob to the console
-      console.log(audioBlob);
     }
-    async function query(data) {
-      logMessage('Sending request to the server...');
-      const response = await fetch(
-        "https://api-inference.huggingface.co/models/suno/bark-small",
-        {
-          headers: {
-            Authorization: "Bearer hf_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
-            "Content-Type": "application/json",
-          },
-          method: "POST",
-          body: JSON.stringify(data),
-        }
-      );
-      logMessage('Response received from the server.');
-      const result = await response.blob();
-      return result;
     }
-    function logMessage(message) {
-      const logContainer = document.getElementById('log');
-      logContainer.textContent += `${message}\n`;
     }
-  </script>
 </body>
 </html>

 <!DOCTYPE html>
 <html>
 <head>
+    <title>Широкополосный FM и ELF Demodulator</title>
+    <style>
+        body { font-family: Arial, sans-serif; }
+        #controls { margin-bottom: 20px; }
+    </style>
+</head>
+<body>
+    <div id="controls">
+        <label for="frequencySlider">Частота (Hz): </label>
+        <input type="range" id="frequencySlider" min="3" max="20000" step="1" value="1000">
+        <span id="frequencyValue">1000</span> Hz
+        <button id="toggleAudio">Включить звук</button>
+        <button id="toggleELF">Включить ELF режим</button>
+    </div>
+    <canvas id="elfCanvas" width="800" height="150" style="border:1px solid #000000;"></canvas>
+    <script>
+let audioContext;
+let analyser;
+let microphone;
+let canvas;
+let canvasCtx;
+let scriptProcessor;
+let prevPhase = 0;
+let demodulatedSignal = [];
+let gainNode;
+let isAudioEnabled = false;
+let isELFMode = false;
+let centerFrequency = 1000; // Hz
+let elfBuffer = [];
+let elfCanvas;
+let elfCtx;
+let movingAverageBuffer = [];
+const movingAverageSize = 50; // Размер окна для скользящего среднего
+function startAudioAnalysis() {
+    audioContext = new (window.AudioContext || window.webkitAudioContext)();
+    analyser = audioContext.createAnalyser();
+    analyser.fftSize = 2048;
+    scriptProcessor = audioContext.createScriptProcessor(1024, 1, 1);
+    gainNode = audioContext.createGain();
+    gainNode.gain.setValueAtTime(0, audioContext.currentTime);
+    navigator.mediaDevices.getUserMedia({ audio: true, video: false })
+        .then(function(stream) {
+            microphone = audioContext.createMediaStreamSource(stream);
+            microphone.connect(analyser);
+            analyser.connect(scriptProcessor);
+            scriptProcessor.connect(gainNode);
+            gainNode.connect(audioContext.destination);
+            canvas = document.createElement('canvas');
+            canvas.width = 800;
+            canvas.height = 300;
+            document.body.appendChild(canvas);
+            canvasCtx = canvas.getContext('2d');
+            elfCanvas = document.getElementById('elfCanvas');
+            elfCtx = elfCanvas.getContext('2d');
+            drawSpectrum();
+        })
+        .catch(function(err) {
+            console.error('Ошибка доступа к микрофону:', err);
+        });
+    scriptProcessor.onaudioprocess = processAudio;
+}
+function drawSpectrum() {
+    requestAnimationFrame(drawSpectrum);
+    const bufferLength = analyser.frequencyBinCount;
+    const dataArray = new Uint8Array(bufferLength);
+    analyser.getByteFrequencyData(dataArray);
+    canvasCtx.fillStyle = 'rgb(0, 0, 0)';
+    canvasCtx.fillRect(0, 0, canvas.width, canvas.height);
+    const barWidth = (canvas.width / bufferLength) * 2.5;
+    let x = 0;
+    for(let i = 0; i < bufferLength; i++) {
+        const barHeight = dataArray[i] / 2;
+        canvasCtx.fillStyle = `rgb(${barHeight + 100}, 50, 50)`;
+        canvasCtx.fillRect(x, canvas.height - barHeight, barWidth, barHeight);
+        x += barWidth + 1;
     }
+    // Рисуем демодулированный сигнал
+    canvasCtx.strokeStyle = 'rgb(0, 255, 0)';
+    canvasCtx.beginPath();
+    for(let i = 0; i < demodulatedSignal.length; i++) {
+        const x = (i / demodulatedSignal.length) * canvas.width;
+        const y = (0.5 - demodulatedSignal[i] / 2) * canvas.height;
+        if(i === 0) {
+            canvasCtx.moveTo(x, y);
+        } else {
+            canvasCtx.lineTo(x, y);
+        }
     }
+    canvasCtx.stroke();
+    // Рисуем маркер центральной частоты
+    const centerX = (centerFrequency / 20000) * canvas.width;
+    canvasCtx.strokeStyle = 'rgb(255, 255, 0)';
+    canvasCtx.beginPath();
+    canvasCtx.moveTo(centerX, 0);
+    canvasCtx.lineTo(centerX, canvas.height);
+    canvasCtx.stroke();
+    // Рисуем ELF сигнал
+    if (isELFMode) {
+        elfCtx.fillStyle = 'rgb(0, 0, 0)';
+        elfCtx.fillRect(0, 0, elfCanvas.width, elfCanvas.height);
+        elfCtx.strokeStyle = 'rgb(0, 255, 0)';
+        elfCtx.beginPath();
+        for(let i = 0; i < elfBuffer.length; i++) {
+            const x = (i / elfBuffer.length) * elfCanvas.width;
+            const y = (0.5 - elfBuffer[i] / 2) * elfCanvas.height;
+            if(i === 0) {
+                elfCtx.moveTo(x, y);
+            } else {
+                elfCtx.lineTo(x, y);
+            }
+        }
+        elfCtx.stroke();
     }
+}
+function processAudio(audioProcessingEvent) {
+    const inputBuffer = audioProcessingEvent.inputBuffer;
+    const outputBuffer = audioProcessingEvent.outputBuffer;
+    const inputData = inputBuffer.getChannelData(0);
+    const outputData = outputBuffer.getChannelData(0);
+    demodulatedSignal = [];
+    for(let i = 0; i < inputData.length; i++) {
+        const phase = Math.atan2(inputData[i], prevPhase);
+        const instantFreq = (phase - prevPhase + Math.PI) % (2 * Math.PI) - Math.PI;
+        let demodulated;
+        if (isELFMode) {
+            demodulated = lowPassFilter(instantFreq);
+            demodulated = movingAverage(demodulated);
+        } else {
+            demodulated = instantFreq * (centerFrequency / 1000);
+        }
+        demodulatedSignal.push(demodulated);
+        outputData[i] = demodulated;
+        prevPhase = inputData[i];
     }
+    if (isELFMode) {
+        elfBuffer = elfBuffer.concat(demodulatedSignal);
+        if (elfBuffer.length > 1000) {
+            elfBuffer = elfBuffer.slice(-1000);
+        }
     }
+}
+function lowPassFilter(input) {
+    // Простой фильтр нижних частот
+    const alpha = 0.1;
+    this.filtered = (this.filtered || 0) * (1 - alpha) + input * alpha;
+    return this.filtered;
+}
+function movingAverage(input) {
+    movingAverageBuffer.push(input);
+    if (movingAverageBuffer.length > movingAverageSize) {
+        movingAverageBuffer.shift();
+    }
+    const sum = movingAverageBuffer.reduce((a, b) => a + b, 0);
+    return sum / movingA
+return sum / movingAverageBuffer.length;
+}
+function toggleAudio() {
+    if (isAudioEnabled) {
+        gainNode.gain.setValueAtTime(0, audioContext.currentTime);
+        document.getElementById('toggleAudio').textContent = 'Включить звук';
+    } else {
+        gainNode.gain.setValueAtTime(1, audioContext.currentTime);
+        document.getElementById('toggleAudio').textContent = 'Выключить звук';
     }
+    isAudioEnabled = !isAudioEnabled;
+}
+function toggleELF() {
+    isELFMode = !isELFMode;
+    if (isELFMode) {
+        document.getElementById('toggleELF').textContent = 'Выключить ELF режим';
+        document.getElementById('frequencySlider').min = 3;
+        document.getElementById('frequencySlider').max = 30;
+        centerFrequency = 15;
+        document.getElementById('frequencySlider').value = centerFrequency;
+        updateFrequency();
+    } else {
+        document.getElementById('toggleELF').textContent = 'Включить ELF режим';
+        document.getElementById('frequencySlider').min = 3;
+        document.getElementById('frequencySlider').max = 20000;
+        centerFrequency = 1000;
+        document.getElementById('frequencySlider').value = centerFrequency;
+        updateFrequency();
     }
+    elfBuffer = [];
+    movingAverageBuffer = [];
+}
+function updateFrequency() {
+    centerFrequency = parseFloat(document.getElementById('frequencySlider').value);
+    document.getElementById('frequencyValue').textContent = centerFrequency.toFixed(0);
+}
+window.onload = function() {
+    startAudioAnalysis();
+    document.getElementById('toggleAudio').addEventListener('click', toggleAudio);
+    document.getElementById('toggleELF').addEventListener('click', toggleELF);
+    document.getElementById('frequencySlider').addEventListener('input', updateFrequency);
+};
+    </script>
 </body>
 </html>