Page Loading Progress

0%

top of page

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Audio Player Example</title>
</head>
<body onload="init();" style="background-color:transparent;">
  <button onclick="playAudio()">ACTIVATE-JARVIS</button>
  <script>    
    function init () {
      // when a message is received from the page code
      window.onmessage = (event) => {
        if (event.data) {
          console.log("HTML Code Element received a message!");
          console.log(event.data);
          let binaryAudioData = event.data;
          playAudio(binaryAudioData);          
        }
      }
    }      
   
   async function playAudio(binaryAudioData) {
    // Convert the array of integers to Uint8Array and then to ArrayBuffer
    const uint8Array = new Uint8Array(binaryAudioData);
    const arrayBuffer = uint8Array.buffer; console.log(arrayBuffer);
    // Create a new AudioContext.
    const audioContext = new (window.AudioContext || window.webkitAudioContext)();
    try {
      // Decode the binary audio data into an audio buffer.
      const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
      // Create an AudioBufferSourceNode.
      const source = audioContext.createBufferSource();
      // Set the buffer of the AudioBufferSourceNode to the decoded audio buffer.
      source.buffer = audioBuffer;
      // Connect the AudioBufferSourceNode to the AudioContext destination (speakers).
      source.connect(audioContext.destination);
      // Start playing the audio.
      source.start();
    } catch (error) {console.error('Error decoding audio data:', error);}
  }
   
  </script>
</body>
</html>

Mic-Speaker-Activation

Are you trying to activate one of those devices like...

-speaker

-microphone

-camera

-vr --> (Virtual-Reality) 

​

...on your wix-website, but it does not really work, because there are you real given options for that?

​

1) There are no real out of thebox solutions provided by wix, regarding this request.

2) Installing silly apps which provides you very bad performed solution like --> shown here in this example --> click here

3) But wix tries to improve it's capabilities --> we can see it here --> click here

4) But still all this is surely not enough, if it comes to feel the full freem, if it comes to coding.

5) So our solution has to be more flexible --> more infos about, what is different between this 3 presented methods of generating a text 2 speech function, you can read here --> https://forum.wixstudio.com/t/microphone-camera-sound/55327

6) Of course there are still more possibilities, like usage of NPM-Packages or CUSTOM-ELEMENT, but all these solutions someking of restricted in their provided functions.

​

So no, let's generate our boundaries-free text-2-speech-generator, which can be used for...

a) Translation

b) Fast text-generation

c) Chat-Bots

d) Command-Center

e) ...and so on, and so on...

​

​

Our biggest issue and boundary in our project will be the fact, that Wix embeds it's own iFrame in an own iFrame-wrapper on their site, what means, if you add your own iFrame onto a Wix-Webpage --> that means that you are adding an iFrame into and already existing iFrame.

And the whole things gets even worse, because wix have added even more security onto their own iFrame, which makes the whole situation even worse.

So if it comes to an installation of a microphone, speaker, vr, or camera, you will have very just a very few possibilities to get your wished devic working.

​

​

​

And here the code, which makes all the magic...

 

​

​

2024-01-11 22_25_25-ChatGPT.png

<script>
    setTimeout(function () {
        var iframes = document.querySelectorAll("iframe");
        console.log(iframes);
        
        if (iframes.length > 0) {
            iframes[0].setAttribute("allow", "microphone; camera");
            var y = iframes[0].parentNode;
            var x = iframes[0].cloneNode(true); // Clone the iframe
            x.setAttribute("allow", "microphone; camera");
            y.appendChild(x);
        }
    }, 3000);
</script>

