JS cannot read remote source

Question

I am novice in JS and I am trying to create timedimension with animation of meteo data - like on this link. I have modified some of files to fit my need like this section in index.html (body section):

<script type="text/javascript">

var oReq = new XMLHttpRequest();
    oReq.addEventListener("load", (function(xhr) {
        var code = xhr.currentTarget.response;
        var codeBlock = document.getElementById("code");
        codeBlock.textContent = code;
        hljs.highlightBlock(codeBlock);
    }));
    oReq.open("GET", "osn.js");
    oReq.send();

var oReq = new XMLHttpRequest();
    oReq.addEventListener("load", (function(xhr) {
        var code = xhr.currentTarget.response;
        var codeBlock = document.getElementById("code-portus");
        codeBlock.textContent = code;
        hljs.highlightBlock(codeBlock);
    }));
    oReq.open("GET", "leaflet.timedimension.tilelayer.portus.js");
    oReq.send();
</script>

This script loads two scripts (osn.js and leaflet.timedimension.tilelayer.portus.js)

script osn.js:

var startDate = new Date();
startDate.setUTCHours(0, 0, 0, 0);
var mymap = L.map('mapid').setView([35.2456, 24.807], 8);

var portusLayer = L.tileLayer('https://portus.puertos.es/Portus//pathtiles/wave/MED/VHM0/{d}{h}/map//{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://portus.puertos.es/Portus_RT/">Agencia Estatal de Meteorología (AEMET) y Puertos del Estado (OPPE)</a>',
    tms: true,
    maxZoom: 7,
});
var portusTimeLayer = L.timeDimension.layer.tileLayer.portus(portusLayer, {});

var portusBalLayer = L.tileLayer('https://portus.puertos.es/Portus//pathtiles/wave/S12B/VHM0/{d}{h}/map//{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://portus.puertos.es/Portus_RT/">Agencia Estatal de Meteorología (AEMET) y Puertos del Estado (OPPE)</a>',
    tms: true,
    minZoom: 8
});
var portusBalTimeLayer = L.timeDimension.layer.tileLayer.portus(portusBalLayer, {});

var overlayMaps = {
    "Mediterranean wave": portusTimeLayer,
    "Balearic wave": portusBalTimeLayer,
};

var baseLayers = getCommonBaseLayers(mymap); 
L.control.layers(baseLayers, overlayMaps).addTo(mymap);

portusTimeLayer.addTo(mymap);
portusBalTimeLayer.addTo(mymap);

For sake of simlicity, I am linking leaflet.timedimension.layer.js

When running index.html, I can view map, but i get error in reading data from portusBalLayer and portusBalTimeLayer :

Any help in resolving this is appreciated.