chincharovpc

Если я правильно тебя понял, то вот

import { Fragment, useEffect, useRef, useState } from "react";
import "./styles.css";
export default function App() {
  const firstDivRef = useRef();
  const [windowScroll, setWindowScroll] = useState(0);

  useEffect(() => {
    const onScroll = () => {
      if (windowScroll === 0) {
        setWindowScroll(window.scrollY);
      }

      firstDivRef.current.scrollTop =
        firstDivRef.current.scrollTop + (window.scrollY - windowScroll);

      setWindowScroll(window.scrollY);
    };

    window.removeEventListener("scroll", onScroll);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, [windowScroll]);

  return (
    <Fragment>
      <div className="header"></div>
      <div
        className="App"
        style={{
          display: "flex",
          marginTop: "100px"
        }}
      >
        <div
          ref={firstDivRef}
          style={{
            height: "600px",
            overflow: "scroll",
            backgroundColor: "#FFDAB9",
            position: "sticky",
            top: "100px"
          }}
        >
          <div>
            <ul className="first-scroll">
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
            </ul>
          </div>
        </div>

        <div
          style={{
            backgroundColor: "#EEE8AA"
          }}
        >
          <div>
            <ul className="first-scroll">
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
            </ul>
          </div>
        </div>
      </div>
      <div className="about-us"></div>
      <div className="footer"></div>
    </Fragment>
  );
}

Я думаю, тебе нужно сначала получить json с помощью javascript, а потом отобразить в html
Ссылка, если я правильно тебя понял

МОжно при нажатии на ссылку вызвать функцию и получить файл с помощью fetch, далее превратить файл в blob и перейти на ссылку blob. В catch можно перехватить ошибки

const downloadBlobFile = (id, fileName) => {
  fetch(`${API_URL}/files/download/${id}`)
      .then(response => {
        return response.blob()
      })
      .then(blob => {
        const link = window.document.createElement("a");
        link.href = window.URL.createObjectURL(blob);
        link.download = fileName || 'file';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      })
      .catch(() => {
        //Обработка ошибок
      });
}

const groupArr = {}
arr.map(message => ({...message, date: new Date(message.date)}))
    .sort((m1, m2) => m1.date - m2.date)
    .forEach(message => {
        const date = message.date.toISOString().split('T')[0]
        if (!groupArr.hasOwnProperty(date)) {
            groupArr[date] = []
        }
        groupArr[date].push(message)
    })

Object.keys(groupArr).forEach(key => console.log(groupArr[key]))

Смог.

1. Записывается голос с микрофона с помощью WebAudioRecorder, есть в github
   
2. Запись преобразуем в blob
   
3. blob преобразуем в base64 с помощью FileReader
   
4. base64 передаем с помощью POST к php
   
5. в php создаем файл из base64 с помощью

   file_put_contents($audioFileName, base64_decode($file));

   
   
6. Открываем файл созданный только что и передаем к Speechkit
   
7. Возвращаем ответ
   
   

e[0]['constructor']...