<!DOCTYPE html>
<html>
<head>
    <title>Speech recognition</title>
    <style>
        #result {
            border: 2px solid black;
            height: 200px;
            border-radius: 3px;
            font-size: 14px;
            white-space: pre-wrap;
            overflow-y: auto;
            margin-bottom: 10px;
        }
        #finalText {
            border: 2px solid black;
            height: 100px;
            width: 600px;
            border-radius: 3px;
            font-size: 14px;
            white-space: pre-wrap;
            overflow-y: auto;
            margin-bottom: 10px;
        }
        button {
            position: absolute;
            top: 240px;
            left: 50%;
            margin-right: -50%;
            transform: translate(-50%, -50%);
        }
        #voiceStrength {
            width: 200px;
            height: 20px;
            background-color: #eee;
            position: relative;
            margin-bottom: 10px;
        }
        #voiceStrength canvas {
            display: block;
            width: 100%;
            height: 100%;
        }
        #languageDropdown {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: none;
            text-align: center;
        }
    </style>
    
    
    
    
    
    <script type="application/javascript">
    
            function init () {
          // when a message is received from the page code
          window.onmessage = (event) => {
            if (event.data) {console.log("HTML Code Element received a message!");
                  console.log(event.data);
              start();
            }
          }
        }
    
        var recognition; // Declare recognition outside the function
        var isRecording = false;
        var stopRecordingTimeout;

        async function start() {
            var resultDiv = document.getElementById("result");
            var finalTextDiv = document.getElementById("finalText");
            var voiceStrengthMeter = document.getElementById("voiceStrength");
            var languageDropdown = document.getElementById("languageDropdown");

            // Request microphone access
            try {
                const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
                handleSuccess(stream);
            } catch (e) {
                console.error('Error accessing microphone:', e);
                resultDiv.innerText = "Error accessing microphone. Please check your browser settings.";
            }

            function handleSuccess(stream) {
                var audioContext = new (window.AudioContext || window.webkitAudioContext)();
                var analyser = audioContext.createAnalyser();
                analyser.fftSize = 256;
                var dataArray = new Uint8Array(analyser.frequencyBinCount);

                var source = audioContext.createMediaStreamSource(stream);
                source.connect(analyser);
                analyser.connect(audioContext.destination);

                var canvas = document.createElement("canvas");
                canvas.width = voiceStrengthMeter.clientWidth;
                canvas.height = voiceStrengthMeter.clientHeight;
                voiceStrengthMeter.appendChild(canvas);
                var canvasContext = canvas.getContext("2d");

                function visualize() {
                    analyser.getByteFrequencyData(dataArray);

                    canvasContext.clearRect(0, 0, canvas.width, canvas.height);

                    var barWidth = canvas.width / dataArray.length;
                    var barHeight;

                    for (var i = 0; i < dataArray.length; i++) {
                        barHeight = dataArray[i] / 2;

                        canvasContext.fillStyle = 'rgb(' + (barHeight + 100) + ',50,50)';
                        canvasContext.fillRect(i * barWidth, canvas.height - barHeight, barWidth, barHeight);
                    }

                    requestAnimationFrame(visualize);
                }

                visualize();

                // Speech recognition
                recognition = new webkitSpeechRecognition();
                recognition.continuous = true;
                recognition.interimResults = true;
                recognition.lang = "de-DE";

                recognition.onstart = function () {
                    console.log('Speech recognition started');
                    isRecording = true;
                };

                recognition.onresult = function (event) {
                    var interimTranscripts = "";
                    for (var i = 0; i < event.results.length; i++) {
                        var transcript = event.results[i][0].transcript;
                        transcript.replace("\n", "<br>");
                        interimTranscripts += transcript + ' ';
                    }
                    resultDiv.innerHTML = interimTranscripts;

                    // Reset the timeout for stopping recording
                    clearTimeout(stopRecordingTimeout);
                    stopRecordingTimeout = setTimeout(stopRecording, 500);

                    // Handle commands
                    handleCommands(interimTranscripts);
                };

                recognition.onerror = function (event) {
                    console.error('Speech recognition error:', event.error);
                };

                recognition.onend = function () {
                    console.log('Speech recognition ended');
                    isRecording = false;
                };

                function stopRecording() {
                    if (isRecording) {
                        console.log('Stopping recording');
                        // Add the final transcripts to the new text field after 3 seconds of speech break
                        finalTextDiv.innerHTML += resultDiv.innerHTML + '\n';
                        // Clear the top text box
                        
                        
                        //----sende Nachricht an Wix-Website
                        // send message to the page code
                        
                        window.parent.postMessage(resultDiv.innerHTML, "https://www.media-junkie.com/chatgpt");
                        console.log('MSG sent');
                        console.log(resultDiv.innerHTML);
                        resultDiv.innerHTML = '';
        
                    }
                }

                recognition.start();
            }
        }

        function resetResultBox() {
            var finalTextDiv = document.getElementById("finalText");
            finalTextDiv.innerHTML = '';
        }

        function showLanguageDropdown() {
            var languageDropdown = document.getElementById("languageDropdown");
            languageDropdown.style.display = 'block';
        }

        function changeLanguage(language) {
            recognition.lang = language;
            recognition.stop();
            recognition.start();
        }

        function handleCommands(text) {
            if (text.includes('reset')) {
                resetResultBox();
            } else if (text.includes('change language')) {
                showLanguageDropdown();
            }
            // Add more commands here as needed
        }
    </script>
</head>
<body onload="init();" style="background-color:white;">
    <div id="result"></div>
    <button onclick="start()">Listen</button>
    <div id="voiceStrength">
        <canvas></canvas>
    </div>
    <div id="finalText"></div>
    
    <div id="languageDropdown">
        <select onchange="changeLanguage(this.value)">
            <option value="en-US">English</option>
            <option value="de-DE">German</option>
            <option value="ru-RU">Russian</option>
        </select>
    </div>
