game/testa/soundMessage.html

<!DOCTYPE html>
<html lang="en-us">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Web dictaphone</title>
    <link href="styles/app.css" rel="stylesheet" type="text/css">
</head>

<style>
    #chatInputWindow {
        width: 96px;
        margin-bottom: 10px;
    }
    .record {
        width: 150px;
    }
</style>

<body>

<div class="wrapper">

  <header>
    <h1>Р“РѕР»РѕСЃРѕРІСѓС…Рё</h1>
  </header>

  <input id="chatInputWindow" type="text">

  <section class="main-controls">
    <div id="buttons">
      <button class="record">РќР°С‡Р°С‚СЊ Р·Р°РїРёСЃСЊ</button>
    </div>
  </section>

  <section class="sound-clips">


  </section>

  <!-- <audio id="test" controls style="width:100%;max-width:600px;">
    </audio> -->

</div>

</aside>
<script>


    const record = document.querySelector('.record');
    const soundClips = document.querySelector('.sound-clips');
    const canvas = document.querySelector('.visualizer');
    const mainSection = document.querySelector('.main-controls');
    const chatInputWindow = document.getElementById("chatInputWindow")


    // const $testSource = document.getElementById("test")
    // $testSource.innerHTML = 
    // `\n<source src=\"https://new-combats.com/audio/play.php?id=1\" type=\"audio/mp3\">\n`


    // chatInputWindow.attributes.readonly = true
    // chatInputWindow.textContent = "dsds"
    // console.log(chatInputWindow.value)

    let audioCtx;
    let i = 0

    //main block for doing the audio recording

    if (navigator.mediaDevices.getUserMedia) {

        const constraints = {
            audio: true
        };
        let chunks = [];

        let onSuccess = function (stream) {
            const mediaRecorder = new MediaRecorder(stream);

            visualize(stream);

            
            let setIntervalSound
            
            
            record.addEventListener("click", function (event) {
                
                if (record.textContent === "РќР°С‡Р°С‚СЊ Р·Р°РїРёСЃСЊ") {
                    
                    mediaRecorder.start()

                    let timerSecMessage = 1
                    let timerMinMessage = 0
                    setIntervalSound = setInterval( () => {
                        
                        if (timerMinMessage === 60) {
                            clearInterval(setIntervalSound)
                            mediaRecorder.stop();

                            chatInputWindow.value = ""
                            record.textContent = "РќР°С‡Р°С‚СЊ Р·Р°РїРёСЃСЊ"
                            record.style.color = ""
                            // record.style.background = ""
                            return
                        }

                        if (timerMinMessage > 9) chatInputWindow.value = `00:${timerMinMessage},${timerSecMessage}`
                        else chatInputWindow.value = `00:0${timerMinMessage},${timerSecMessage}`
                        
                        if (++timerSecMessage > 9) {
                            timerSecMessage = 0
                            ++timerMinMessage
                        }         
                    }, 100)
                    
                    // console.log(stream)
                    record.textContent = "Р—Р°РІРµСЂС€РёС‚СЊ Р·Р°РїРёСЃСЊ"
                    record.style.color = "red"
                    // record.style.background = "grey";
                    return
                }
                clearInterval(setIntervalSound)
                mediaRecorder.stop();

                chatInputWindow.value = ""
                record.textContent = "РќР°С‡Р°С‚СЊ Р·Р°РїРёСЃСЊ"
                record.style.color = ""
                // record.style.background = "";
                return
            })

            mediaRecorder.onstop = function (e) {

                // const clipContainer = document.createElement('article');
                // const clipLabel = document.createElement('p');
                // const audio = document.createElement('audio');
                // const deleteButton = document.createElement('button');

                // clipContainer.classList.add('clip');
                // audio.setAttribute('controls', '');
                // deleteButton.textContent = 'Delete';
                // deleteButton.className = 'delete';

                // clipLabel.textContent = `РіРѕР»РѕСЃРѕРІРѕРµ СЃРѕРѕР±С‰РµРЅРёРµ ${++i}`

                // clipContainer.appendChild(audio);
                // clipContainer.appendChild(clipLabel);
                // clipContainer.appendChild(deleteButton);
                // soundClips.appendChild(clipContainer);

                // audio.controls = true;

                // РїСЂРµРѕР±СЂР°Р·РѕРІР°РЅРёРµ РєСѓСЃРєРѕРІ РІ РѕРґРёРЅ BLOB Рё РїСЂРµРѕР±СЂР°Р·РѕРІР°РЅРёРµ РµРіРѕ РІ ArrayBuffer
                
                const blob = new Blob(chunks, {
                    'type': 'audio/mp3; codecs=opus'
                })
                
                chunks.pop()

                const fileReader = new FileReader()
                fileReader.readAsArrayBuffer(blob)

                
                fileReader.onload = async function (event) {
                    
                    const arrayBuffer = fileReader.result

                    // console.log(arrayBuffer)

                    // Р—Р°РїСЂРѕСЃ
                    const response = await fetch("https://new-combats.com/testa/audio.php",  {
                        method: "POST",
                        // body: JSON.stringify(objAjax)
                        body: arrayBuffer
                    })
                    
                    // const result = await response.json()
                    const timeStampFile = await response.text()
                    // console.log(arrayResBuffer)

                    // const audioURL = window.URL.createObjectURL(arrayResBuffer);
                    // // console.log(audioURL)
                    // audio.src = audioURL;
                    // audio.src = "https://new-combats.com/audio/play.php?id=1"
                    soundClips.innerHTML += `<audio id="test" controls style="width:100%;max-width:600px;">
                        <source src="audio/audio_${timeStampFile}.mp3" type="audio/mp3">
                        </audio>`
                    // document.body.innerHTML += `<audio id="test" controls style="width:100%;max-width:600px;">
                    //     <source src="audio/audio_${timeStampFile}.mp3" type="audio/mp3">
                    //     </audio>`
                    
                    // document.getElementById("test").innerHTML = `
                    // `
    
                    // deleteButton.onclick = function (e) {
                    //     let evtTgt = e.target;
                    //     evtTgt.parentNode.parentNode.removeChild(evtTgt.parentNode);
                    // }
                }
            }

            mediaRecorder.ondataavailable = function (e) {
                chunks.push(e.data);
            }
        }

        let onError = function (err) {
            console.log('The following error occured: ' + err);
        }

        navigator.mediaDevices.getUserMedia(constraints).then(onSuccess, onError);

    } else {
        console.log('getUserMedia not supported on your browser!');
    }

    function visualize(stream) {
        if (!audioCtx) {
            audioCtx = new AudioContext();
        }

        const source = audioCtx.createMediaStreamSource(stream);

        const analyser = audioCtx.createAnalyser();
        analyser.fftSize = 2048;
        const bufferLength = analyser.frequencyBinCount;
        const dataArray = new Uint8Array(bufferLength);
        source.connect(analyser);
        // analyser.connect(audioCtx.destination);
    }
</script>

</body>
</html>