loadsample.js

function loadsample() {

    document.getElementById("status").innerHTML = "Loading and decoding file..."
    document.getElementById("Spinner").style.display = "block"
    document.getElementById("spinner1").style.display = "block"

     
            clearInterval(intervalid);
    
        if (audiocontext === undefined){
     
     audiocontext= new AudioContext();
    }
    
    
    if (source){
     source.stop();
    }

    fetch('videosample.mp4')
    .then(response => {
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      return response.arrayBuffer();
    })
    .then(audiodata => {

        var extractaudiodata = audiodata.slice(0, audiodata.byteLength)

        audiocontext.decodeAudioData(audiodata, function(audiofile){
       
        
            if (bufferarray.length >0){
    
                var array3 = audiocontext.createBuffer(bufferarray.numberOfChannels, bufferarray.length, bufferarray.sampleRate);
                var array3channel = array3.getChannelData(0)
                array3channel.set(bufferarray.getChannelData(0), 0)
    
                if(bufferarray.numberOfChannels >1){
                    array4channel = array3.getChannelData(1)
                    array4channel.set(bufferarray.getChannelData(1), 0)
                }
                            if (undo.length ===3){
                    
                                undo.splice(0, 1)
                                undo1.splice(0, 1)
                    
                                
                            }
                            var array50 = [...videodata]
                            undo.push(array3);
                            undo1.push(array50);
    
                var combinedbuffer1 = audiocontext.createBuffer(audiofile.numberOfChannels, audiofile.length+bufferarray.length, audiofile.sampleRate)
                var newbuffer1 = combinedbuffer1.getChannelData(0)
                newbuffer1.set(bufferarray.getChannelData(0), 0)
                newbuffer1.set(audiofile.getChannelData(0), bufferarray.length)
    
                if(audiofile.numberOfChannles>1){
                newbuffer1.set(bufferarray.getChannelData(1), 0)
                newbuffer1.set(audiofile.getChannelData(1), bufferarray.length)
            }
                bufferarray = combinedbuffer1;
    
    
               
                
                
                }
                
                else{
                   bufferarray = audiofile
    
              
                }
        
            document.getElementById("totallength").innerHTML=bufferarray.length;
            source = audiocontext.createBufferSource();
        check = 1;
        
            time = parseInt(sourceduration);
           
            
            document.getElementById("error").innerHTML = "";
        
        
         var canvascontext = document.getElementById('canvas11');
    var newarray = bufferarray.getChannelData(0);
       var canctx = canvascontext.getContext('2d');
       canctx.clearRect(0,0,canvascontext.width, canvascontext.height)
       canctx.fillStyle = "black"
       canctx.beginPath();
       canctx.moveTo(0, canvascontext.height / 2);
       canctx.lineWidth = 1;
    const topOffset = 10;
    const bottomOffset = 10;
    for (let i = 0; i < newarray.length; i=i+500) {
    const x = i / newarray.length * canvascontext.width;
    const y = ((newarray[i] + 1) / 2 * (canvascontext.height - topOffset - bottomOffset)) + topOffset;
    canctx.lineTo(x, y);
    }
    canctx.stroke();
        
        
        
           
    const analyser = audiocontext.createAnalyser();
analyser.fftSize = 2048;

const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);
analyser.getByteTimeDomainData(dataArray);

// Connect the source to be analysed
source.connect(analyser);
 
 source.buffer=bufferarray;
 analyser.connect(audiocontext.destination);           
              



               source.start(0, 0, 0);
               sourceduration = source.buffer.duration;
               drawtime();
               document.getElementById("duration").innerHTML = source.buffer.duration.toFixed(3);
        
           if (source.buffer.duration>=1){
        intervalid =   setInterval(()=>{
                time++;
            document.getElementById("timer").innerHTML = time;
        
            if (time ===parseInt(source.buffer.duration)){
                clearInterval(intervalid);
            }
            
        }, 1000);
        }
        document.getElementById("status").innerHTML = "";
        document.getElementById("Spinner").style.display = "none"
        document.getElementById("spinner1").style.display = "none"
         
    
    
    
        function draw() {


            const canvas = document.getElementById("canvas12");
        const canvasCtx = canvas.getContext("2d");
            requestAnimationFrame(draw);
          
            analyser.getByteTimeDomainData(dataArray);
          
            canvasCtx.fillStyle = "rgb(200, 200, 200)";
            canvasCtx.fillRect(0, 0, canvas.width, canvas.height);
          
            canvasCtx.lineWidth = 2;
            canvasCtx.strokeStyle = "rgb(0, 0, 0)";
          
            canvasCtx.beginPath();
          
            const sliceWidth = (canvas.width * 1.0) / bufferLength;
            let x = 0;
          
            for (let i = 0; i < bufferLength; i++) {
              const v = dataArray[i] / 128.0;
              const y = (v * canvas.height) / 2;
          
              if (i === 0) {
                canvasCtx.moveTo(x, y);
              } else {
                canvasCtx.lineTo(x, y);
              }
          
              x += sliceWidth;
            }
          
            canvasCtx.lineTo(canvas.width, canvas.height / 2);
            canvasCtx.stroke();
          }
    
    draw();
    
    
    

     //videofile

     var mp4boxfile = MP4Box.createFile();
     mp4boxfile.onReady = function(info) {
 
         document.getElementById("status").innerHTML = "";
 document.getElementById("Spinner").style.display = "block"
 document.getElementById("spinner1").style.display = "block"
 
     codecinfo = info.videoTracks[0].codec;
 
 
 
     var movieduration = info.videoTracks[0].movie_duration
     var movietimescale = info.videoTracks[0].movie_timescale
     var samplelength = info.videoTracks[0].nb_samples;
     var durationinseconds = movieduration/movietimescale;
 
     videoinfo.samplerate =Math.round( samplelength/durationinseconds);
 
    videoinfo.height = info.videoTracks[0].track_height;
     videoinfo.width=info.videoTracks[0].track_width;
 
    
    
   
 
 
 
 mp4boxfile.setExtractionOptions(1, null, {nbSamples:8000});  
 mp4boxfile.start();
 mp4boxfile.onSamples = function (id, user, samples) {
 
 if (id===1){
 
     if(samples[0].number === 0){
     
 
         if(id===1){
         var avccext = extractaudiodata;
         avcC = avccext.slice(
         samples[0].description.boxes[0].start+samples[0].description.boxes[0].hdr_size, samples[0].description.boxes[0].start+samples[0].description.boxes[0].size)
         
         
         
         
         
         }
         }
     if (videoDecoder.state==="unconfigured"){
 
         const options = {
             primaries: "bt709",
               transfer:"bt709",
                                 matrix:null,
             fullRange: true,
           };
           var colorspace = new VideoColorSpace(options);
 
         var config = {
             codec:codecinfo,
             codedWidth:videoinfo.width,
               codedHeight: videoinfo.height,
               
               description:avcC,
         
          colorSpace: colorspace,
              
              
                          
             
             
             }
         videoDecoder.configure(config);
     
 
         var  init  = {
             type: 'key',
             data: samples[0].data,
             timestamp: 2000,
             duration: 37,
             }; 
             
             var chunk = new EncodedVideoChunk(init);
             
             videoDecoder.decode(chunk);
 
 
 
     }
 
 
    
 
 
 
 var counter = 0;
 
 while(counter<samples.length){
 
     var  init  = {
         type: 'key',
         data: samples[counter].data,
         timestamp: 2000,
         duration: 37,
         }; 
         
         var chunk = new EncodedVideoChunk(init);
         
         videoDecoder.decode(chunk);
     
         keyframe = samples[0].data
     
     counter++;
 
 
 
 
 
 
 }
 
 
 }
 
 
 
 
 
 
 
 }
 
 
 
 
 }
    var buffer =  extractaudiodata;
    buffer.fileStart = 0;
 
     mp4boxfile.appendBuffer(buffer);
  mp4boxfile.flush();
    
    
    
    })
    
     
   
   
   
   
   
   
        })
    .catch(error => {
        document.getElementById("status").innerHTML = "";
        document.getElementById("error").innerHTML = "Cannot open file"
        document.getElementById("Spinner").style.display = "none"
        document.getElementById("spinner1").style.display = "none"
    });
  
  
  


    
    
    
    
      
     } 
    
   


     function drawtime(){


        var duration = source.buffer.duration
            var canvas13 = document.getElementById("canvas13");
            var ctx1 = canvas13.getContext("2d");
        var scale = duration/20
            var length = (1290/duration)*scale
        
            ctx1.clearRect(0,0, canvas13.width, canvas13.height)
        
            ctx1.fillStyle = "black"
            ctx1.globalAlpha = 1;
        var x = 0;
            for (i = 1; i<parseInt(source.buffer.duration)/scale; i++){
        x = x+length
            ctx1.fillText(parseInt(i*scale), x, 12)
            ctx1.fillText("|", x+38, 12)
        }
        console.log("helloworld")
         }