TheOnlyFastCoder2

Вместо FileSystem API можно использовать new FileReader(); он позволяет загружать и читать файл , без
каких-нибудь затруднений . Но если же вы хотите перезаписать файл или создать новый , то вам не обойтись от использования серверной части вместе с библиотекой fs для Nodejs
<input id="loaderFile" type="file" >

loaderFile.addEventListener('change', ({target}) => {
  let file = target.files[0];
  const loader = new FileReader();
  if((/(.json)$/).test(file.name)) {
    loader.readAsText(file)
    loader.onload = () => {
      const res = JSON.parse(loader.result);  
      console.log(res)
   }
 }
})

вот пример серверной части

const express = require("express");
const cors = require("cors");
const app = express();


const fs = require("fs-extra");


app.use(cors())
app.use(express.json({limit: '4MB'}))

app.all("/", function(req,res) {
    if(req.body.name != undefined){   
        res.send("It's okay")   
        const name = req.body.name.replace(/(\.)/gi,"");
        
        if(!fs.existsSync(`./files/${name}`)) {
            fs.mkdir(`./files/${name}`, function(el){
                fs.writeFileSync(`./files/${name}/${name}.srt.json`, JSON.stringify(req.body.DOM) ) 
            });
        } 
        else {
            fs.writeFileSync(`./files/${name}/${name}.srt.json`, JSON.stringify(req.body.DOM) ) 
        }
    }
})

app.listen(8080)

обратиться к серверу можно с помощью библиотеки axios

const url = "http://localhost:8080/";
const loadedFile = JSON.stringify(loadSubtittles);
const savedSub = JSON.stringify(saveSubtittles);


const data = {
  name: target.dataset.file,
  DOM: {
    "loadFile": loadedFile, 
    "saveSubtittles": savedSub
  } 
}

axios.post(url,data,{
  headers:{ 
    "Content-Type":"application/json",
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Headers" : "Origin, X-Requested-With, Content-Type, Accept"
  },
})
  .then ( res => res)
  .catch( err => err)

В ванильном js не реализованы import и export , вам нужно тогда использовать какие-нибудь сборщики как webpack или gulp .

Если вам этот подход не нравится , тогда есть лишь один вариант:
Нужно подключить файлы по очереди , чтобы вы смогли использовать свои функции и переменные в файле file1.js из файла file2.js

<script type="javascript/text" src="file1.js"></script>
<script type="javascript/text" src="file2.js"></script>

<div id="block">hover me</div>

function getHidden (hide , seconds , animation) {
  block.setAttribute('style',`
    width:100px; 
    height: 50px; 
   cursor:pointer;
    background: ${hide ? "red" : "none"}; 
    transition: ${seconds}s ${animation};
  `)
} 


block.addEventListener('mouseover' , () => getHidden(true,1,"ease-in") )
block.addEventListener('mouseout' , () => getHidden(false,1,"ease-out") )

<span>
  <input id="textarea_1" type="text" placeholder="до"> 
  <input id="textarea_2" type="text" placeholder="после"> 
  <p id="textarea_after"> </p>
</span>
<button id="button">найти</button>

button.onclick = () => {
   textarea_after.textContent = findChanged(textarea_1.value,textarea_2.value)
}

function findChanged (orig,changed) {
  [orig,changed] = [orig,changed].map((text) => text.split(""))
  return changed.filter( (char) =>  orig.indexOf(char) === -1 ).join("")
}

<div>
  <audio id="audio" controls>
   <source type="audio/mp3" src="https://dnl.megapesni.com/get/online/EWdZCiMIEXxZ3O4cLtOqLg/1626470796/ae17d566/2021/05/Galibri & Mavik - Федерико Феллини.mp3">
 </audio>
</div>
<button id="button"> clickMe </button>

button.onclick = () => {
    if( audio.paused === false ) {
      audio.pause()
      alert("audio остановлено")
    }
    else {
      audio.play()
      alert("audio продолжено")
    }
}