</body>
</html>
 


  <style>
    body {
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
    }

    #sound-control-bar {
      background-color: #333;
      color: white;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 16px;
      border-bottom-left-radius: 15px;
      border-bottom-right-radius: 15px;
    }

    #playButton,
    #pauseButton,
    #stopButton {
      background-color: #3498db;
      color: white;
      border: none;
      padding: 8px 16px;
      text-align: center;
      text-decoration: none;
      font-size: 16px;
      cursor: pointer;
      border-radius: 4px;
      margin-right: 8px;
    }

    #volumeControl {
      width: 100px;
      margin-right: 8px;
    }

    #progressBar {
      flex-grow: 1;
      height: 10px;
      background-color: #ddd;
      border-radius: 5px;
      position: relative;
    }

    #progressIndicator {
      height: 100%;
      background-color: #3498db;
      border-radius: 5px;
      width: 0;
    }
  </style>

<body>
  <div id="sound-control-bar">
    <button id="playButton">Play</button>
    <button id="pauseButton">Pause</button>
    <button id="stopButton">Stop</button>
    <input id="volumeControl" type="range" min="0" max="1" step="0.01" value="1">
    <div id="progressBar">
      <div id="progressIndicator"></div>
    </div>
    <button id="grantPermissionsButton">Grant Permissions</button>
  </div>

  <script>
      function getAllIframes(element, iframeArray) {
      iframeArray = iframeArray || [];
      var iframes = element.querySelectorAll('iframe');
      for (var i = 0; i < iframes.length; i++) {
        iframeArray.push(iframes[i]);
        getAllIframes(iframes[i], iframeArray);
      } return iframeArray;
    }
    
    async function check_devices() {let data = {};
      try {const devices = await navigator.mediaDevices.enumerateDevices(); data.devices = devices;
        const hasMicrophone = devices.some(device => device.kind === 'audioinput');
        const hasCamera = devices.some(device => device.kind === 'videoinput');

        if (hasMicrophone) {data.mic = 'Microphone is accessible.';}
        else {data.mic = 'Microphone is not accessible.';}
        if (hasCamera) {data.cam = 'Camera is accessible.';}
        else {data.cam = 'Camera is not accessible.';}
      } catch (error) {data.error = error;}
      return data;
    }

    function check_autoPlay() {
      if (document.featurePolicy.allowedFeatures.autoplay === 'self') {return 'Autoplay is allowed.';}
      else {return 'Autoplay is not allowed.';}
    }
    
    //var iframeArray = getAllIframes(document.body); console.log('Iframe-Array: ', iframeArray);
   
   
       setTimeout(async function()    {
      var allIframes = await getAllIframes(document.body); console.log('All-iFrames: ', allIframes);
    
        const deviceData = await check_devices(); console.log('Device-Data: ', deviceData);
      const allowens = allIframes[0].allow; console.log('Allowens: ', allowens);
      
           
           const permissionsArray = allowens.split(';'); console.log('Permissions Array: ', permissionsArray);
           for (const permission of permissionsArray) {
        
         
            console.log(`${permission} is allowed`);
        
      }
      
      
      
      
    
      console.log(allIframes[0]);
      console.log('-------------------');
      console.log('access-FULLSCREEN: ', allIframes[0].allowFullscreen);
      console.log('access-MICROPHONE: ', allIframes[0].allow === 'microphone');
      console.log('access-AUTOPLAY: ', check_autoPlay());
      console.log('access-CAMERA: ', deviceData.cam);
      console.log('access-GEOLOCATION: ', allIframes[0].allowGeolocation);
      console.log('access-PAYMENT-REQUEST: ', allIframes[0].allowPaymentRequest);     
      console.log('-------------------');
           allIframes[0].setAttribute('allow', 'microphone;');
      console.log('RES: ', allIframes[0].allow);
      
      
      
    }, 5000);
    
    
    
    
    document.getElementById("grantPermissionsButton").addEventListener("click", async function() {
      try {
        var allIframes = await getAllIframes(document.body);
        for (const iframe of allIframes) {
        
        
          iframe.allow = 'camera; microphone; vr; speaker;';
          
          
        }
        
        
        console.log('Permissions granted for all iframes.');
      } catch (error) {
        console.error('Error granting permissions:', error);
      }
      
    });
    
    
    
    
    
      //--------------------------------------------------------------------  
    var audioUrl = "https://static.wixstatic.com/mp3/57da6c_f8ce6176cb574458bc2dc760132e4a5a.mp3";
    var audio = new Audio(audioUrl);
    var playButton = document.getElementById("playButton");
    var pauseButton = document.getElementById("pauseButton");
    var stopButton = document.getElementById("stopButton");
    var volumeControl = document.getElementById("volumeControl");
    var progressBar = document.getElementById("progressBar");
    var progressIndicator = document.getElementById("progressIndicator");
       //-----------------------------------------------------------------------
    playButton.addEventListener("click", function() {audio.play();});
    pauseButton.addEventListener("click", function() {audio.pause();});
    stopButton.addEventListener("click", function() {audio.pause(); audio.currentTime = 0;});
    volumeControl.addEventListener("input", function() {audio.volume = this.value;});
    audio.addEventListener("timeupdate", function() {var progress = (audio.currentTime / audio.duration) * 100; progressIndicator.style.width = progress + "%";});
 
      
  </script>
 
 

</body>

 

bottom of page