Merge pull request #912 from croisez/main

Added possibility in Spectrogram view to activate frequency shifting

homepage/style.css

@@ -26,7 +26,7 @@ iframe {
   padding: 0;
   margin: 0;
   border: none;
-  height: 90%;
+  height: 85%;
   width: 100%;
 }
 

scripts/advanced.php

@@ -94,6 +94,23 @@ if(isset($_GET['submit'])) {
       exec("sudo systemctl restart livestream.service");
     }
   }
+
+  if (isset($_GET["activate_freqshift_in_livestream"])) {
+    $activate_freqshift_in_livestream = trim($_GET["activate_freqshift_in_livestream"]);
+
+    //Setting exists already, see if the value changed
+    if (strcmp($activate_freqshift_in_livestream, $config['ACTIVATE_FREQSHIFT_IN_LIVESTREAM']) !== 0) {
+      $contents = preg_replace("/ACTIVATE_FREQSHIFT_IN_LIVESTREAM=.*/", "ACTIVATE_FREQSHIFT_IN_LIVESTREAM=\"$activate_freqshift_in_livestream\"", $contents);
+      $contents2 = preg_replace("/ACTIVATE_FREQSHIFT_IN_LIVESTREAM=.*/", "ACTIVATE_FREQSHIFT_IN_LIVESTREAM=\"$activate_freqshift_in_livestream\"", $contents2);
+      $fh = fopen("/etc/birdnet/birdnet.conf", "w");
+      $fh2 = fopen("./scripts/thisrun.txt", "w");
+      fwrite($fh, $contents);
+      fwrite($fh2, $contents2);
+      sleep(1);
+      exec("sudo systemctl restart livestream.service");
+    }
+  }
+
   
   if(isset($_GET["overlap"])) {
     $overlap = $_GET["overlap"];
@@ -570,7 +587,7 @@ foreach($formats as $format){
       <h2>Accessibility Settings</h2>
 
       <p>Birdsongs Frequency shifting configuration:<br>
-        This can be useful for hearing impaired people. Note: audio files will only be pitch shifted when the "FREQ SHIFT" button is manually clicked for a detection on the "Recordings" page.<br>
+        This can be useful for hearing impaired people. <br>Note: audio files will only be pitch shifted when the "FREQ SHIFT" button is manually clicked for a detection on the "Recordings" page. <br>The frequency shifting can also be activated for the realtime audio livestream, accessible in the SPECTROGRAM tab of BirdNET-Pi. Once it has been activated, it will be made available for the Live Audio feature as well.<br>Livestream is using ffmpeg for streaming its audio data, so the pitch shifter in that case will use this tool too. If you choose sox as the tool for freq shifting recorded audio files, then you must configure both sox and ffmpeg parameters: sox for recordings, and ffmpeg for livestream.<br>
 
         <p style="margin-left: 40px">
 

scripts/livestream.sh

@@ -12,6 +12,10 @@ if [ "$LOGGING_LEVEL" == "info" ] || [ "$LOGGING_LEVEL" == "debug" ];then
   set -x
 fi
 
+if [ "$ACTIVATE_FREQSHIFT_IN_LIVESTREAM" == "true" ]; then
+  FREQSHIFT_OPT='-af rubberband=pitch='${FREQSHIFT_LO}'/'${FREQSHIFT_HI}
+fi
+
 if [ -z ${REC_CARD} ];then
   echo "Stream not supported"
 elif [[ ! -z ${RTSP_STREAM} ]];then
@@ -34,9 +38,11 @@ elif [[ ! -z ${RTSP_STREAM} ]];then
 
   ffmpeg -nostdin -loglevel $LOGGING_LEVEL -ac ${CHANNELS} -i ${SELECTED_RSTP_STREAM} -acodec libmp3lame \
     -b:a 320k -ac ${CHANNELS} -content_type 'audio/mpeg' \
+    ${FREQSHIFT_OPT} \
     -f mp3 icecast://source:${ICE_PWD}@localhost:8000/stream -re
 else
 	ffmpeg -nostdin -loglevel $LOGGING_LEVEL -ac ${CHANNELS} -f alsa -i ${REC_CARD} -acodec libmp3lame \
     -b:a 320k -ac ${CHANNELS} -content_type 'audio/mpeg' \
+    ${FREQSHIFT_OPT} \
     -f mp3 icecast://source:${ICE_PWD}@localhost:8000/stream -re
 fi

scripts/overview.php

@@ -506,6 +506,7 @@ function generateMiniGraph(elem, comname) {
       // Create a div element for the chart window
       if (typeof(window.chartWindow) != 'undefined') {
         document.body.removeChild(window.chartWindow);
+        window.chartWindow = undefined;
       }
       var chartWindow = document.createElement('div');
       chartWindow.className = "chartdiv"
@@ -615,6 +616,7 @@ function generateMiniGraph(elem, comname) {
       closeButton.style.right = '5px';
       closeButton.addEventListener('click', function() {
         document.body.removeChild(chartWindow);
+        window.chartWindow = undefined;
       });
       chartWindow.appendChild(closeButton);
       window.chartWindow = chartWindow;
@@ -631,6 +633,7 @@ window.addEventListener('scroll', function() {
   // Loop through all chart elements and remove them
   charts.forEach(function(chart) {
     chart.parentNode.removeChild(chart);
+    window.chartWindow = undefined;
   });
 });
 

scripts/spectrogram.php

@@ -316,6 +316,46 @@ function toggleCompression(state) {
   }
 }
 
+function toggleFreqshift(state) {
+  if (state == true) {
+    console.log("freqshift activated")
+  } else {
+    console.log("freqshift deactivated")
+  }
+
+  var livestream_freqshift_spinner = document.getElementById('livestream_freqshift_spinner');
+  livestream_freqshift_spinner.style.display = "inline"; 
+  // Create the XMLHttpRequest object.
+  const xhr = new XMLHttpRequest();
+  // Initialize the request
+  xhr.open("GET", './views.php?activate_freqshift_in_livestream=' + state + '&view=Advanced&submit=advanced');
+  // Send the request
+  xhr.send();
+  // Fired once the request completes successfully
+  xhr.onload = function (e) {
+    // Check if the request was a success
+    if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
+      // Restart the audio player in case it stopped working while the livestream service was restarted
+      var audio_player = document.querySelector('audio#player');
+      if (audio_player !== 'undefined') {
+        //central_controls_element.appendChild(h1_loading);
+        //Wait 2 seconds before restarting the stream
+        setTimeout(function () {
+          console.log("Restarting connection with livestream");
+          audio_player.pause();
+          audio_player.setAttribute('src', '/stream');
+          audio_player.load();
+          audio_player.play();
+
+          livestream_freqshift_spinner.style.display = "none"; 
+        },
+        2000
+        )
+      }
+    }
+  }
+}
+
 function initialize() {
   document.body.querySelector('h1').remove();
   const CVS = document.body.querySelector('canvas');
@@ -354,6 +394,7 @@ function initialize() {
     gainNode.connect(ACTX.destination);
 
     document.getElementById("compression").removeAttribute("disabled");
+    document.getElementById("freqshift").removeAttribute("disabled");
 
     console.log(SOURCE);
     const DATA = new Uint8Array(ANALYSER.frequencyBinCount);
@@ -470,9 +511,21 @@ h1 {
   </div>
     &mdash;
   <div style="display:inline" id="comp" >
-  <label>Compression: </label>
+    <label>Compression: </label>
     <input name="compression" type="checkbox" id="compression" disabled>
   </div>
+  <div style="display:inline" id="fshift" >
+    <label>Freq shift: </label>
+    <?php 
+        if ($config['ACTIVATE_FREQSHIFT_IN_LIVESTREAM'] == "true") {
+          $freqshift_state = "checked";
+        } else {
+          $freqshift_state = "";
+        }
+    ?>
+    <input name="freqshift" type="checkbox" id="freqshift" <?php echo($freqshift_state); ?>  disabled>
+    <img id="livestream_freqshift_spinner" src=images/spinner.gif style="height: 25px; vertical-align: top; display: none">
+  </div>
 </div>
 
 <audio style="display:none" controls="" crossorigin="anonymous" id='player' preload="none"><source id="playersrc" src="/stream"></audio>
@@ -542,4 +595,9 @@ var compression = document.getElementById("compression");
 compression.onclick = function() {
   toggleCompression(this.checked);
 }
-</script>
+
+var freqshift = document.getElementById("freqshift");
+freqshift.onclick = function() {
+  toggleFreqshift(this.checked);
+}
+</script>

scripts/update_birdnet_snippets.sh

@@ -148,6 +148,9 @@ fi
 if ! grep FREQSHIFT_PITCH /etc/birdnet/birdnet.conf &>/dev/null;then
   sudo -u$USER echo "FREQSHIFT_PITCH=-1500" >> /etc/birdnet/birdnet.conf
 fi
+if ! grep ACTIVATE_FREQSHIFT_IN_LIVESTREAM /etc/birdnet/birdnet.conf &>/dev/null;then
+  sudo -u$USER echo "ACTIVATE_FREQSHIFT_IN_LIVESTREAM=\"false\"" >> /etc/birdnet/birdnet.conf
+fi
 if ! grep HEARTBEAT_URL /etc/birdnet/birdnet.conf &>/dev/null;then
   sudo -u$USER echo "HEARTBEAT_URL=" >> /etc/birdnet/birdnet.conf
 fi