speechrecorderng 2.25.2 → 3.0.1

package/fesm2015/speechrecorderng.mjs

@@ -36,6 +36,7 @@ import * as i2$2 from '@angular/material/table';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { MatSelectModule } from '@angular/material/select';
 import { MatInputModule } from '@angular/material/input';
+import { MatMenuModule } from '@angular/material/menu';
 
 class ActionEvent {
     constructor(_value = null) {
@@ -109,6 +110,518 @@ class Action {
     }
 }
 
+class ArrayAudioBufferInputStream {
+    constructor(arrayAudioBuffer) {
+        this.arrayAudioBuffer = arrayAudioBuffer;
+        this._framePos = 0;
+        this.chunkFramePos = 0;
+        this.chunkIdx = 0;
+        this.eod = false;
+        //console.debug("Array audio input stream array audio buffer frames: "+arrayAudioBuffer.frameLen);
+    }
+    close() {
+    }
+    skipFrames(n) {
+        let toSkip = n;
+        if (this.chunkIdx >= this.arrayAudioBuffer.chunkCount) {
+            this.eod = true;
+            if (toSkip > 0) {
+                throw Error('Skip out of bounds: Cannot skip ' + toSkip + ' frames.');
+            }
+        }
+        else {
+            let chunkBuf0 = this.arrayAudioBuffer.data[0][this.chunkIdx];
+            let chunkBufsLen = chunkBuf0.length;
+            let currBufSkippable = chunkBufsLen - this.chunkFramePos;
+            if (n >= currBufSkippable) {
+                this._framePos += currBufSkippable;
+                toSkip -= currBufSkippable;
+                this.chunkIdx++;
+                this.chunkFramePos = 0;
+                if (this.chunkIdx < this.arrayAudioBuffer.chunkCount) {
+                    this.skipFrames(toSkip);
+                }
+                else {
+                    if (toSkip > 0) {
+                        throw Error('Skip out of bounds: Cannot skip ' + toSkip + ' frames.');
+                    }
+                }
+            }
+            else {
+                toSkip -= n;
+                this.chunkFramePos += n;
+            }
+        }
+    }
+    read(buffers) {
+        let read = 0;
+        let toRead = buffers[0].length;
+        while (read < toRead && !this.eod) {
+            //console.debug("Chunk "+this.chunkIdx+" of "+this.arrayAudioBuffer.chunkCount+" chunks.")
+            if (this.chunkIdx >= this.arrayAudioBuffer.chunkCount) {
+                this.eod = true;
+                //console.debug("Array audio input stream end of data read frames: "+this.framePos);
+            }
+            else {
+                let chunkBuf0 = this.arrayAudioBuffer.data[0][this.chunkIdx];
+                let chunkBufsLen = chunkBuf0.length;
+                let chunkBufAvail = chunkBufsLen - this.chunkFramePos;
+                let r = chunkBufAvail;
+                if (r > toRead - read) {
+                    r = toRead - read;
+                }
+                for (let ch = 0; ch < buffers.length; ch++) {
+                    let chChunkBuf = this.arrayAudioBuffer.data[ch][this.chunkIdx];
+                    for (let bi = 0; bi < r; bi++) {
+                        buffers[ch][read + bi] = chChunkBuf[this.chunkFramePos + bi];
+                    }
+                }
+                read += r;
+                this.chunkFramePos += r;
+                if (this.chunkFramePos >= chunkBufsLen) {
+                    this.chunkIdx++;
+                    this.chunkFramePos = 0;
+                }
+            }
+        }
+        this._framePos += read;
+        //console.debug("Read: "+read+", frame pos: "+this.framePos)
+        if (this._framePos > this.arrayAudioBuffer.frameLen) {
+            console.error("Array audio input stream frame pos: " + this._framePos + " greater then frame length: " + this.arrayAudioBuffer.frameLen);
+        }
+        return read;
+    }
+    get framePos() {
+        return this._framePos;
+    }
+}
+
+class EditFloat32ArrayInputStream {
+    constructor(_srcInputStream, offset = 0, length) {
+        this._srcInputStream = _srcInputStream;
+        this.offset = offset;
+        this.length = length;
+        this.framePos = 0;
+        this.readFrames = 0;
+        if (this.offset < 0) {
+            throw Error('Parameter offset must be undefined or greater or equal zero.');
+        }
+        if (this.length !== undefined && this.length < 0) {
+            throw Error('Parameter length must be undefined or greater or equal zero.');
+        }
+    }
+    skipToOffset() {
+        if (this.framePos == 0 && this.offset > 0) {
+            this._srcInputStream.skipFrames(this.offset);
+            this.framePos += this.offset;
+        }
+    }
+    read(buffers) {
+        this.skipToOffset();
+        let read = 0;
+        if (this.length === undefined) {
+            read = this._srcInputStream.read(buffers);
+        }
+        else {
+            if (buffers.length > 0) {
+                let bufsCh0 = buffers[0];
+                let bufsLen = bufsCh0.length;
+                let avail = this.length - this.readFrames;
+                if (avail > 0) {
+                    if (avail > bufsLen) {
+                        read = this._srcInputStream.read(buffers);
+                    }
+                    else {
+                        // temporary buffers required
+                        let tmpBufs = new Array(buffers.length);
+                        for (let ch = 0; ch < buffers.length; ch++) {
+                            tmpBufs[ch] = new Float32Array(avail);
+                        }
+                        read = this._srcInputStream.read(tmpBufs);
+                        for (let ch = 0; ch < buffers.length; ch++) {
+                            buffers[ch].set(tmpBufs[ch]);
+                        }
+                    }
+                }
+            }
+        }
+        this.readFrames += read;
+        this.framePos += read;
+        return read;
+    }
+    skipFrames(n) {
+        this.skipToOffset();
+        if (this.length === undefined) {
+            this._srcInputStream.skipFrames(n);
+        }
+        else {
+            let avail = this.length - this.readFrames;
+            if (avail > 0) {
+                if (avail >= n) {
+                    this._srcInputStream.skipFrames(n);
+                    this.readFrames += n;
+                    this.framePos += n;
+                }
+                else {
+                    throw Error('Tried to skip out of bounds.');
+                }
+            }
+        }
+    }
+    close() {
+        this._srcInputStream.close();
+    }
+}
+class Float32ArrayChunkerOutStream {
+    constructor(outStream) {
+        this.outStream = outStream;
+        this.bufs = new Array();
+        this._channels = 0;
+        this._chunkSize = 0;
+        this.filled = 0;
+        this.receivedFrames = 0;
+        this.sentFrames = 0;
+    }
+    createBuffers() {
+        this.bufs = new Array(this._channels);
+        for (let ch = 0; ch < this._channels; ch++) {
+            this.bufs[ch] = new Float32Array(this._chunkSize);
+        }
+    }
+    set chunkSize(chunkSize) {
+        this._chunkSize = chunkSize;
+        this.createBuffers();
+    }
+    get chunkSize() {
+        return this._chunkSize;
+    }
+    set channels(channels) {
+        this._channels = channels;
+        this.createBuffers();
+    }
+    get channels() {
+        return this._channels;
+    }
+    available() {
+        return this._chunkSize - this.filled;
+    }
+    write(buffers) {
+        let copied = 0;
+        if (buffers.length > 0) {
+            let buffersLen = buffers[0].length;
+            this.receivedFrames += buffersLen;
+            let avail = buffersLen;
+            // Fill out buffers until all values copied
+            while (avail > 0) {
+                let toFill = this._chunkSize - this.filled;
+                if (toFill > avail) {
+                    toFill = avail;
+                }
+                let sliceEnd = copied + toFill;
+                // Firefox on Android sends only the first channel
+                for (let ch = 0; ch < buffersLen; ch++) {
+                    if (buffers[ch]) {
+                        let cpPrt = buffers[ch].slice(copied, sliceEnd);
+                        let buf = this.bufs[ch];
+                        buf.set(cpPrt, this.filled);
+                    }
+                }
+                copied += toFill;
+                avail -= toFill;
+                this.filled += toFill;
+                if (this.filled == this._chunkSize) {
+                    this.outStream.write(this.bufs);
+                    this.sentFrames += this.filled;
+                    this.filled = 0;
+                }
+            }
+        }
+        return copied;
+    }
+    flush() {
+        if (this.filled > 0) {
+            let restBufs = new Array(this._channels);
+            for (let ch = 0; ch < this._channels; ch++) {
+                restBufs[ch] = this.bufs[ch].slice(0, this.filled);
+            }
+            this.outStream.write(restBufs);
+            this.outStream.flush();
+            this.sentFrames += this.filled;
+            this.filled = 0;
+        }
+    }
+    close() {
+        this.outStream.close();
+    }
+}
+
+// Code from audio_source_worklet.js as string constant to be loaded as module
+// Changes in audio_source_worklet.js must be copied and pasted to this string constant
+const aswpStr = "\n" +
+    "// Important note: Changes in audio_source_worklet.js must be copied and pasted to the string constant aswpStr in array_audio_buffer_source_node.ts\n" +
+    "\n" +
+    "\n" +
+    "class AudioSourceProcessor extends AudioWorkletProcessor{\n" +
+    "\n" +
+    "    filledFrames=0;\n" +
+    "    audioBuffers=new Array();\n" +
+    "    currentAudioBuffer=null;\n" +
+    "    currentAudioBufferFramePos=0;\n" +
+    "    currentAudioBufferAvail=0;\n" +
+    "    running=false;\n" +
+    "    ended=false;\n" +
+    "\n" +
+    "    constructor() {\n" +
+    "        super({numberOfInputs:0,numberOfOutputs:1});\n" +
+    "        this.port.onmessage=(msgEv)=>{\n" +
+    "          // received audio playback data from application\n" +
+    "          //console.debug(\"Audio source worklet msg: Received.\");\n" +
+    "\n" +
+    "          if(msgEv.data.cmd){\n" +
+    "            if('data'===msgEv.data.cmd) {\n" +
+    "              let chs = msgEv.data.chs;\n" +
+    "\n" +
+    "              let audioData = new Array(chs);\n" +
+    "              for (let ch = 0; ch < chs; ch++) {\n" +
+    "                audioData[ch] = new Float32Array(msgEv.data.audioData[ch]);\n" +
+    "              }\n" +
+    "              let msgChBufLen=audioData[0].length;\n" +
+    "              this.audioBuffers.push(audioData);\n" +
+    "              this.filledFrames += msgChBufLen;\n" +
+    "              //console.debug(\"Audio source worklet msg: Filled \" + this.filledFrames+ \" in \"+this.audioBuffers.length+\" buffers.\");\n" +
+    "\n" +
+    "            }else if('start'===msgEv.data.cmd){\n" +
+    "              this.running=true;\n" +
+    "            }else if('stop'===msgEv.data.cmd){\n" +
+    "              //console.debug(\"Stop...\");\n" +
+    "              this.running=false;\n" +
+    "              // clear buffers\n" +
+    "              this.filledFrames=0;\n" +
+    "              while(this.audioBuffers.length > 0) {\n" +
+    "                this.audioBuffers.pop();\n" +
+    "              }\n" +
+    "              this.currentAudioBuffer=new Float32Array(0);\n" +
+    "            }\n" +
+    "          }\n" +
+    "        }\n" +
+    "    }\n" +
+    "\n" +
+    " process(\n" +
+    "      inputs,\n" +
+    "      outputs,\n" +
+    "      parameters\n" +
+    "  ){\n" +
+    "      //console.debug(\"Audio source worklet: process \"+outputs.length+ \" output buffers.\");\n" +
+    "      // copy ring buffer data to outputs\n" +
+    "        if(!this.running){\n" +
+    "          return !this.ended;\n" +
+    "        }\n" +
+    "\n" +
+    "        let output=outputs[0];\n" +
+    "        let chs=output.length;\n" +
+    "        //console.debug(\"Audio source worklet: Output channels: \"+chs);\n" +
+    "        if(chs>0) {\n" +
+    "\n" +
+    "          let outCh0 = output[0];\n" +
+    "          let outChLen = outCh0.length;\n" +
+    "\n" +
+    "          if(!this.currentAudioBuffer){\n" +
+    "            // get first buffer\n" +
+    "            let nxtBuff=this.audioBuffers.shift();\n" +
+    "            if(nxtBuff) {\n" +
+    "              this.currentAudioBuffer = nxtBuff;\n" +
+    "              this.currentAudioBufferFramePos=0;\n" +
+    "              this.currentAudioBufferAvail=this.currentAudioBuffer[0].length;\n" +
+    "            }else{\n" +
+    "              return true;\n" +
+    "            }\n" +
+    "          }\n" +
+    "\n" +
+    "          let copied=0;\n" +
+    "          do{\n" +
+    "            if(this.currentAudioBufferAvail==0){\n" +
+    "              let nxtBuff=this.audioBuffers.shift();\n" +
+    "              if(nxtBuff){\n" +
+    "                this.currentAudioBuffer=nxtBuff;\n" +
+    "                this.currentAudioBufferFramePos=0;\n" +
+    "                this.currentAudioBufferAvail=this.currentAudioBuffer[0].length;\n" +
+    "                //console.debug(\"Next buffer with \"+this.currentAudioBufferAvail+ \" frames\");\n" +
+    "                this.port.postMessage({eventType:'bufferNotification',filledFrames:this.filledFrames});\n" +
+    "              }else{\n" +
+    "                this.ended=true;\n" +
+    "                this.port.postMessage({eventType:'ended'});\n" +
+    "                //console.debug(\"Stream ended\");\n" +
+    "                break;\n" +
+    "              }\n" +
+    "            }\n" +
+    "            //console.debug(\"outChLen: \"+outChLen+\", copied: \"+copied+\", current avail: \"+this.currentAudioBufferAvail);\n" +
+    "            let toCopy=outChLen-copied;\n" +
+    "            if(toCopy>this.currentAudioBufferAvail){\n" +
+    "              toCopy=this.currentAudioBufferAvail;\n" +
+    "            }\n" +
+    "            //console.debug(\"Copy \"+toCopy+\" frames...\");\n" +
+    "            for(let ch=0;ch<chs;ch++) {\n" +
+    "              let outCh=output[ch];\n" +
+    "              for (let i = 0; i < toCopy; i++) {\n" +
+    "                outCh[copied+i]=this.currentAudioBuffer[ch][this.currentAudioBufferFramePos+i];\n" +
+    "              }\n" +
+    "            }\n" +
+    "            copied+=toCopy;\n" +
+    "            this.currentAudioBufferFramePos+=toCopy;\n" +
+    "            this.currentAudioBufferAvail-=toCopy;\n" +
+    "\n" +
+    "          }while(copied<outChLen);\n" +
+    "          this.filledFrames-=copied;\n" +
+    "          //console.debug(\"Copied \"+copied+\" frames.\");\n" +
+    "        }\n" +
+    "     return !this.ended;\n" +
+    "  }\n" +
+    "}\n" +
+    "\n" +
+    "registerProcessor('audio-source-worklet',AudioSourceProcessor);\n";
+class ArrayAudioBufferSourceNode extends AudioWorkletNode {
+    constructor(context) {
+        super(context, 'audio-source-worklet');
+        this._bufferFillSeconds = ArrayAudioBufferSourceNode.DEFAULT_BUFFER_FILL_SECONDS;
+        this.bufferFillFrames = 0;
+        this._arrayAudioBuffer = null;
+        this._audioInputStream = null;
+        this._aisBufs = null;
+        this.filledFrames = 0;
+        this.onended = null;
+        this.channelCountMode = 'explicit';
+        this.port.onmessage = (msgEv) => {
+            var _a;
+            if (msgEv.data) {
+                let evType = msgEv.data.eventType;
+                if (evType) {
+                    if ('bufferNotification' === evType) {
+                        this.filledFrames = msgEv.data.filledFrames;
+                        //console.debug("Buffer notification: filled frames: " + this.filledFrames);
+                        this.fillBuffer();
+                    }
+                    else if ('ended' === evType) {
+                        let drainTime = 0;
+                        if ((_a = this._arrayAudioBuffer) === null || _a === void 0 ? void 0 : _a.sampleRate) {
+                            drainTime = ArrayAudioBufferSourceNode.QUANTUM_FRAME_LEN / this._arrayAudioBuffer.sampleRate;
+                        }
+                        //let dstAny:any=this.context.destination;
+                        //console.debug('Destination node tail-time: '+dstAny['tail-time']);
+                        window.setTimeout(() => {
+                            var _a;
+                            (_a = this.onended) === null || _a === void 0 ? void 0 : _a.call(this);
+                        }, drainTime * 1000);
+                    }
+                }
+            }
+        };
+    }
+    fillBuffer(frameOffset) {
+        if (this._arrayAudioBuffer && this._audioInputStream && this._aisBufs) {
+            let filled = this.filledFrames;
+            let bufLen = 0;
+            while (filled < this.bufferFillFrames) {
+                let read = this._audioInputStream.read(this._aisBufs);
+                //console.log("ArrayAudioBufferSourceNode: read: "+read)
+                if (read) {
+                    let trBuffers = new Array(this.channelCount);
+                    for (let ch = 0; ch < this.channelCount; ch++) {
+                        let adCh = this._aisBufs[ch];
+                        let adChCopy = new Float32Array(adCh.length);
+                        bufLen = adChCopy.length;
+                        adChCopy.set(adCh);
+                        trBuffers[ch] = adChCopy.buffer;
+                    }
+                    this.port.postMessage({
+                        cmd: 'data',
+                        chs: this.channelCount,
+                        audioData: trBuffers
+                    }, trBuffers);
+                    filled += read;
+                }
+                else {
+                    break;
+                }
+            }
+        }
+    }
+    get arrayAudioBuffer() {
+        return this._arrayAudioBuffer;
+    }
+    set arrayAudioBuffer(value) {
+        var _a, _b;
+        this._arrayAudioBuffer = value;
+        if ((_a = this._arrayAudioBuffer) === null || _a === void 0 ? void 0 : _a.channelCount) {
+            this.channelCount = (_b = this._arrayAudioBuffer) === null || _b === void 0 ? void 0 : _b.channelCount;
+            this.bufferFillFrames = this._arrayAudioBuffer.sampleRate * this._bufferFillSeconds;
+        }
+    }
+    get bufferFillSeconds() {
+        return this._bufferFillSeconds;
+    }
+    set bufferFillSeconds(value) {
+        this._bufferFillSeconds = value;
+    }
+    start(when, offset, duration) {
+        if (when) {
+            throw Error("when, offest,duration parameters currently not supported by ArrayAudioBufferSourceNode class");
+        }
+        if (this._arrayAudioBuffer) {
+            let arrAis = new ArrayAudioBufferInputStream(this._arrayAudioBuffer);
+            if (offset === undefined && duration === undefined) {
+                this._audioInputStream = arrAis;
+            }
+            else {
+                let offsetFrames = 0;
+                let durationFrames = undefined;
+                if (offset !== undefined) {
+                    offsetFrames = Math.floor(offset * this._arrayAudioBuffer.sampleRate);
+                }
+                if (duration !== undefined) {
+                    durationFrames = Math.floor(duration * this._arrayAudioBuffer.sampleRate);
+                }
+                this._audioInputStream = new EditFloat32ArrayInputStream(arrAis, offsetFrames, durationFrames);
+            }
+            let chs = this._arrayAudioBuffer.channelCount;
+            this._aisBufs = new Array(chs);
+            for (let ch = 0; ch < chs; ch++) {
+                this._aisBufs[ch] = new Float32Array(1024);
+            }
+            this.fillBuffer();
+            this.port.postMessage({ cmd: 'start' });
+        }
+    }
+    stop() {
+        var _a;
+        this.port.postMessage({ cmd: 'stop' });
+        (_a = this.onended) === null || _a === void 0 ? void 0 : _a.call(this);
+    }
+}
+ArrayAudioBufferSourceNode.QUANTUM_FRAME_LEN = 128;
+ArrayAudioBufferSourceNode.DEFAULT_BUFFER_FILL_SECONDS = 10;
+class AudioSourceWorkletModuleLoader {
+    static loadModule(context) {
+        return new Promise((resolve, reject) => {
+            if (AudioSourceWorkletModuleLoader.moduleLoaded) {
+                resolve.call(self);
+            }
+            else {
+                let audioWorkletModuleBlob = new Blob([aswpStr], { type: 'text/javascript' });
+                let audioWorkletModuleBlobUrl = window.URL.createObjectURL(audioWorkletModuleBlob);
+                context.resume();
+                context.audioWorklet.addModule(audioWorkletModuleBlobUrl).then(() => {
+                    AudioSourceWorkletModuleLoader.moduleLoaded = true;
+                    resolve.call(self);
+                }).catch((reason) => {
+                    console.error(reason);
+                    reject.call(reason);
+                });
+            }
+        });
+    }
+}
+AudioSourceWorkletModuleLoader.moduleLoaded = false;
+
 var EventType;
 (function (EventType) {
     EventType[EventType["CLOSED"] = 0] = "CLOSED";
@@ -135,10 +648,17 @@ class AudioPlayer {
         this.running = false;
         this._audioClip = null;
         this._audioBuffer = null;
+        this._arrayAudioBuffer = null;
         this.sourceBufferNode = null;
+        this.sourceAudioWorkletNode = null;
         this.playStartTime = null;
         this.timerVar = null;
         this.context = context;
+        // AudioSourceWorkletModuleLoader.loadModule(this.context).then(()=>{
+        //   console.debug("Audio source worklet module loaded.");
+        // }).catch((error: any)=>{
+        //   console.error('Could not add module '+error);
+        // });
         this.listener = listener;
         this.bufSize = AudioPlayer.DEFAULT_BUFSIZE;
         this.n = navigator;
@@ -169,17 +689,23 @@ class AudioPlayer {
         return this._stopAction;
     }
     set audioClip(audioClip) {
-        var length = 0;
-        var chs = 0;
-        if (audioClip && audioClip.buffer) {
-            chs = audioClip.buffer.numberOfChannels;
+        let length = 0;
+        let chs = 0;
+        if (audioClip && audioClip.audioDataHolder) {
+            let audioDataHolder = audioClip.audioDataHolder;
+            chs = audioDataHolder.numberOfChannels;
             if (chs > 0) {
-                length = audioClip.buffer.length;
+                length = audioDataHolder.frameLen;
                 if (chs > this.context.destination.maxChannelCount) {
                     // TODO exception
                 }
             }
-            this.audioBuffer = audioClip.buffer;
+            if (audioDataHolder.buffer) {
+                this.audioBuffer = audioDataHolder.buffer;
+            }
+            if (audioDataHolder.arrayBuffer) {
+                this.arrayAudioBuffer = audioDataHolder.arrayBuffer;
+            }
             audioClip.addSelectionObserver((ac) => {
                 this._startSelectionAction.disabled = this.startSelectionDisabled();
                 if (!this.startSelectionAction.disabled && this._autoPlayOnSelectToggleAction.value) {
@@ -189,12 +715,14 @@ class AudioPlayer {
         }
         else {
             this.audioBuffer = null;
+            //this.arrayAudioBuffer=null;
         }
         this._audioClip = audioClip;
     }
     set audioBuffer(audioBuffer) {
         this.stop();
         this._audioBuffer = audioBuffer;
+        this._arrayAudioBuffer = null;
         if (audioBuffer && this.context) {
             this._startAction.disabled = false;
             this._startSelectionAction.disabled = this.startSelectionDisabled();
@@ -213,23 +741,86 @@ class AudioPlayer {
     get audioBuffer() {
         return this._audioBuffer;
     }
-    start() {
-        if (!this._startAction.disabled && !this.running) {
-            this.context.resume();
-            this.sourceBufferNode = this.context.createBufferSource();
-            this.sourceBufferNode.buffer = this._audioBuffer;
-            this.sourceBufferNode.connect(this.context.destination);
-            this.sourceBufferNode.onended = () => this.onended();
-            this.playStartTime = this.context.currentTime;
-            this.running = true;
-            this.sourceBufferNode.start();
-            this.playStartTime = this.context.currentTime;
+    set arrayAudioBuffer(arrayAudioBuffer) {
+        this.stop();
+        this._audioBuffer = null;
+        this._arrayAudioBuffer = arrayAudioBuffer;
+        if (arrayAudioBuffer && this.context) {
+            AudioSourceWorkletModuleLoader.loadModule(this.context).then(() => {
+                this._startAction.disabled = false;
+                this._startSelectionAction.disabled = this.startSelectionDisabled();
+                if (this.listener) {
+                    this.listener.audioPlayerUpdate(new AudioPlayerEvent(EventType.READY));
+                }
+            }).catch((error) => {
+                this._startAction.disabled = true;
+                this._startSelectionAction.disabled = true;
+                if (this.listener) {
+                    this.listener.audioPlayerUpdate(new AudioPlayerEvent(EventType.CLOSED));
+                }
+                console.error('Could not add module ' + error);
+            });
+        }
+        else {
             this._startAction.disabled = true;
             this._startSelectionAction.disabled = true;
-            this._stopAction.disabled = false;
-            //this.timerVar = window.setInterval((e)=>this.updatePlayPosition(), 200);
             if (this.listener) {
-                this.listener.audioPlayerUpdate(new AudioPlayerEvent(EventType.STARTED));
+                this.listener.audioPlayerUpdate(new AudioPlayerEvent(EventType.CLOSED));
+            }
+        }
+    }
+    get arrayAudioBuffer() {
+        return this._arrayAudioBuffer;
+    }
+    start() {
+        if (!this._startAction.disabled && !this.running) {
+            this.context.resume();
+            if (this._audioBuffer) {
+                this.sourceBufferNode = this.context.createBufferSource();
+                this.sourceBufferNode.buffer = this._audioBuffer;
+                this.sourceBufferNode.connect(this.context.destination);
+                this.sourceBufferNode.onended = () => this.onended();
+                this.playStartTime = this.context.currentTime;
+                this.running = true;
+                this.sourceBufferNode.start();
+                this.playStartTime = this.context.currentTime;
+                this._startAction.disabled = true;
+                this._startSelectionAction.disabled = true;
+                this._stopAction.disabled = false;
+                //this.timerVar = window.setInterval((e)=>this.updatePlayPosition(), 200);
+                if (this.listener) {
+                    this.listener.audioPlayerUpdate(new AudioPlayerEvent(EventType.STARTED));
+                }
+            }
+            else if (this._arrayAudioBuffer) {
+                if (this._arrayAudioBuffer) {
+                    this.sourceAudioWorkletNode = new ArrayAudioBufferSourceNode(this.context);
+                    this.sourceAudioWorkletNode.onprocessorerror = (ev) => {
+                        let msg = 'Unknwon error';
+                        if (ev instanceof ErrorEvent) {
+                            msg = ev.message;
+                        }
+                        console.error("Audio source worklet error: " + msg);
+                        if (this.listener) {
+                            // TODO
+                            // this.listener.error(msg);
+                            // this.listener.audioPlayerUpdate(new AudioPlayerEvent());
+                        }
+                    };
+                    this.sourceAudioWorkletNode.arrayAudioBuffer = this._arrayAudioBuffer;
+                    this.sourceAudioWorkletNode.connect(this.context.destination); // this already starts playing
+                    this.sourceAudioWorkletNode.onended = () => this.onended();
+                    this.playStartTime = this.context.currentTime;
+                    this.running = true;
+                    this.sourceAudioWorkletNode.start();
+                    this.playStartTime = this.context.currentTime;
+                    this._startAction.disabled = true;
+                    this._startSelectionAction.disabled = true;
+                    this._stopAction.disabled = false;
+                    if (this.listener) {
+                        this.listener.audioPlayerUpdate(new AudioPlayerEvent(EventType.STARTED));
+                    }
+                }
             }
         }
     }
@@ -239,34 +830,79 @@ class AudioPlayer {
     startSelected() {
         if (!this._startAction.disabled && !this.running) {
             this.context.resume();
-            this.sourceBufferNode = this.context.createBufferSource();
-            this.sourceBufferNode.buffer = this._audioBuffer;
-            this.sourceBufferNode.connect(this.context.destination);
-            this.sourceBufferNode.onended = () => this.onended();
-            this.playStartTime = this.context.currentTime;
-            this.running = true;
-            // unfortunately Web Audio API uses time values not frames
-            let ac = this._audioClip;
-            let offset = 0;
-            if (ac && ac.selection) {
-                let s = ac.selection;
-                let sr = ac.buffer.sampleRate;
-                offset = s.leftFrame / sr;
-                let stopPosInsecs = s.rightFrame / sr;
-                let dur = stopPosInsecs - offset;
-                // TODO check valid values
-                this.sourceBufferNode.start(0, offset, dur);
-            }
-            else {
-                this.sourceBufferNode.start();
-            }
-            this.playStartTime = this.context.currentTime - offset;
-            this._startAction.disabled = true;
-            this._startSelectionAction.disabled = true;
-            this._stopAction.disabled = false;
-            //this.timerVar = window.setInterval((e)=>this.updatePlayPosition(), 200);
-            if (this.listener) {
-                this.listener.audioPlayerUpdate(new AudioPlayerEvent(EventType.STARTED));
+            if (this._audioBuffer) {
+                this.sourceBufferNode = this.context.createBufferSource();
+                this.sourceBufferNode.buffer = this._audioBuffer;
+                this.sourceBufferNode.connect(this.context.destination);
+                this.sourceBufferNode.onended = () => this.onended();
+                this.playStartTime = this.context.currentTime;
+                this.running = true;
+                // unfortunately Web Audio API uses time values not frames
+                let ac = this._audioClip;
+                let offset = 0;
+                if (ac && ac.selection) {
+                    let s = ac.selection;
+                    let sr = ac.audioDataHolder.sampleRate;
+                    offset = s.leftFrame / sr;
+                    let stopPosInsecs = s.rightFrame / sr;
+                    let dur = stopPosInsecs - offset;
+                    // TODO check valid values
+                    this.sourceBufferNode.start(0, offset, dur);
+                }
+                else {
+                    this.sourceBufferNode.start();
+                }
+                this.playStartTime = this.context.currentTime - offset;
+                this._startAction.disabled = true;
+                this._startSelectionAction.disabled = true;
+                this._stopAction.disabled = false;
+                //this.timerVar = window.setInterval((e)=>this.updatePlayPosition(), 200);
+                if (this.listener) {
+                    this.listener.audioPlayerUpdate(new AudioPlayerEvent(EventType.STARTED));
+                }
+            }
+            else if (this._arrayAudioBuffer) {
+                if (this._arrayAudioBuffer) {
+                    let aabsn = new ArrayAudioBufferSourceNode(this.context);
+                    this.sourceAudioWorkletNode = aabsn;
+                    aabsn.onprocessorerror = (ev) => {
+                        let msg = 'Unknwon error';
+                        if (ev instanceof ErrorEvent) {
+                            msg = ev.message;
+                        }
+                        console.error("Audio source worklet error: " + msg);
+                        if (this.listener) {
+                            // TODO
+                            // this.listener.error(msg);
+                            // this.listener.audioPlayerUpdate(new AudioPlayerEvent());
+                        }
+                    };
+                    aabsn.arrayAudioBuffer = this._arrayAudioBuffer;
+                    aabsn.connect(this.context.destination); // this already starts playing
+                    aabsn.onended = () => this.onended();
+                    this.playStartTime = this.context.currentTime;
+                    this.running = true;
+                    let ac = this._audioClip;
+                    let offset = 0;
+                    if (ac && ac.selection) {
+                        let s = ac.selection;
+                        let sr = ac.audioDataHolder.sampleRate;
+                        offset = s.leftFrame / sr;
+                        let stopPosInsecs = s.rightFrame / sr;
+                        let dur = stopPosInsecs - offset;
+                        aabsn.start(0, offset, dur);
+                    }
+                    else {
+                        aabsn.start();
+                    }
+                    this.playStartTime = this.context.currentTime - offset;
+                    this._startAction.disabled = true;
+                    this._startSelectionAction.disabled = true;
+                    this._stopAction.disabled = false;
+                    if (this.listener) {
+                        this.listener.audioPlayerUpdate(new AudioPlayerEvent(EventType.STARTED));
+                    }
+                }
             }
         }
     }
@@ -275,6 +911,9 @@ class AudioPlayer {
             if (this.sourceBufferNode) {
                 this.sourceBufferNode.stop();
             }
+            if (this.sourceAudioWorkletNode) {
+                this.sourceAudioWorkletNode.stop();
+            }
             if (this.timerVar !== null) {
                 window.clearInterval(this.timerVar);
             }
@@ -288,7 +927,7 @@ class AudioPlayer {
         if (this.timerVar != null) {
             window.clearInterval(this.timerVar);
         }
-        this._startAction.disabled = !(this.audioBuffer);
+        this._startAction.disabled = !(this.audioBuffer || this.arrayAudioBuffer);
         this._startSelectionAction.disabled = this.startSelectionDisabled();
         this._stopAction.disabled = true;
         this.running = false;
@@ -305,10 +944,17 @@ class AudioPlayer {
     }
     get playPositionFrames() {
         let ppFrs = null;
+        let sr = null;
         if (this._audioBuffer) {
+            sr = this._audioBuffer.sampleRate;
+        }
+        else if (this._arrayAudioBuffer) {
+            sr = this._arrayAudioBuffer.sampleRate;
+        }
+        if (sr) {
             let ppTime = this.playPositionTime;
             if (ppTime !== null) {
-                ppFrs = this._audioBuffer.sampleRate * ppTime;
+                ppFrs = sr * ppTime;
             }
         }
         return ppFrs;
@@ -522,6 +1168,107 @@ class ProjectUtil {
 }
 ProjectUtil.DEFAULT_AUDIO_CHANNEL_COUNT = 2;
 
+class ArrayAudioBuffer {
+    constructor(_channelCount, _sampleRate, _data) {
+        this._channelCount = _channelCount;
+        this._sampleRate = _sampleRate;
+        this._data = _data;
+        this._chunkCount = 0;
+        this._frameLen = 0;
+        if (this._data.length > 0) {
+            let ch0Data = this.data[0];
+            for (let ch0Chk of ch0Data) {
+                this._chunkCount++;
+                this._frameLen += ch0Chk.length;
+            }
+        }
+    }
+    static fromAudioBuffer(audioBuffer, chunkFrameSize = 8192) {
+        let aab;
+        let chs = audioBuffer.numberOfChannels;
+        let frameLength = audioBuffer.length;
+        //let chunksSize=Math.ceil(frameLength/chunkFrameSize);
+        let framePos = 0;
+        let data = new Array(chs);
+        for (let ch = 0; ch < chs; ch++) {
+            data[ch] = new Array();
+        }
+        let toCopy = frameLength - framePos;
+        while (toCopy > 0) {
+            let toCopyChunk = chunkFrameSize;
+            if (toCopyChunk > toCopy) {
+                // last chunk, the rest
+                toCopyChunk = toCopy;
+            }
+            for (let ch = 0; ch < chs; ch++) {
+                data[ch].push(audioBuffer.getChannelData(ch).slice(framePos, framePos + toCopyChunk));
+            }
+            framePos += toCopyChunk;
+            toCopy -= toCopyChunk;
+        }
+        aab = new ArrayAudioBuffer(chs, audioBuffer.sampleRate, data);
+        return aab;
+    }
+    get channelCount() {
+        return this._channelCount;
+    }
+    frames(framePos, frameLen, bufs) {
+        let ccFramePos = 0;
+        let trgFramePos = framePos;
+        let ch0Data = this.data[0];
+        let cPos = 0;
+        let filled = 0;
+        let ci = 0;
+        while (filled < frameLen && ci < this._chunkCount) {
+            // Current chunk
+            let cc0 = ch0Data[ci];
+            let ccLen = cc0.length;
+            let ccFrameEndPos = ccFramePos + ccLen;
+            if (trgFramePos >= ccFramePos && trgFramePos < ccFrameEndPos) {
+                let toCp = frameLen - filled;
+                cPos = trgFramePos - ccFramePos;
+                if (cPos + toCp > ccLen) {
+                    toCp = ccLen - cPos;
+                }
+                for (let ch = 0; ch < bufs.length; ch++) {
+                    let cc = this.data[ch][ci];
+                    for (let i = 0; i < toCp; i++) {
+                        bufs[ch][filled + i] = cc[cPos + i];
+                    }
+                }
+                filled += toCp;
+                trgFramePos += toCp;
+                cPos += toCp;
+                ccFramePos += toCp;
+                if (cPos >= ccLen) {
+                    ccFramePos = ccFrameEndPos;
+                    cPos = 0;
+                    ci++;
+                }
+            }
+            else {
+                // next chunk
+                ccFramePos = ccFrameEndPos;
+                cPos = 0;
+                ci++;
+            }
+        }
+        return filled;
+    }
+    get sampleRate() {
+        return this._sampleRate;
+    }
+    get frameLen() {
+        return this._frameLen;
+    }
+    get chunkCount() {
+        return this._chunkCount;
+    }
+    get data() {
+        return this._data;
+    }
+}
+
 const CHROME_ACTIVATE_ECHO_CANCELLATION_WITH_AGC = false;
 const DEBUG_TRACE_LEVEL = 0;
 const ENABLE_AUDIO_WORKLET = true;
@@ -1092,6 +1839,10 @@ class AudioCapture {
         }
         return ab;
     }
+    audioBufferArray() {
+        let aba = new ArrayAudioBuffer(this.channelCount, this.currentSampleRate, this.data);
+        return aba;
+    }
 }
 AudioCapture.BUFFER_SIZE = 8192;
 
@@ -1471,21 +2222,28 @@ class RecordingFileDescriptorImpl {
     constructor() { }
 }
 class RecordingFile {
-    constructor(uuid, sessionId, audioBuffer) {
+    constructor(uuid, sessionId, audioDataHolder) {
         this.recordingFileId = null;
         this.uuid = null;
+        this.serverPersisted = false;
+        this.keepAudioDataCache = false;
         this.date = null;
         this._dateAsDateObj = null;
         this.startedDate = null;
         this._startedAsDateObj = null;
-        this.audioBuffer = null;
+        this.audioDataHolder = null;
         this.session = null;
         this.frames = null;
+        this.timeLength = null;
         this.editSampleRate = null;
         this.editStartFrame = null;
         this.editEndFrame = null;
         this.session = sessionId;
-        this.audioBuffer = audioBuffer;
+        this.audioDataHolder = audioDataHolder;
+        if (audioDataHolder) {
+            this.frames = audioDataHolder.frameLen;
+            this.timeLength = audioDataHolder.duration;
+        }
         this.uuid = uuid;
     }
     filenameString() {
@@ -1497,14 +2255,27 @@ class RecordingFile {
         fns += this.uuid;
         return fns;
     }
+    equals(otherRecordingFile) {
+        if (otherRecordingFile !== null) {
+            if (otherRecordingFile === this) {
+                return true;
+            }
+            if (otherRecordingFile.uuid === this.uuid) {
+                return true;
+            }
+        }
+        return false;
+    }
+    toString() {
+        return 'Recording file: UUID: ' + this.uuid + ', session: ' + this.session;
+    }
 }
 class SprRecordingFile extends RecordingFile {
-    constructor(sessionId, itemcode, version, audioBuffer) {
-        super(UUID.generate(), sessionId, audioBuffer);
+    constructor(sessionId, itemcode, version, audioDataHolder) {
+        super(UUID.generate(), sessionId, audioDataHolder);
         this.session = sessionId;
         this.itemCode = itemcode;
         this.version = version;
-        this.audioBuffer = audioBuffer;
     }
     filenameString() {
         let fns = '';
@@ -1519,6 +2290,42 @@ class SprRecordingFile extends RecordingFile {
         fns += this.uuid;
         return fns;
     }
+    toString() {
+        return 'Recording file: UUID: ' + this.uuid + ', session: ' + this.session + ', itemcode: ' + this.itemCode + ', version: ' + this.version + ', UUID: ' + this.uuid;
+    }
+}
+class RecordingFileUtils {
+    static equals(recordinFile, otherRecordingFile) {
+        if (recordinFile && otherRecordingFile) {
+            if (otherRecordingFile === recordinFile) {
+                return true;
+            }
+            if (otherRecordingFile.uuid === recordinFile.uuid) {
+                return true;
+            }
+        }
+        return false;
+    }
+    static setAudioData(rf, audioDataHolder) {
+        rf.audioDataHolder = audioDataHolder;
+        if (audioDataHolder) {
+            rf.frames = audioDataHolder.frameLen;
+            rf.timeLength = audioDataHolder.duration;
+        }
+    }
+    static sampleCount(rf) {
+        if (rf.audioDataHolder) {
+            return rf.audioDataHolder.sampleCounts();
+        }
+        else {
+            return 0;
+        }
+    }
+    static expireAudioData(rf) {
+        let rv = rf.audioDataHolder;
+        rf.audioDataHolder = null;
+        return rv;
+    }
 }
 
 // state of an upload
@@ -1569,7 +2376,8 @@ class UploaderStatusChangeEvent {
     }
 }
 class Upload {
-    constructor(blob, url) {
+    constructor(blob, url, serverPersistable = null) {
+        this.serverPersistable = serverPersistable;
         this.toString = () => {
             let s = `Upload: Status: ${this.status}, URL: ${this._url}`;
             if (this._data instanceof Blob) {
@@ -1590,6 +2398,17 @@ class Upload {
     get data() {
         return this._data;
     }
+    done() {
+        this.status = UploadStatus$1.DONE;
+        //console.debug("Single upload done.");
+        if (this.serverPersistable) {
+            this.serverPersistable.serverPersisted = true;
+            //console.debug("Single upload set server persisted: "+this.serverPersistable);
+        }
+        else {
+            //console.debug("Server persistable not set.");
+        }
+    }
 }
 class Uploader {
     constructor(http, withCredentials = false) {
@@ -1628,7 +2447,7 @@ class Uploader {
         return si;
     }
     uploadDone(ul) {
-        ul.status = UploadStatus$1.DONE;
+        ul.done();
         // remove upload from queue
         for (let i = 0; i < this.que.length; i++) {
             if (this.que[i] === ul) {
@@ -2063,15 +2882,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         }], ctorParameters: function () { return []; } });
 
 class AudioClip {
-    constructor(buffer) {
+    constructor(_audioDataHolder) {
+        this._audioDataHolder = _audioDataHolder;
         this._selection = null;
+        this._levelInfos = null;
         this.selectionObservers = new Array();
-        this._buffer = buffer;
     }
-    get buffer() {
-        return this._buffer;
+    get audioDataHolder() {
+        return this._audioDataHolder;
     }
-    ;
     get selection() {
         return this._selection;
     }
@@ -2086,6 +2905,12 @@ class AudioClip {
             selObs(this);
         }
     }
+    get levelInfos() {
+        return this._levelInfos;
+    }
+    set levelInfos(value) {
+        this._levelInfos = value;
+    }
     addSelectionObserver(selectionObserver, init = false) {
         let obsAlreadyInList = this.selectionObservers.find((obs) => (obs === selectionObserver));
         if (!obsAlreadyInList) {
@@ -2168,19 +2993,32 @@ class ViewSelection {
 class BasicAudioCanvasLayerComponent extends CanvasLayerComponent {
     constructor() {
         super(...arguments);
-        this._audioData = null;
+        //protected _audioData: AudioBuffer|null=null;
+        //protected _arrayAudioData: ArrayAudioBuffer|null=null;
+        this._audioDataHolder = null;
         this._bgColor = 'white';
         this._selectColor = 'rgba(0%,0%,100%,25%)';
     }
+    frameLength() {
+        let frameLength = null;
+        // if (this._audioData && this._audioData.numberOfChannels > 0) {
+        //   let ch0 = this._audioData.getChannelData(0);
+        //   frameLength = ch0.length;
+        //
+        // }else if(this._arrayAudioData){
+        //   frameLength=this._arrayAudioData.frameLen;
+        // }
+        return frameLength;
+    }
     /**
      * Returns pixel position depending on current zoom setting.
      * @param framePos audio frame (sample) position
      */
     frameToXPixelPosition(framePos) {
+        var _a;
         let pixelPos = null;
-        if (this._audioData && this._audioData.numberOfChannels > 0) {
-            let ch0 = this._audioData.getChannelData(0);
-            let frameLength = ch0.length;
+        let frameLength = (_a = this._audioDataHolder) === null || _a === void 0 ? void 0 : _a.frameLen;
+        if (frameLength !== undefined) {
             let vw;
             if (this.bounds) {
                 vw = this.bounds.dimension.width;
@@ -2209,10 +3047,10 @@ class BasicAudioCanvasLayerComponent extends CanvasLayerComponent {
         }
     }
     viewPortXPixelToFramePosition(xViewPortPixelPos) {
+        var _a;
         let vpXramePos = null;
-        if (this._audioData && this._audioData.numberOfChannels > 0) {
-            let ch0 = this._audioData.getChannelData(0);
-            let frameLength = ch0.length;
+        let frameLength = (_a = this._audioDataHolder) === null || _a === void 0 ? void 0 : _a.frameLen;
+        if (frameLength !== undefined) {
             let vw;
             if (this.bounds) {
                 vw = this.bounds.dimension.width;
@@ -2389,8 +3227,8 @@ class AudioCanvasLayerComponent extends BasicAudioCanvasLayerComponent {
         if (viewSel) {
             let frameStart = this.viewPortXPixelToFramePosition(viewSel.startX);
             let frameEnd = this.viewPortXPixelToFramePosition(viewSel.endX);
-            if (this._audioData && frameStart != null && frameEnd != null) {
-                ns = new Selection(this._audioData.sampleRate, frameStart, frameEnd);
+            if (this._audioDataHolder && frameStart != null && frameEnd != null) {
+                ns = new Selection(this._audioDataHolder.sampleRate, frameStart, frameEnd);
             }
         }
         this.selectingEventEmitter.emit(ns);
@@ -2400,8 +3238,8 @@ class AudioCanvasLayerComponent extends BasicAudioCanvasLayerComponent {
         if (viewSel) {
             let frameStart = this.viewPortXPixelToFramePosition(viewSel.startX);
             let frameEnd = this.viewPortXPixelToFramePosition(viewSel.endX);
-            if (this._audioData && frameStart != null && frameEnd != null) {
-                ns = new Selection(this._audioData.sampleRate, frameStart, frameEnd);
+            if (this._audioDataHolder && frameStart != null && frameEnd != null) {
+                ns = new Selection(this._audioDataHolder.sampleRate, frameStart, frameEnd);
             }
         }
         this.selectedEventEmitter.emit(ns);
@@ -2482,7 +3320,7 @@ class AudioCanvasLayerComponent extends BasicAudioCanvasLayerComponent {
                             g.lineTo(xViewPortPixelpos, h);
                             g.closePath();
                             g.stroke();
-                            if (this._audioData) {
+                            if (this._audioDataHolder) {
                                 g.font = '14px sans-serif';
                                 g.fillStyle = 'yellow';
                                 g.fillText(framePos.toString(), xViewPortPixelpos + 2, 50);
@@ -2494,6 +3332,7 @@ class AudioCanvasLayerComponent extends BasicAudioCanvasLayerComponent {
         }
     }
 }
+AudioCanvasLayerComponent.ENABLE_STREAMING_NUMBER_OF_SAMPLES_THRESHOLD = 10 * 60 * 48000; // Use streaming/chunking if audio clip has more than this number of samples
 AudioCanvasLayerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AudioCanvasLayerComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
 AudioCanvasLayerComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: AudioCanvasLayerComponent, inputs: { pointerPosition: "pointerPosition", selecting: "selecting", selection: "selection" }, outputs: { pointerPositionEventEmitter: "pointerPositionEventEmitter", selectingEventEmitter: "selectingEventEmitter", selectedEventEmitter: "selectedEventEmitter" }, host: { listeners: { "document:mouseup": "onMouseup($event)" } }, viewQueries: [{ propertyName: "bgCanvasRef", first: true, predicate: ["bg"], descendants: true, static: true }, { propertyName: "cursorCanvasRef", first: true, predicate: ["cursor"], descendants: true, static: true }], usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AudioCanvasLayerComponent, decorators: [{
@@ -2528,7 +3367,7 @@ class AudioSignal extends AudioCanvasLayerComponent {
         this._playFramePosition = null;
         this.worker = null;
         this.workerURL = WorkerHelper.buildWorkerBlobURL(this.workerFunction);
-        this._audioData = null;
+        this._audioDataHolder = null;
         this._bgColor = 'black';
         this._selectColor = 'rgba(255,255,0,0.8)';
     }
@@ -2581,25 +3420,26 @@ class AudioSignal extends AudioCanvasLayerComponent {
      */
     workerFunction() {
         addEventListener('message', ({ data }) => {
-            let audioData = data.audioData;
-            let l = data.l;
-            let w = data.w;
-            let h = data.h;
-            let vw = data.vw;
-            let chs = data.chs;
-            let frameLength = data.frameLength;
+            let audioData = data.audioData; // audio data part required to render view port
+            let auOffset = data.audioDataOffset;
+            let l = data.l; // left pixel position of view port
+            let w = data.w; // width of viewport
+            let vw = data.vw; //  total width of (virtual) audio view (not viewport width)
+            let chs = data.chs; // number of channels
+            let dataFrameLength = data.audioDataFrameLength; // frame length of audio data part required for view port
+            let frameLength = data.frameLength; // total frame length (of audio clip)
+            //console.debug("W: left: "+l+", w:"+w+", vw: "+vw+", chs: "+chs+", frameLength: "+frameLength);
             let psMinMax = new Float32Array(0);
-            if (audioData && w >= 0 && vw > 0) {
+            if (audioData && audioData.length > 0 && w >= 0 && vw > 0) {
                 let framesPerPixel = frameLength / vw;
-                let y = 0;
                 let pointsLen = w * chs;
                 // one for min one for max
                 let arrLen = pointsLen * 2;
                 psMinMax = new Float32Array(arrLen);
                 let chFramePos = 0;
+                let chFrameLength = audioData.length / chs;
                 for (let ch = 0; ch < chs; ch++) {
-                    let x = 0;
-                    chFramePos = ch * frameLength;
+                    chFramePos = ch * chFrameLength;
                     for (let pii = 0; pii < w; pii++) {
                         let virtPii = l + pii;
                         let pMin = Infinity;
@@ -2609,24 +3449,28 @@ class AudioSignal extends AudioCanvasLayerComponent {
                         for (let ai = 0; ai < framesPerPixel; ai++) {
                             let framePos = pixelFramePos + ai;
                             let a = 0;
-                            if (framePos >= 0 && framePos < audioData.length) {
-                                a = audioData[framePos];
-                            }
-                            if (a < pMin) {
-                                pMin = a;
-                            }
-                            if (a > pMax) {
-                                pMax = a;
+                            let bufPos = framePos - auOffset;
+                            //let bufPos=framePos;
+                            if (bufPos >= 0 && bufPos < audioData.length) {
+                                a = audioData[bufPos];
+                                //console.debug("W: ch: "+ch+", pixelFramePos: "+pixelFramePos+", framePos: "+framePos+", auOffset: "+auOffset+", bufPos: "+bufPos+", audioData.length: "+audioData.length+", a: "+a);
+                                if (a < pMin) {
+                                    pMin = a;
+                                }
+                                if (a > pMax) {
+                                    pMax = a;
+                                }
                             }
                         }
                         let psMinPos = ch * w + pii;
                         psMinMax[psMinPos] = pMin;
                         let psMaxPos = pointsLen + psMinPos;
                         psMinMax[psMaxPos] = pMax;
+                        //console.debug("psMinMax["+psMinPos+"]="+pMin+",psMinMax["+psMaxPos+"]="+pMax);
                     }
                 }
             }
-            postMessage({ psMinMax: psMinMax, l: data.l, t: data.t, w: data.w, h: data.h, chs: data.chs }, [psMinMax.buffer]);
+            postMessage({ psMinMax: psMinMax, l: data.l, w: data.w, chs: data.chs, eod: data.eod }, [psMinMax.buffer]);
         });
     }
     startDraw(clear = true) {
@@ -2654,41 +3498,143 @@ class AudioSignal extends AudioCanvasLayerComponent {
         if (this.bounds && this.bounds.dimension) {
             let w = Math.round(this.bounds.dimension.width);
             let h = Math.round(this.bounds.dimension.height);
-            if (this._audioData && w > 0 && h > 0) {
+            if (this._audioDataHolder && w > 0 && h > 0) {
                 //this.wo = new Worker('./audiosignal.worker.js',{type: 'module'});
                 this.worker = new Worker(this.workerURL);
                 //this.wo = new Worker('worker/audiosignal.worker.ts');
                 //let Worker = require('worker!../../../workers/uploader/main');
-                let chs = this._audioData.numberOfChannels;
-                let frameLength = this._audioData.getChannelData(0).length;
-                // if(frameLength != this.audioData.getChannelData(1).length){
-                //   alert("Ungleiche Länge");
-                // }
-                let ad = new Float32Array(chs * frameLength);
-                for (let ch = 0; ch < chs; ch++) {
-                    ad.set(this._audioData.getChannelData(ch), ch * frameLength);
-                }
-                //let start = Date.now();
+                let chs = this._audioDataHolder.numberOfChannels;
+                let leftPos = Math.round(this.bounds.position.left);
+                let renderPos = leftPos;
+                let vw = Math.round(this.virtualDimension.width);
+                let frameLength = this._audioDataHolder.frameLen;
+                let framesPerPixel = Math.ceil(frameLength / vw);
+                let audioBuffer = this._audioDataHolder.buffer;
+                //let arrayAudioBuffer=this._audioDataHolder.arrayBuffer;
+                let arrAbBuf;
+                //let ais:ArrayAudioBufferInputStream|null=null;
+                //let aisBuf:Float32Array[]|null=null;
+                let psMinMax = null;
                 if (this.worker) {
                     this.worker.onmessage = (me) => {
-                        //console.log("As rendertime: ", Date.now() - start);
-                        this.drawRendered(me);
-                        if (this.worker) {
-                            this.worker.terminate();
+                        if (me.data.eod === true) {
+                            let psMinMaxTmp;
+                            if (psMinMax) {
+                                psMinMaxTmp = psMinMax;
+                            }
+                            else {
+                                psMinMaxTmp = me.data.psMinMax;
+                            }
+                            this.drawRendered(leftPos, w, h, chs, psMinMaxTmp);
+                            if (this.worker) {
+                                this.worker.terminate();
+                            }
+                            this.worker = null;
+                        }
+                        else if (this._audioDataHolder && arrAbBuf) {
+                            let rw = me.data.w;
+                            let rPointsLen = chs * rw;
+                            let pointsLen = chs * w;
+                            for (let ch = 0; ch < chs; ch++) {
+                                if (psMinMax) {
+                                    let rBasePos = ch * rw;
+                                    let basePos = ch * w;
+                                    let rPosMin = rBasePos;
+                                    let rPosMax = rPointsLen + rPosMin;
+                                    let posMin = basePos + (renderPos - leftPos);
+                                    let posMax = pointsLen + posMin;
+                                    psMinMax[posMin] = me.data.psMinMax[rPosMin];
+                                    //console.debug('Min: ('+pos+'): '+me.data.psMinMax[0]);
+                                    psMinMax[posMax] = me.data.psMinMax[rPosMax];
+                                    // console.debug('Max: ('+(pointsLen+pos)+'): '+me.data.psMinMax[1]);
+                                    //console.debug("psMinMax["+posMin+"]="+me.data.psMinMax[rPosMin]+"  (rPosMin="+rPosMin+"),psMinMax["+posMax+"]="+me.data.psMinMax[rPosMax]);
+                                }
+                            }
+                            let eod = false;
+                            renderPos++;
+                            let ad;
+                            let leftFramePos = Math.floor(frameLength * renderPos / vw);
+                            if (renderPos < leftPos + w) {
+                                let read = this._audioDataHolder.frames(leftFramePos, framesPerPixel, arrAbBuf);
+                                //console.debug("First read frame: "+arrAbBuf[0][0]);
+                                ad = new Float32Array(chs * framesPerPixel);
+                                for (let ch = 0; ch < chs; ch++) {
+                                    ad.set(arrAbBuf[ch], ch * framesPerPixel);
+                                }
+                                eod = (read <= 0);
+                            }
+                            else {
+                                ad = new Float32Array();
+                                eod = true;
+                            }
+                            let adBuf = ad.buffer;
+                            if (this.worker) {
+                                this.worker.postMessage({
+                                    l: renderPos,
+                                    w: me.data.w,
+                                    h: h,
+                                    vw: vw,
+                                    chs: chs,
+                                    frameLength: frameLength,
+                                    audioData: ad,
+                                    audioDataOffset: leftFramePos,
+                                    eod: eod
+                                }, [adBuf]);
+                            }
                         }
-                        this.worker = null;
                     };
                 }
-                this.worker.postMessage({
-                    l: Math.round(this.bounds.position.left),
-                    t: Math.round(this.bounds.position.top),
-                    w: w,
-                    h: h,
-                    vw: Math.round(this.virtualDimension.width),
-                    chs: chs,
-                    frameLength: frameLength,
-                    audioData: ad
-                }, [ad.buffer]);
+                if (audioBuffer && audioBuffer.length * audioBuffer.numberOfChannels < AudioCanvasLayerComponent.ENABLE_STREAMING_NUMBER_OF_SAMPLES_THRESHOLD) {
+                    // Render whole clip at once
+                    arrAbBuf = null;
+                    psMinMax = null;
+                    let ad = new Float32Array(chs * frameLength);
+                    for (let ch = 0; ch < chs; ch++) {
+                        ad.set(audioBuffer.getChannelData(ch), ch * frameLength);
+                    }
+                    this.worker.postMessage({
+                        l: leftPos,
+                        w: w,
+                        vw: vw,
+                        chs: chs,
+                        frameLength: frameLength,
+                        audioData: ad,
+                        audioDataOffset: 0,
+                        eod: true
+                    }, [ad.buffer]);
+                }
+                else {
+                    // Render pixel by pixel
+                    if (w > 0) {
+                        if (framesPerPixel > 0) {
+                            let rw = 1;
+                            //ais = new ArrayAudioBufferInputStream(arrayAudioBuffer);
+                            arrAbBuf = new Array(chs);
+                            psMinMax = new Float32Array(chs * w * 2);
+                            for (let ch = 0; ch < chs; ch++) {
+                                arrAbBuf[ch] = new Float32Array(framesPerPixel);
+                            }
+                            let leftFramePos = Math.floor(frameLength * renderPos / vw);
+                            let auOffset = leftFramePos; // should always be 0
+                            //let read=arrayAudioBuffer.frames(leftFramePos,framesPerPixel,arrAbBuf);
+                            let read = this._audioDataHolder.frames(leftFramePos, framesPerPixel, arrAbBuf);
+                            let ad = new Float32Array(chs * framesPerPixel);
+                            for (let ch = 0; ch < chs; ch++) {
+                                ad.set(arrAbBuf[ch], ch * framesPerPixel);
+                            }
+                            this.worker.postMessage({
+                                l: renderPos,
+                                w: rw,
+                                vw: vw,
+                                chs: chs,
+                                frameLength: frameLength,
+                                audioData: ad,
+                                audioDataOffset: auOffset,
+                                eod: (read <= 0)
+                            }, [ad.buffer]);
+                        }
+                    }
+                }
             }
             else {
                 let g = this.signalCanvas.getContext("2d");
@@ -2698,42 +3644,42 @@ class AudioSignal extends AudioCanvasLayerComponent {
             }
         }
     }
-    drawRendered(me) {
+    drawRendered(left, w, h, chs, psMinMax) {
         this.drawBg();
-        this.signalCanvas.style.left = me.data.l.toString() + 'px';
-        this.signalCanvas.width = me.data.w;
-        this.signalCanvas.height = me.data.h;
+        this.signalCanvas.style.left = left.toString() + 'px';
+        this.signalCanvas.width = w;
+        this.signalCanvas.height = h;
         let g = this.signalCanvas.getContext("2d");
         if (g) {
-            g.clearRect(0, 0, me.data.w, me.data.h);
+            g.clearRect(0, 0, w, h);
             //g.fillStyle = "black";
             //g.fillRect(0, 0, me.data.w, me.data.h);
-            let pointsLen = me.data.w * me.data.chs;
+            let pointsLen = w * chs;
             // one for min one for max
             let arrLen = pointsLen * 2;
-            if (this._audioData) {
+            if (this._audioDataHolder) {
                 let std = Date.now();
-                let chH = me.data.h / me.data.chs;
+                let chH = h / chs;
                 let y = 0;
-                for (let ch = 0; ch < me.data.chs; ch++) {
+                for (let ch = 0; ch < chs; ch++) {
                     let x = 0;
-                    let psMinPos = ch * me.data.w;
+                    let psMinPos = ch * w;
                     let psMaxPos = pointsLen + psMinPos;
                     g.fillStyle = 'green';
                     g.strokeStyle = 'green';
                     // draw audio signal as single polygon
                     g.beginPath();
-                    g.moveTo(0, y + (chH / 2) + me.data.psMinMax[psMaxPos] * chH / 2);
-                    for (let pii = 0; pii < me.data.w; pii++) {
-                        let psMax = me.data.psMinMax[psMaxPos + pii];
+                    g.moveTo(0, y + (chH / 2) + psMinMax[psMaxPos] * chH / 2);
+                    for (let pii = 0; pii < w; pii++) {
+                        let psMax = psMinMax[psMaxPos + pii];
                         let pv = psMax * chH / 2;
                         let yd = y + (chH / 2) - pv;
                         //console.log("LineTo: : "+pii+" "+yd)
                         g.lineTo(pii, yd);
                     }
-                    let revPixelStart = me.data.w - 1;
+                    let revPixelStart = w - 1;
                     for (let pii = revPixelStart; pii >= 0; pii--) {
-                        let psMin = me.data.psMinMax[psMinPos + pii];
+                        let psMin = psMinMax[psMinPos + pii];
                         let pv = psMin * chH / 2;
                         let yd = y + (chH / 2) - pv;
                         //console.log("LineTo: : "+pii+" "+yd)
@@ -2757,13 +3703,23 @@ class AudioSignal extends AudioCanvasLayerComponent {
             g.clearRect(0, 0, w, h);
             //g.fillStyle = "black";
             //g.fillRect(0, 0, w, h);
-            if (this._audioData) {
+            if (this._audioDataHolder) {
                 let std = Date.now();
-                let chs = this._audioData.numberOfChannels;
+                let chs = this._audioDataHolder.numberOfChannels;
                 let chH = h / chs;
-                let frameLength = this._audioData.getChannelData(0).length;
+                let frameLength = this._audioDataHolder.frameLen;
                 let framesPerPixel = frameLength / w;
                 let y = 0;
+                let ais = null;
+                let audioBuffer = this._audioDataHolder.buffer;
+                let aisBuffer = null;
+                if (!audioBuffer) {
+                    ais = this._audioDataHolder.audioInputStream();
+                    aisBuffer = new Array(chs);
+                    for (let ch = 0; ch < chs; ch++) {
+                        aisBuffer[ch] = new Float32Array(framesPerPixel);
+                    }
+                }
                 for (let ch = 0; ch < chs; ch++) {
                     let x = 0;
                     let psMin = new Float32Array(w);
@@ -2772,20 +3728,33 @@ class AudioSignal extends AudioCanvasLayerComponent {
                     for (let pii = 0; pii < w; pii++) {
                         let pMin = 0;
                         let pMax = 0;
-                        // calculate pixel min/max amplitude
-                        for (let ai = 0; ai < framesPerPixel; ai++) {
-                            //let framePos=(pii*framesPerPixel)+ai;
-                            let a = this._audioData.getChannelData(ch)[framePos++];
-                            if (a < pMin) {
-                                pMin = a;
+                        if (audioBuffer) {
+                            // calculate pixel min/max amplitude
+                            for (let ai = 0; ai < framesPerPixel; ai++) {
+                                //let framePos=(pii*framesPerPixel)+ai;
+                                let a = audioBuffer.getChannelData(ch)[framePos++];
+                                if (a < pMin) {
+                                    pMin = a;
+                                }
+                                if (a > pMax) {
+                                    pMax = a;
+                                }
                             }
-                            if (a > pMax) {
-                                pMax = a;
+                        }
+                        else if (ais && aisBuffer) {
+                            let r = ais.read(aisBuffer);
+                            for (let ai = 0; ai < r; ai++) {
+                                let a = aisBuffer[ch][ai];
+                                if (a < pMin) {
+                                    pMin = a;
+                                }
+                                if (a > pMax) {
+                                    pMax = a;
+                                }
                             }
                         }
                         psMin[pii] = pMin;
                         psMax[pii] = pMax;
-                        //console.log("Min: ", pMin, " max: ", pMax);
                     }
                     g.fillStyle = 'green';
                     g.strokeStyle = 'green';
@@ -2810,12 +3779,11 @@ class AudioSignal extends AudioCanvasLayerComponent {
                     g.stroke();
                     y += chH;
                 }
-                //this.drawPlayPosition();
             }
         }
     }
     setData(audioData) {
-        this._audioData = audioData;
+        this._audioDataHolder = audioData;
         this.playFramePosition = 0;
     }
 }
@@ -3184,7 +4152,7 @@ class Sonagram extends AudioCanvasLayerComponent {
         this._playFramePosition = null;
         this.dftSize = DEFAULT_DFT_SIZE;
         this.worker = null;
-        this._audioData = null;
+        this._audioDataHolder = null;
         this.markers = new Array();
         this.dft = new DFTFloat32(this.dftSize);
         this.workerURL = WorkerHelper.buildWorkerBlobURL(this.workerFunction);
@@ -3237,7 +4205,7 @@ class Sonagram extends AudioCanvasLayerComponent {
                     g.lineTo(xViewPortPixelpos, h);
                     g.closePath();
                     g.stroke();
-                    if (this._audioData) {
+                    if (this._audioDataHolder) {
                         let framePosRound = this.viewPortXPixelToFramePosition(xViewPortPixelpos);
                         if (framePosRound != null) {
                             g.font = '14px sans-serif';
@@ -3501,11 +4469,21 @@ class Sonagram extends AudioCanvasLayerComponent {
         }
         GaussianWindow.DEFAULT_SIGMA = 0.3;
         self.onmessage = function (msg) {
+            //console.debug("Sonagram render thread");
             let l = msg.data.l;
             let w = msg.data.w;
             let h = msg.data.h;
             let vw = msg.data.vw;
             let chs = msg.data.chs;
+            let audioDataOffset = 0;
+            let adOffset = msg.data.audioDataOffset;
+            if (adOffset) {
+                audioDataOffset = adOffset;
+            }
+            let maxPsd = null;
+            if (msg.data.maxPsd !== undefined) {
+                maxPsd = msg.data.maxPsd;
+            }
             let audioData = new Array(chs);
             for (let ch = 0; ch < chs; ch++) {
                 audioData[ch] = new Float32Array(msg.data['audioData'][ch]);
@@ -3521,16 +4499,17 @@ class Sonagram extends AudioCanvasLayerComponent {
             }
             let imgData = new Uint8ClampedArray(arrSize);
             //console.log("Render method:");
-            if (audioData && arrSize > 0) {
+            //console.debug("Created imgData arrSize: "+arrSize+" ", w, "x", h);
+            let calcMaxPsd = -Infinity;
+            if (arrSize > 0) {
                 let chH = Math.round(h / chs);
                 let framesPerPixel = frameLength / vw;
-                //console.log("Render: ", w, "x", h);
+                //console.debug("Render: ", w, "x", h);
                 let b = new Float32Array(dftSize);
                 let sona = new Array(chs);
-                let maxPsd = -Infinity;
-                let p = 0;
+                //let p = 0;
                 for (let ch = 0; ch < chs; ch++) {
-                    p = ch * frameLength;
+                    //p = ch * frameLength;
                     let chDataLen = audioData[ch].length;
                     let x = 0;
                     // initialize DFT array buffer
@@ -3547,8 +4526,13 @@ class Sonagram extends AudioCanvasLayerComponent {
                             // initialize for negative sample positions and out of bounds positions
                             let chDat = 0;
                             // Set audio sample if available
-                            if (samplePos >= 0 && samplePos < chDataLen) {
-                                chDat = audioData[ch][samplePos];
+                            let adp = samplePos - audioDataOffset;
+                            if (adp >= 0 && adp < chDataLen) {
+                                chDat = audioData[ch][adp];
+                                //console.debug("Audio data: "+chDat);
+                            }
+                            else {
+                                //console.debug("Sample buf pos oob: adp: "+adp+", chDataLen: "+chDataLen+", samplePos: "+samplePos+", i: "+i);
                             }
                             // apply Window
                             b[i] = chDat * wf.getScale(i);
@@ -3558,63 +4542,78 @@ class Sonagram extends AudioCanvasLayerComponent {
                         // Get maximum value of spectral energy
                         for (let s = 0; s < dftBands; s++) {
                             let psd = (2 * Math.pow(spectr[s], 2)) / dftBands;
-                            if (psd > maxPsd) {
-                                maxPsd = psd;
+                            if (psd > calcMaxPsd) {
+                                calcMaxPsd = psd;
                             }
                         }
                         // Set render model data for this pixel
                         sona[ch][pii] = spectr;
                     }
                 }
-                //maxPsd = (2 * Math.pow(max, 2)) / dftBands;
-                for (let ch = 0; ch < chs; ch++) {
-                    for (let pii = 0; pii < w; pii++) {
-                        let allBlack = true;
-                        for (let y = 0; y < chH; y++) {
-                            let freqIdx = Math.round(y * dftBands / chH);
-                            // calculate the one sided power spectral density PSD (f, t) in Pa2/Hz
-                            // PSD(f) proportional to 2|X(f)|2 / (t2 - t1)
-                            let val = sona[ch][pii][freqIdx];
-                            let psd = (2 * Math.pow(val, 2)) / dftBands;
-                            // Calculate logarithmic value
-                            //let psdLog = ips.dsp.DSPUtils.toLevelInDB(psd / maxPsd);
-                            let linearLevel = psd / maxPsd;
-                            let psdLog = 10 * Math.log(linearLevel) / Math.log(10);
-                            // Fixed dynamic Range value of 70dB for now
-                            let dynRangeInDb = 70;
-                            let scaledVal = (psdLog + dynRangeInDb) / dynRangeInDb;
-                            // are the following checks necessary for clamped array ?
-                            if (scaledVal > 1.0)
-                                scaledVal = 1;
-                            if (scaledVal < 0.0) {
-                                scaledVal = 0;
-                            }
-                            let rgbVal = Math.round(255 * scaledVal);
-                            if (rgbVal < 0) {
-                                //							System.out.println("Neg RGB val: "+rgbVal);
-                                rgbVal = 0;
-                            }
-                            if (rgbVal > 255) {
-                                rgbVal = 255;
-                            }
-                            rgbVal = 255 - rgbVal;
-                            if (rgbVal > 0) {
-                                allBlack = false;
+                if (!msg.data.norender) {
+                    if (!maxPsd) {
+                        maxPsd = calcMaxPsd;
+                    }
+                    for (let ch = 0; ch < chs; ch++) {
+                        for (let pii = 0; pii < w; pii++) {
+                            let allBlack = true;
+                            for (let y = 0; y < chH; y++) {
+                                let freqIdx = Math.round(y * dftBands / chH);
+                                // calculate the one sided power spectral density PSD (f, t) in Pa2/Hz
+                                // PSD(f) proportional to 2|X(f)|2 / (t2 - t1)
+                                let val = sona[ch][pii][freqIdx];
+                                let psd = (2 * Math.pow(val, 2)) / dftBands;
+                                // Calculate logarithmic value
+                                //let psdLog = ips.dsp.DSPUtils.toLevelInDB(psd / maxPsd);
+                                let linearLevel = psd / maxPsd;
+                                let psdLog = 10 * Math.log(linearLevel) / Math.log(10);
+                                // Fixed dynamic Range value of 70dB for now
+                                let dynRangeInDb = 70;
+                                let scaledVal = (psdLog + dynRangeInDb) / dynRangeInDb;
+                                // are the following checks necessary for clamped array ?
+                                if (scaledVal > 1.0)
+                                    scaledVal = 1;
+                                if (scaledVal < 0.0) {
+                                    scaledVal = 0;
+                                }
+                                let rgbVal = Math.round(255 * scaledVal);
+                                if (rgbVal < 0) {
+                                    //							System.out.println("Neg RGB val: "+rgbVal);
+                                    rgbVal = 0;
+                                }
+                                if (rgbVal > 255) {
+                                    rgbVal = 255;
+                                }
+                                rgbVal = 255 - rgbVal;
+                                if (rgbVal > 0) {
+                                    allBlack = false;
+                                }
+                                let py = chH - y;
+                                let dataPos = ((((ch * chH) + py) * w) + pii) * 4;
+                                imgData[dataPos + 0] = rgbVal; //R
+                                imgData[dataPos + 1] = rgbVal; //G
+                                imgData[dataPos + 2] = rgbVal; //B
+                                imgData[dataPos + 3] = 255; //A (alpha: fully opaque)
+                                //console.debug("Rendered: py: "+py+", rgbval: "+rgbVal);
+                                // example 1x1, 2chs
+                                //  ch0x0y0R,ch0x0y0G,ch0x0y0B,ch0x0y0A,
+                                //  ch0x1y0R,ch0x1y0G,ch0x1y0B,ch0x1y0A,
+                                //  ch0x0y0R,ch0x0y0G,ch0x0y0B,ch0x0y0A,
+                                //  ch0x1y1R,ch0x1y1G,ch0x1y1B,ch0x1y1A,
+                                //  ch1x0y0R,ch1x0y0G,ch1x0y0B,ch1x0y0A,
+                                //  ch1x1y0R,ch1x1y0G,ch1x1y0B,ch1x1y0A,
+                                //  ch1x0y0R,ch1x0y0G,ch1x0y0B,ch1x0y0A,
+                                //  ch1x1y1R,ch1x1y1G,ch1x1y1B,ch1x1y1A
                             }
-                            let py = chH - y;
-                            let dataPos = ((((ch * chH) + py) * w) + pii) * 4;
-                            imgData[dataPos + 0] = rgbVal; //R
-                            imgData[dataPos + 1] = rgbVal; //G
-                            imgData[dataPos + 2] = rgbVal; //B
-                            imgData[dataPos + 3] = 255; //A (alpha: fully opaque)
+                            // if (allBlack) {
+                            //   console.log("Black: ", pii, " ", ch);
+                            // }
                         }
-                        // if (allBlack) {
-                        //   console.log("Black: ", pii, " ", ch);
-                        // }
                     }
                 }
             }
-            postMessage({ imgData: imgData, l: l, w: msg.data.w, h: msg.data.h, vw: vw }, [imgData.buffer]);
+            //console.debug("Render thread post message imgData: "+imgData.length)
+            postMessage({ imgData: imgData, l: l, w: msg.data.w, h: msg.data.h, vw: vw, maxPsd: calcMaxPsd, terminate: msg.data.terminate }, [imgData.buffer]);
         };
     }
     startDraw(clear = true) {
@@ -3644,42 +4643,190 @@ class Sonagram extends AudioCanvasLayerComponent {
         if (this.bounds) {
             let w = Math.round(this.bounds.dimension.width);
             let h = Math.round(this.bounds.dimension.height);
-            if (this._audioData && w > 0 && h > 0) {
+            if (this._audioDataHolder && w > 0 && h > 0) {
                 this.worker = new Worker(this.workerURL);
                 //this.wo = new Worker('./worker/sonagram.worker', { type: `module` });
-                let chs = this._audioData.numberOfChannels;
-                let frameLength = this._audioData.getChannelData(0).length;
-                let ada = new Array(chs);
-                for (let ch = 0; ch < chs; ch++) {
-                    // Need a copy here for the worker, otherwise this.audioData is not accessible after posting to the worker
-                    ada[ch] = this._audioData.getChannelData(ch).buffer.slice(0);
-                }
-                let start = Date.now();
+                let chs = this._audioDataHolder.numberOfChannels;
+                let vw = Math.round(this.virtualDimension.width);
+                let frameLength = this._audioDataHolder.frameLen;
+                let framesPerPixel = Math.ceil(frameLength / vw);
+                let leftPos = Math.round(this.bounds.position.left);
+                let renderPos = leftPos;
+                let audioBuffer = this._audioDataHolder.buffer;
+                //let arrayAudioBuffer=this._audioDataHolder.arrayBuffer;
+                let arrAbBuf;
+                let imgData;
+                let maxPsd = -Infinity;
+                let norender = true;
                 if (this.worker) {
                     this.worker.onmessage = (me) => {
-                        this.drawRendered(me);
-                        if (this.worker) {
-                            this.worker.terminate();
+                        if (true === me.data.terminate) {
+                            let drawImgData;
+                            if (imgData) {
+                                drawImgData = imgData;
+                            }
+                            else {
+                                drawImgData = me.data.imgData;
+                            }
+                            this.drawRendered(w, h, drawImgData);
+                            if (this.worker) {
+                                this.worker.terminate();
+                            }
+                            this.worker = null;
+                        }
+                        else {
+                            // set rendered vertical values of one pixel of timescale
+                            //let dataPos = renderPos * h * 4;
+                            if (norender) {
+                                if (me.data.maxPsd > maxPsd) {
+                                    maxPsd = me.data.maxPsd;
+                                    //console.debug("new maxPsd: "+maxPsd);
+                                }
+                            }
+                            else {
+                                let chH = Math.round(h / chs);
+                                let idp = me.data.l - leftPos;
+                                for (let ch = 0; ch < chs; ch++) {
+                                    for (let y = 0; y < chH; y++) {
+                                        let py = chH - y;
+                                        let dataPos = ((((ch * chH) + py) * w) + idp) * 4;
+                                        let mePos = ((ch * chH) + py) * 4;
+                                        //let lastPos = dataPos + me.data.imgData.length;
+                                        //if (lastPos < imgData.length) {
+                                        // set one pixel
+                                        imgData[dataPos] = me.data.imgData[mePos];
+                                        imgData[dataPos + 1] = me.data.imgData[mePos + 1];
+                                        imgData[dataPos + 2] = me.data.imgData[mePos + 2];
+                                        imgData[dataPos + 3] = me.data.imgData[mePos + 3];
+                                        //} else {
+                                        //console.error("Out of range: " + dataPos + "+" + me.data.imgData.length + ">=" + imgData.length);
+                                        // }
+                                    }
+                                }
+                            }
+                            if (this._audioDataHolder && arrAbBuf && this.worker) {
+                                // proceed with next pixel
+                                renderPos++;
+                                //console.debug("Render pos: "+renderPos);
+                                let terminate = false;
+                                let windowEnd = renderPos >= leftPos + w;
+                                if (windowEnd) {
+                                    if (norender) {
+                                        // phase two: rendering
+                                        norender = false;
+                                        // start from beginning
+                                        renderPos = leftPos;
+                                        //console.debug("now rendering: maxPsd: "+maxPsd);
+                                    }
+                                    else {
+                                        // terminate render phase
+                                        terminate = true;
+                                    }
+                                }
+                                let leftFramePos = Math.floor(frameLength * renderPos / vw) - this.dftSize / 2;
+                                if (leftFramePos < 0) {
+                                    leftFramePos = 0;
+                                }
+                                let ada = new Array(chs);
+                                //console.debug("Render pos: "+renderPos+" leftFramePos: "+leftFramePos);
+                                if (!terminate) {
+                                    if (this._audioDataHolder) {
+                                        let read = this._audioDataHolder.frames(leftFramePos, this.dftSize, arrAbBuf);
+                                        for (let ch = 0; ch < chs; ch++) {
+                                            // Need a copy here for the worker, otherwise this.audioData is not accessible after posting to the worker
+                                            ada[ch] = arrAbBuf[ch].buffer.slice(0);
+                                        }
+                                    }
+                                }
+                                else {
+                                    for (let ch = 0; ch < chs; ch++) {
+                                        ada[ch] = new ArrayBuffer(0);
+                                    }
+                                }
+                                this.worker.postMessage({
+                                    audioData: ada,
+                                    audioDataOffset: leftFramePos,
+                                    l: renderPos,
+                                    w: me.data.w,
+                                    h: h,
+                                    vw: vw,
+                                    chs: chs,
+                                    frameLength: frameLength,
+                                    dftSize: this.dftSize,
+                                    maxPsd: maxPsd,
+                                    norender: norender,
+                                    terminate: terminate
+                                }, ada);
+                            }
                         }
-                        this.worker = null;
                     };
                 }
-                if (this.markerCanvas) {
-                    let g = this.markerCanvas.getContext("2d");
-                    if (g) {
-                        g.fillText("Rendering...", 10, 20);
+                if (audioBuffer && audioBuffer.length * audioBuffer.numberOfChannels < AudioCanvasLayerComponent.ENABLE_STREAMING_NUMBER_OF_SAMPLES_THRESHOLD) {
+                    let ada = new Array(chs);
+                    for (let ch = 0; ch < chs; ch++) {
+                        // Need a copy here for the worker, otherwise this.audioData is not accessible after posting to the worker
+                        ada[ch] = audioBuffer.getChannelData(ch).buffer.slice(0);
+                    }
+                    let start = Date.now();
+                    if (this.markerCanvas) {
+                        let g = this.markerCanvas.getContext("2d");
+                        if (g) {
+                            g.fillText("Rendering...", 10, 20);
+                        }
+                    }
+                    this.worker.postMessage({
+                        audioData: ada,
+                        l: leftPos,
+                        w: w,
+                        h: h,
+                        vw: Math.round(this.virtualDimension.width),
+                        chs: chs,
+                        frameLength: frameLength,
+                        dftSize: this.dftSize,
+                        terminate: true
+                    }, ada);
+                }
+                else {
+                    if (w > 0) {
+                        if (framesPerPixel > 0) {
+                            let arrSize = w * h * 4;
+                            if (arrSize < 0) {
+                                arrSize = 0;
+                            }
+                            imgData = new Uint8ClampedArray(arrSize);
+                            let rw = 1;
+                            //ais = new ArrayAudioBufferInputStream(arrayAudioBuffer);
+                            arrAbBuf = new Array(chs);
+                            for (let ch = 0; ch < chs; ch++) {
+                                arrAbBuf[ch] = new Float32Array(this.dftSize);
+                            }
+                            let leftFramePos = Math.floor(frameLength * renderPos / vw) - this.dftSize / 2;
+                            let framesToRead = this.dftSize;
+                            if (leftFramePos < 0) {
+                                //framesToRead=this.dftSize+leftFramePos;
+                                leftFramePos = 0;
+                            }
+                            let read = this._audioDataHolder.frames(leftFramePos, framesToRead, arrAbBuf);
+                            let ad = new Float32Array(chs * framesToRead);
+                            for (let ch = 0; ch < chs; ch++) {
+                                ad.set(arrAbBuf[ch], ch * framesToRead);
+                            }
+                            this.worker.postMessage({
+                                l: renderPos,
+                                w: rw,
+                                h: h,
+                                vw: vw,
+                                chs: chs,
+                                frameLength: frameLength,
+                                audioData: ad,
+                                audioDataOffset: leftFramePos,
+                                dftSize: this.dftSize,
+                                norender: norender,
+                                terminate: false
+                            }, [ad.buffer]);
+                        }
                     }
                 }
-                this.worker.postMessage({
-                    audioData: ada,
-                    l: Math.round(this.bounds.position.left),
-                    w: w,
-                    h: h,
-                    vw: Math.round(this.virtualDimension.width),
-                    chs: chs,
-                    frameLength: frameLength,
-                    dftSize: this.dftSize
-                }, ada);
             }
             else {
                 let g = this.sonagramCanvas.getContext("2d");
@@ -3689,17 +4836,17 @@ class Sonagram extends AudioCanvasLayerComponent {
             }
         }
     }
-    drawRendered(me) {
+    drawRendered(w, h, imgData) {
         if (this.sonagramCanvas) {
-            this.sonagramCanvas.width = me.data.w;
-            this.sonagramCanvas.height = me.data.h;
+            this.sonagramCanvas.width = w;
+            this.sonagramCanvas.height = h;
             let g = this.sonagramCanvas.getContext("2d");
             if (g) {
-                let imgDataArr = me.data.imgData;
-                if (me.data.w > 0 && me.data.h > 0) {
-                    let imgData = g.createImageData(me.data.w, me.data.h);
-                    imgData.data.set(imgDataArr);
-                    g.putImageData(imgData, 0, 0);
+                let imgDataArr = imgData;
+                if (w > 0 && h > 0) {
+                    let gImgData = g.createImageData(w, h);
+                    gImgData.data.set(imgDataArr);
+                    g.putImageData(gImgData, 0, 0);
                 }
             }
         }
@@ -3715,91 +4862,95 @@ class Sonagram extends AudioCanvasLayerComponent {
             g.clearRect(0, 0, w, h);
             g.fillStyle = "white";
             g.fillRect(0, 0, w, h);
-            if (this._audioData) {
+            if (this._audioDataHolder) {
                 let spectSize = Math.floor(this.dftSize / 2);
-                let chs = this._audioData.numberOfChannels;
+                let chs = this._audioDataHolder.numberOfChannels;
                 let chH = h / chs;
-                let frameLength = this._audioData.getChannelData(0).length;
+                let frameLength = this._audioDataHolder.frameLen;
                 let framesPerPixel = frameLength / w;
                 let y = 0;
-                // TODO
-                let b = new Float32Array(this.dftSize);
-                let sona = new Array(chs);
-                let max = 0;
-                let maxPsd = -Infinity;
-                for (let ch = 0; ch < chs; ch++) {
-                    let x = 0;
-                    sona[ch] = new Array(w);
-                    let chData = this._audioData.getChannelData(ch);
-                    // TODO center buffer
-                    let framePos = 0;
-                    for (let pii = 0; pii < w; pii++) {
-                        framePos = Math.round(pii * framesPerPixel);
-                        // calculate DFT at pixel position
-                        for (let i = 0; i < this.dftSize; i++) {
-                            let chDat = chData[framePos + i];
-                            b[i] = chDat;
-                        }
-                        let spectr = this.dft.processRealMagnitude(b);
-                        sona[ch][pii] = spectr;
-                        // @ts-ignore
-                        let pMax = Math.max.apply(null, spectr);
-                        if (pMax > max) {
-                            max = pMax;
-                        }
-                        for (let s = 0; s < spectSize; s++) {
-                            let psd = (2 * Math.pow(spectr[s], 2)) / spectSize;
-                            if (psd > maxPsd) {
-                                maxPsd = psd;
+                let audioBuffer = this._audioDataHolder.buffer;
+                let arrayAudioBuffer = this._audioDataHolder.arrayBuffer;
+                if (audioBuffer) {
+                    let b = new Float32Array(this.dftSize);
+                    let sona = new Array(chs);
+                    let max = 0;
+                    let maxPsd = -Infinity;
+                    for (let ch = 0; ch < chs; ch++) {
+                        let x = 0;
+                        sona[ch] = new Array(w);
+                        let chData = audioBuffer.getChannelData(ch);
+                        // TODO center buffer
+                        let framePos = 0;
+                        for (let pii = 0; pii < w; pii++) {
+                            framePos = Math.round(pii * framesPerPixel);
+                            // calculate DFT at pixel position
+                            for (let i = 0; i < this.dftSize; i++) {
+                                let chDat = chData[framePos + i];
+                                b[i] = chDat;
                             }
-                        }
-                    }
-                }
-                //console.log("max: ", max);
-                maxPsd = (2 * Math.pow(max, 2)) / spectSize;
-                for (let ch = 0; ch < chs; ch++) {
-                    let framePos = 0;
-                    for (let pii = 0; pii < w; pii++) {
-                        framePos = pii * framesPerPixel;
-                        for (let y = 0; y < h; y++) {
-                            let freqIdx = Math.round(y * spectSize / h);
-                            // calculate the one sided power spectral density PSD (f, t) in Pa2/Hz
-                            // PSD(f) proportional to 2|X(f)|2 / (t2 - t1)
-                            let val = sona[ch][pii][freqIdx];
-                            let psd = (2 * Math.pow(val, 2)) / spectSize;
-                            // Calculate logarithmic
-                            let psdLog = DSPUtils.toLevelInDB(psd / maxPsd);
-                            let dynRangeInDb = 70;
-                            let scaledVal = (psdLog + dynRangeInDb) / dynRangeInDb;
-                            if (scaledVal > 1)
-                                scaledVal = 1;
-                            if (scaledVal < 0) {
-                                scaledVal = 0;
+                            let spectr = this.dft.processRealMagnitude(b);
+                            sona[ch][pii] = spectr;
+                            // @ts-ignore
+                            let pMax = Math.max.apply(null, spectr);
+                            if (pMax > max) {
+                                max = pMax;
                             }
-                            let rgbVal = (255 * scaledVal);
-                            if (rgbVal < 0) {
-                                //							System.out.println("Neg RGB val: "+rgbVal);
-                                rgbVal = 0;
+                            for (let s = 0; s < spectSize; s++) {
+                                let psd = (2 * Math.pow(spectr[s], 2)) / spectSize;
+                                if (psd > maxPsd) {
+                                    maxPsd = psd;
+                                }
                             }
-                            if (rgbVal > 255) {
-                                rgbVal = 255;
+                        }
+                    }
+                    //console.log("max: ", max);
+                    maxPsd = (2 * Math.pow(max, 2)) / spectSize;
+                    for (let ch = 0; ch < chs; ch++) {
+                        let framePos = 0;
+                        for (let pii = 0; pii < w; pii++) {
+                            framePos = pii * framesPerPixel;
+                            for (let y = 0; y < h; y++) {
+                                let freqIdx = Math.round(y * spectSize / h);
+                                // calculate the one sided power spectral density PSD (f, t) in Pa2/Hz
+                                // PSD(f) proportional to 2|X(f)|2 / (t2 - t1)
+                                let val = sona[ch][pii][freqIdx];
+                                let psd = (2 * Math.pow(val, 2)) / spectSize;
+                                // Calculate logarithmic
+                                let psdLog = DSPUtils.toLevelInDB(psd / maxPsd);
+                                let dynRangeInDb = 70;
+                                let scaledVal = (psdLog + dynRangeInDb) / dynRangeInDb;
+                                if (scaledVal > 1)
+                                    scaledVal = 1;
+                                if (scaledVal < 0) {
+                                    scaledVal = 0;
+                                }
+                                let rgbVal = (255 * scaledVal);
+                                if (rgbVal < 0) {
+                                    //							System.out.println("Neg RGB val: "+rgbVal);
+                                    rgbVal = 0;
+                                }
+                                if (rgbVal > 255) {
+                                    rgbVal = 255;
+                                }
+                                rgbVal = 255 - rgbVal;
+                                let colorStr = CSSUtils.toColorString(rgbVal, rgbVal, rgbVal);
+                                g.fillStyle = colorStr;
+                                g.fillRect(pii, chH - y, 1, 1);
                             }
-                            rgbVal = 255 - rgbVal;
-                            let colorStr = CSSUtils.toColorString(rgbVal, rgbVal, rgbVal);
-                            g.fillStyle = colorStr;
-                            g.fillRect(pii, chH - y, 1, 1);
                         }
                     }
+                    this.drawPlayPosition();
+                }
+                else if (arrayAudioBuffer) {
+                    throw Error("Redraw with array audio buffer not supported.");
                 }
-                this.drawPlayPosition();
             }
         }
     }
     setData(audioData) {
-        this._audioData = audioData;
+        this._audioDataHolder = audioData;
         this.playFramePosition = 0;
-        //this.redraw();
-        //this.startRender();
     }
 }
 Sonagram.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: Sonagram, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
@@ -4024,13 +5175,13 @@ class AudioClipUIContainer extends BasicAudioCanvasLayerComponent {
     }
     currentXZoom() {
         let xz = this._xZoom;
-        if (xz == null && this._audioData) {
+        if (xz == null && this._audioDataHolder) {
             let ow = this.ce.offsetWidth;
             if (ow < 1) {
                 // at least one pixel width to avoid x-zoom zero values
                 ow = 1;
             }
-            xz = ow / this._audioData.duration;
+            xz = ow / this._audioDataHolder.duration;
         }
         return xz;
     }
@@ -4109,9 +5260,10 @@ class AudioClipUIContainer extends BasicAudioCanvasLayerComponent {
         this._layout(false, false);
     }
     layout(clear = true) {
+        var _a;
         if (this.ce && this.dc) {
             const clientW = this.ce.clientWidth;
-            if (this._audioData) {
+            if (this._audioDataHolder) {
                 if (this._fixFitToPanel) {
                     // Set the virtual canvas width to the visible width
                     if (this.ce.style.width != '100%') {
@@ -4122,7 +5274,7 @@ class AudioClipUIContainer extends BasicAudioCanvasLayerComponent {
                 else {
                     if (this._xZoom) {
                         // Set the virtual canvas width according to the value of the user selected xZoom value
-                        const newClW = Math.round(this._xZoom * this._audioData.duration);
+                        const newClW = Math.round(this._xZoom * ((_a = this._audioDataHolder) === null || _a === void 0 ? void 0 : _a.duration));
                         this.ce.style.width = newClW + 'px';
                     }
                     else {
@@ -4134,22 +5286,22 @@ class AudioClipUIContainer extends BasicAudioCanvasLayerComponent {
             this._layout(clear, true);
         }
     }
-    set audioData(audioData) {
+    set audioData(audioDataHolder) {
         this._audioClip = null;
-        this._audioData = audioData;
-        this.as.setData(audioData);
-        this.so.setData(audioData);
+        this._audioDataHolder = audioDataHolder;
+        this.as.setData(audioDataHolder);
+        this.so.setData(audioDataHolder);
         this.layout();
     }
     get audioData() {
-        return this._audioData;
+        return this._audioDataHolder;
     }
     set audioClip(audioClip) {
         this._audioClip = audioClip;
         let audioData = null;
         let sel = null;
         if (audioClip) {
-            audioData = audioClip.buffer;
+            audioData = audioClip.audioDataHolder;
             if (this._audioClip) {
                 this._audioClip.addSelectionObserver((clip) => {
                     this.selection = clip.selection;
@@ -4157,9 +5309,9 @@ class AudioClipUIContainer extends BasicAudioCanvasLayerComponent {
             }
             sel = audioClip.selection;
         }
-        this._audioData = audioData;
-        this.as.setData(this._audioData);
-        this.so.setData(this._audioData);
+        this._audioDataHolder = audioData;
+        this.as.setData(this._audioDataHolder);
+        this.so.setData(this._audioDataHolder);
         this.selecting = null;
         this.selection = sel;
         this.layout();
@@ -4351,7 +5503,7 @@ class AudioDisplayScrollPane {
         let audioData = null;
         let sel = null;
         if (audioClip) {
-            audioData = audioClip.buffer;
+            audioData = audioClip.audioDataHolder;
             sel = audioClip.selection;
             audioClip.addSelectionObserver((clip) => {
                 this.zoomSelectedAction.disabled = (clip.selection == null);
@@ -4622,17 +5774,17 @@ class AudioDisplay {
         console.log("Play started");
         this.status = 'Playing...';
     }
-    set audioData(audioBuffer) {
-        this.audioDisplayScrollPane.audioData = audioBuffer;
+    set audioData(audioData) {
+        this.audioDisplayScrollPane.audioData = audioData;
         if (this.playStartAction) {
-            this.playStartAction.disabled = (audioBuffer == null);
+            this.playStartAction.disabled = (audioData == null);
         }
     }
     set audioClip(audioClip) {
         let audioData = null;
         let sel = null;
         if (audioClip) {
-            audioData = audioClip.buffer;
+            audioData = audioClip.audioDataHolder.buffer;
             sel = audioClip.selection;
         }
         this._audioClip = audioClip;
@@ -4745,7 +5897,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
 
 class Progress {
     constructor() {
-        this.items = null;
+        this.items = undefined;
         this.selectedItemIdx = 0;
         this.enableDownload = false;
         this.onRowSelect = new EventEmitter();
@@ -5485,7 +6637,7 @@ class Prompting {
     constructor() {
         this.promptItem = null;
         this.showPrompt = false;
-        this.items = null;
+        this.items = undefined;
         this.enableDownload = false;
         this.audioSignalCollapsed = true;
         this.displayAudioClip = null;
@@ -5800,6 +6952,7 @@ class LevelBar {
         this._streamingMode = false;
         this._staticLevelInfos = null;
         this._playFramePosition = null;
+        this._stateLoading = false;
         this.warnDBLevel = DEFAULT_WARN_DB_LEVEL$1;
         this.dbValues = new Array();
     }
@@ -5833,17 +6986,22 @@ class LevelBar {
         }
     }
     set displayLevelInfos(levelInfos) {
-        this._staticLevelInfos = levelInfos;
         if (levelInfos) {
+            this._staticLevelInfos = levelInfos;
             this.dbValues = levelInfos.bufferLevelInfos.map((li) => {
                 return li.powerLevelsDB();
             });
         }
         else {
+            this._staticLevelInfos = null;
             this.dbValues = new Array();
         }
         this.layoutStatic();
     }
+    set stateLoading(loading) {
+        this._stateLoading = loading;
+        this.layoutStatic();
+    }
     set channelCount(channelCount) {
         this.reset();
     }
@@ -6024,6 +7182,12 @@ class LevelBar {
                         }
                     }
                 }
+                else if (this._stateLoading) {
+                    g.strokeStyle = 'white';
+                    g.fillStyle = 'white';
+                    g.font = '20px sans-serif';
+                    g.fillText("Loading...", 10, 25);
+                }
             }
         }
     }
@@ -6066,7 +7230,7 @@ class LevelBar {
     }
 }
 LevelBar.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LevelBar, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-LevelBar.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: LevelBar, selector: "audio-levelbar", inputs: { streamingMode: "streamingMode", displayLevelInfos: "displayLevelInfos" }, host: { listeners: { "scroll": "onScroll($event)", "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "virtualCanvasRef", first: true, predicate: ["virtualCanvas"], descendants: true, static: true }, { propertyName: "liveLevelCanvasRef", first: true, predicate: ["levelbar"], descendants: true, static: true }, { propertyName: "markerCanvasRef", first: true, predicate: ["markerCanvas"], descendants: true, static: true }], ngImport: i0, template: `
+LevelBar.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: LevelBar, selector: "audio-levelbar", inputs: { streamingMode: "streamingMode", displayLevelInfos: "displayLevelInfos", stateLoading: "stateLoading" }, host: { listeners: { "scroll": "onScroll($event)", "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "virtualCanvasRef", first: true, predicate: ["virtualCanvas"], descendants: true, static: true }, { propertyName: "liveLevelCanvasRef", first: true, predicate: ["levelbar"], descendants: true, static: true }, { propertyName: "markerCanvasRef", first: true, predicate: ["markerCanvas"], descendants: true, static: true }], ngImport: i0, template: `
     <div #virtualCanvas>
       <canvas #levelbar></canvas>
       <canvas #markerCanvas></canvas>
@@ -6123,6 +7287,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], displayLevelInfos: [{
                 type: Input
+            }], stateLoading: [{
+                type: Input
             }], onResize: [{
                 type: HostListener,
                 args: ['window:resize', ['$event']]
@@ -6713,47 +7879,68 @@ class PeakLevelInterceptor {
     }
 }
 class LevelMeasure {
+    //private bufferLevelInfos=new Array<LevelInfo>();
+    //private peakLevelInfo!:LevelInfo;
     constructor() {
         this.worker = null;
         this.workerURL = WorkerHelper.buildWorkerBlobURL(this.workerFunction);
     }
-    calcBufferLevelInfos(audioBuffer, bufferTimeLength) {
+    calcBufferLevelInfos(audioDataHolder, bufferTimeLength) {
         return new Promise((resolve) => {
-            let chs = audioBuffer.numberOfChannels;
-            let bufferFrameLength = Math.round(audioBuffer.sampleRate * bufferTimeLength);
-            let buffers = new Array(chs);
+            var _a;
+            let chs = audioDataHolder.numberOfChannels;
+            let bufferFrameLength = Math.round(audioDataHolder.sampleRate * bufferTimeLength);
+            let ais = audioDataHolder.audioInputStream();
+            let audioBuffers = new Array(chs);
+            let trBuffers = new Array(chs);
             for (let ch = 0; ch < chs; ch++) {
-                let adCh = audioBuffer.getChannelData(ch);
-                let adChCopy = new Float32Array(adCh.length);
-                adChCopy.set(adCh);
-                buffers[ch] = adChCopy.buffer;
+                audioBuffers[ch] = new Float32Array(bufferFrameLength);
             }
+            let bufferLevelInfos = new Array();
+            let peakLevelInfo = new LevelInfo(chs);
             this.worker = new Worker(this.workerURL);
             this.worker.onmessage = (me) => {
-                let linLevelArrs = new Array(chs);
-                for (let ch = 0; ch < chs; ch++) {
-                    linLevelArrs[ch] = new Float32Array(me.data.linLevelBuffers[ch]);
-                }
-                let bufferCount = Math.ceil(me.data.frameLength / me.data.bufferFrameLength);
-                let framePos = 0;
-                let bufferLevelInfos = new Array();
-                let peakLevelInfo = new LevelInfo(chs);
-                for (let bi = 0; bi < bufferCount; bi++) {
-                    let minLevels = new Array(chs);
-                    let maxLevels = new Array(chs);
+                var _a;
+                if (me.data.linLevelBuffers) {
+                    let linLevelArrs = new Array(chs);
+                    for (let ch = 0; ch < chs; ch++) {
+                        linLevelArrs[ch] = new Float32Array(me.data.linLevelBuffers[ch]);
+                    }
+                    let bufferCount = Math.ceil(me.data.frameLength / me.data.bufferFrameLength);
+                    let framePos = 0;
+                    for (let bi = 0; bi < bufferCount; bi++) {
+                        let minLevels = new Array(chs);
+                        let maxLevels = new Array(chs);
+                        for (let ch = 0; ch < chs; ch++) {
+                            let linLvlArrPos = bi * 2;
+                            minLevels[ch] = linLevelArrs[ch][linLvlArrPos];
+                            maxLevels[ch] = linLevelArrs[ch][linLvlArrPos + 1];
+                        }
+                        let bli = new LevelInfo(chs, framePos, me.data.bufferFrameLength, minLevels, maxLevels);
+                        bufferLevelInfos.push(bli);
+                        peakLevelInfo.merge(bli);
+                    }
+                }
+                if (me.data.eod === true) {
+                    // end of data, terminate worker and return result
+                    this.terminateWorker();
+                    resolve(new LevelInfos(bufferLevelInfos, peakLevelInfo));
+                }
+                else {
+                    let read = ais.read(audioBuffers);
                     for (let ch = 0; ch < chs; ch++) {
-                        let linLvlArrPos = bi * 2;
-                        minLevels[ch] = linLevelArrs[ch][linLvlArrPos];
-                        maxLevels[ch] = linLevelArrs[ch][linLvlArrPos + 1];
+                        let copy = new Float32Array(audioBuffers[ch]);
+                        trBuffers[ch] = copy.buffer;
                     }
-                    let bli = new LevelInfo(chs, framePos, me.data.bufferFrameLength, minLevels, maxLevels);
-                    bufferLevelInfos.push(bli);
-                    peakLevelInfo.merge(bli);
+                    (_a = this.worker) === null || _a === void 0 ? void 0 : _a.postMessage({ bufferFrameLength: bufferFrameLength, audioData: trBuffers, chs: chs, len: read }, trBuffers);
                 }
-                this.terminateWorker();
-                resolve(new LevelInfos(bufferLevelInfos, peakLevelInfo));
             };
-            this.worker.postMessage({ bufferFrameLength: bufferFrameLength, audioData: buffers, chs: chs }, buffers);
+            let read = ais.read(audioBuffers);
+            for (let ch = 0; ch < chs; ch++) {
+                let copy = new Float32Array(audioBuffers[ch]);
+                trBuffers[ch] = copy.buffer;
+            }
+            (_a = this.worker) === null || _a === void 0 ? void 0 : _a.postMessage({ bufferFrameLength: bufferFrameLength, audioData: trBuffers, chs: chs, len: read }, trBuffers);
         });
     }
     terminateWorker() {
@@ -6765,40 +7952,63 @@ class LevelMeasure {
      */
     workerFunction() {
         self.onmessage = function (msg) {
-            let chs = msg.data.chs;
+            let len = msg.data.len;
             let bufferFrameLength = msg.data.bufferFrameLength;
-            let audioData = new Array(chs);
-            let linLevels = new Array(chs);
-            for (let ch = 0; ch < chs; ch++) {
-                audioData[ch] = new Float32Array(msg.data.audioData[ch]);
+            if (len == -1) {
+                // start
+                postMessage({
+                    eod: false,
+                    bufferFrameLength: bufferFrameLength,
+                    frameLength: len
+                });
             }
-            let frameLength = audioData[0].length;
-            let bufferCount = Math.ceil(frameLength / bufferFrameLength);
-            for (let ch = 0; ch < chs; ch++) {
-                linLevels[ch] = new Float32Array(bufferCount * 2);
+            if (len == 0) {
+                postMessage({
+                    eod: true,
+                    bufferFrameLength: bufferFrameLength,
+                    frameLength: len
+                });
             }
-            if (audioData && chs > 0) {
+            else {
+                let chs = msg.data.chs;
+                let audioData = new Array(chs);
+                let linLevels = new Array(chs);
                 for (let ch = 0; ch < chs; ch++) {
-                    let chData = audioData[ch];
-                    for (let s = 0; s < frameLength; s++) {
-                        let bi = Math.floor(s / bufferFrameLength);
-                        let lvlArrPos = bi * 2;
-                        //let bs = s % bufferFrameLength;
-                        let chSample = chData[s];
-                        if (chSample < linLevels[ch][lvlArrPos]) {
-                            linLevels[ch][lvlArrPos] = chSample;
-                        }
-                        lvlArrPos++;
-                        if (chSample > linLevels[ch][lvlArrPos]) {
-                            linLevels[ch][lvlArrPos] = chSample;
-                        }
-                    }
+                    audioData[ch] = new Float32Array(msg.data.audioData[ch]);
                 }
-                const linLevelBufs = new Array(chs);
+                //let frameLength = audioData[0].length;
+                let bufferCount = Math.ceil(len / bufferFrameLength);
                 for (let ch = 0; ch < chs; ch++) {
-                    linLevelBufs[ch] = linLevels[ch].buffer;
+                    linLevels[ch] = new Float32Array(bufferCount * 2);
+                }
+                if (audioData && chs > 0) {
+                    for (let ch = 0; ch < chs; ch++) {
+                        let chData = audioData[ch];
+                        for (let s = 0; s < len; s++) {
+                            let bi = Math.floor(s / bufferFrameLength);
+                            let lvlArrPos = bi * 2;
+                            //let bs = s % bufferFrameLength;
+                            let chSample = chData[s];
+                            if (chSample < linLevels[ch][lvlArrPos]) {
+                                linLevels[ch][lvlArrPos] = chSample;
+                            }
+                            lvlArrPos++;
+                            if (chSample > linLevels[ch][lvlArrPos]) {
+                                linLevels[ch][lvlArrPos] = chSample;
+                            }
+                        }
+                    }
+                    const linLevelBufs = new Array(chs);
+                    for (let ch = 0; ch < chs; ch++) {
+                        linLevelBufs[ch] = linLevels[ch].buffer;
+                    }
+                    postMessage({
+                        eod: false,
+                        bufferFrameLength: bufferFrameLength,
+                        frameLength: len,
+                        linLevelBuffers: linLevelBufs
+                    }, linLevelBufs);
                 }
-                postMessage({ bufferFrameLength: bufferFrameLength, frameLength: frameLength, linLevelBuffers: linLevelBufs }, linLevelBufs);
             }
         };
     }
@@ -7174,7 +8384,7 @@ RecordingItemDisplay.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
         <audio-levelbar fxFlex="1 0 1" [streamingMode]="streamingMode" [displayLevelInfos]="_displayLevelInfos"></audio-levelbar>
         <spr-recordingitemcontrols fxFlex="0 0 0" [audioLoaded]="displayAudioBuffer!==null" [playStartAction]="playStartAction" [playStopAction]="playStopAction" [peakDbLvl]="peakDbLvl" [agc]="_agc" (onShowRecordingDetails)="onShowRecordingDetails.emit()"></spr-recordingitemcontrols>
       </div>
-    `, isInline: true, styles: ["div{width:100%;background:darkgray;padding:4px;box-sizing:border-box;flex-wrap:nowrap}\n", "audio-levelbar{box-sizing:border-box}\n"], components: [{ type: LevelBar, selector: "audio-levelbar", inputs: ["streamingMode", "displayLevelInfos"] }, { type: RecordingItemControls, selector: "spr-recordingitemcontrols", inputs: ["audioSignalCollapsed", "enableDownload", "peakDbLvl", "agc", "audioLoaded", "playStartAction", "playStopAction", "displayLevelInfos"], outputs: ["onShowRecordingDetails", "onDownloadRecording"] }], directives: [{ type: i8.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i3$1.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i8.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }] });
+    `, isInline: true, styles: ["div{width:100%;background:darkgray;padding:4px;box-sizing:border-box;flex-wrap:nowrap}\n", "audio-levelbar{box-sizing:border-box}\n"], components: [{ type: LevelBar, selector: "audio-levelbar", inputs: ["streamingMode", "displayLevelInfos", "stateLoading"] }, { type: RecordingItemControls, selector: "spr-recordingitemcontrols", inputs: ["audioSignalCollapsed", "enableDownload", "peakDbLvl", "agc", "audioLoaded", "playStartAction", "playStopAction", "displayLevelInfos"], outputs: ["onShowRecordingDetails", "onDownloadRecording"] }], directives: [{ type: i8.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i3$1.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i8.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: RecordingItemDisplay, decorators: [{
             type: Component,
             args: [{
@@ -7220,89 +8430,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }] } });
 
-class Float32ArrayChunkerOutStream {
-    constructor(outStream) {
-        this.outStream = outStream;
-        this.bufs = new Array();
-        this._channels = 0;
-        this._chunkSize = 0;
-        this.filled = 0;
-        this.receivedFrames = 0;
-        this.sentFrames = 0;
-    }
-    createBuffers() {
-        this.bufs = new Array(this._channels);
-        for (let ch = 0; ch < this._channels; ch++) {
-            this.bufs[ch] = new Float32Array(this._chunkSize);
-        }
-    }
-    set chunkSize(chunkSize) {
-        this._chunkSize = chunkSize;
-        this.createBuffers();
-    }
-    get chunkSize() {
-        return this._chunkSize;
-    }
-    set channels(channels) {
-        this._channels = channels;
-        this.createBuffers();
-    }
-    get channels() {
-        return this._channels;
-    }
-    available() {
-        return this._chunkSize - this.filled;
-    }
-    write(buffers) {
-        let copied = 0;
-        if (buffers.length > 0) {
-            let buffersLen = buffers[0].length;
-            this.receivedFrames += buffersLen;
-            let avail = buffersLen;
-            // Fill out buffers until all values copied
-            while (avail > 0) {
-                let toFill = this._chunkSize - this.filled;
-                if (toFill > avail) {
-                    toFill = avail;
-                }
-                let sliceEnd = copied + toFill;
-                // Firefox on Android sends only the first channel
-                for (let ch = 0; ch < buffersLen; ch++) {
-                    if (buffers[ch]) {
-                        let cpPrt = buffers[ch].slice(copied, sliceEnd);
-                        let buf = this.bufs[ch];
-                        buf.set(cpPrt, this.filled);
-                    }
-                }
-                copied += toFill;
-                avail -= toFill;
-                this.filled += toFill;
-                if (this.filled == this._chunkSize) {
-                    this.outStream.write(this.bufs);
-                    this.sentFrames += this.filled;
-                    this.filled = 0;
-                }
-            }
-        }
-        return copied;
-    }
-    flush() {
-        if (this.filled > 0) {
-            let restBufs = new Array(this._channels);
-            for (let ch = 0; ch < this._channels; ch++) {
-                restBufs[ch] = this.bufs[ch].slice(0, this.filled);
-            }
-            this.outStream.write(restBufs);
-            this.outStream.flush();
-            this.sentFrames += this.filled;
-            this.filled = 0;
-        }
-    }
-    close() {
-        this.outStream.close();
-    }
-}
-
 class SequenceAudioFloat32ChunkerOutStream extends Float32ArrayChunkerOutStream {
     constructor(outStream, chunkDurationSeconds) {
         super(outStream);
@@ -7311,11 +8438,11 @@ class SequenceAudioFloat32ChunkerOutStream extends Float32ArrayChunkerOutStream
         this.sequenceAudioFloat32OutStream = outStream;
     }
     setFormat(channels, sampleRate) {
-        console.debug("SequenceAudioFloat32ChunkerOutStream:setFormat(channels: " + channels + ",sampleRate: " + sampleRate + ")");
+        //console.debug("SequenceAudioFloat32ChunkerOutStream:setFormat(channels: "+channels+",sampleRate: "+sampleRate+")")
         this.channels = channels;
         this.sampleRate = sampleRate;
         this.chunkSize = Math.round(sampleRate * this.chunkDurationSeconds);
-        console.debug("SequenceAudioFloat32ChunkerOutStream: chunkSize: " + this.chunkSize);
+        //console.debug("SequenceAudioFloat32ChunkerOutStream: chunkSize: "+this.chunkSize);
         this.sequenceAudioFloat32OutStream.setFormat(channels, sampleRate);
     }
     nextStream() {
@@ -7522,7 +8649,8 @@ class ChunkManager {
     }
 }
 let BasicRecorder = class BasicRecorder {
-    constructor(dialog, sessionService, uploader, config) {
+    constructor(changeDetectorRef, dialog, sessionService, uploader, config) {
+        this.changeDetectorRef = changeDetectorRef;
         this.dialog = dialog;
         this.sessionService = sessionService;
         this.uploader = uploader;
@@ -7537,14 +8665,15 @@ let BasicRecorder = class BasicRecorder {
         this._selectedDeviceId = undefined;
         this._channelCount = 2;
         this._session = null;
+        this._recordingFile = null;
         this.startedDate = null;
         this.uploadProgress = 100;
         this.uploadStatus = 'ok';
         this.audioSignalCollapsed = true;
         this.peakLevelInDb = MIN_DB_LEVEL;
-        this.displayLevelInfos = null;
         this.displayAudioClip = null;
         this.audioFetchSubscription = null;
+        this.audioFetching = false;
         this.destroyed = false;
         this.navigationDisabled = true;
         // Default: Disabled chunked upload
@@ -7639,6 +8768,28 @@ let BasicRecorder = class BasicRecorder {
             this.ac.audioOutStream = outStream;
         }
     }
+    showRecording() {
+        this._controlAudioPlayer.stop();
+        if (this.displayAudioClip) {
+            let dap = this.displayAudioClip;
+            let adh = dap.audioDataHolder;
+            if (adh) {
+                this.levelMeasure.calcBufferLevelInfos(adh, LEVEL_BAR_INTERVALL_SECONDS).then((levelInfos) => {
+                    dap.levelInfos = levelInfos;
+                    this.changeDetectorRef.detectChanges();
+                });
+            }
+            this.playStartAction.disabled = false;
+        }
+        else {
+            this.playStartAction.disabled = true;
+            // Collapse audio signal display if open
+            if (!this.audioSignalCollapsed) {
+                this.audioSignalCollapsed = true;
+            }
+        }
+        this.changeDetectorRef.detectChanges();
+    }
     start() {
         this.statusAlertType = 'info';
         this.statusMsg = 'Starting session...';
@@ -7859,9 +9010,9 @@ let BasicRecorder = class BasicRecorder {
         }
         this.transportActions.startAction.disabled = true;
     }
-    postRecording(wavFile, recUrl) {
+    postRecording(wavFile, recUrl, rf) {
         let wavBlob = new Blob([wavFile], { type: 'audio/wav' });
-        let ul = new Upload(wavBlob, recUrl);
+        let ul = new Upload(wavBlob, recUrl, rf);
         this.uploader.queueUpload(ul);
     }
     postAudioStreamStart() {
@@ -7900,39 +9051,344 @@ let BasicRecorder = class BasicRecorder {
             if (apiEndPoint !== '') {
                 apiEndPoint = apiEndPoint + '/';
             }
-            let sessionsUrl = apiEndPoint + SessionService.SESSION_API_CTX;
-            let recUrl = sessionsUrl + '/' + ((_a = this.session) === null || _a === void 0 ? void 0 : _a.sessionId) + '/' + RECFILE_API_CTX + '/' + this.rfUuid + '/concatChunksRequest';
-            let fd = new FormData();
-            fd.set('uuid', this.rfUuid);
-            fd.set('chunkCount', chunkCount.toString());
-            let ul = new Upload(fd, recUrl);
-            this.uploader.queueUpload(ul);
+            let sessionsUrl = apiEndPoint + SessionService.SESSION_API_CTX;
+            let recUrl = sessionsUrl + '/' + ((_a = this.session) === null || _a === void 0 ? void 0 : _a.sessionId) + '/' + RECFILE_API_CTX + '/' + this.rfUuid + '/concatChunksRequest';
+            let fd = new FormData();
+            fd.set('uuid', this.rfUuid);
+            fd.set('chunkCount', chunkCount.toString());
+            let ul = new Upload(fd, recUrl, this._recordingFile);
+            this.uploader.queueUpload(ul);
+            console.debug("Queued for upload: " + this._recordingFile);
+        }
+        else {
+            console.error("Recording file UUID not set!");
+        }
+    }
+    closed() {
+        this.statusAlertType = 'info';
+        this.statusMsg = 'Session closed.';
+    }
+    error(msg = 'An unknown error occured during recording.', advice = 'Please retry.') {
+        this.statusMsg = 'ERROR: Recording.';
+        this.statusAlertType = 'error';
+        this.dialog.open(MessageDialog, {
+            data: {
+                type: 'error',
+                title: 'Recording error',
+                msg: msg,
+                advice: advice
+            }
+        });
+    }
+};
+// Enable only for developemnt/debug purposes of array audio buffers !!
+BasicRecorder.FORCE_ARRRAY_AUDIO_BUFFER = false;
+BasicRecorder.DEFAULT_CHUNK_SIZE_SECONDS = 30;
+BasicRecorder = __decorate([
+    __param(4, Inject(SPEECHRECORDER_CONFIG))
+], BasicRecorder);
+
+class AudioDataHolder {
+    constructor(_buffer, _arrayBuffer = null) {
+        this._buffer = _buffer;
+        this._arrayBuffer = _arrayBuffer;
+        this._numberOfChannels = 0;
+        this._sampleRate = 0;
+        this._frameLen = 0;
+        this._duration = 0;
+        if (this._buffer && this._arrayBuffer) {
+            throw Error('Only one of either audio buffer or array audio buffer must be set!');
+        }
+        if (this._buffer || this._arrayBuffer) {
+            if (this._buffer) {
+                this._numberOfChannels = this._buffer.numberOfChannels;
+                this._sampleRate = this._buffer.sampleRate;
+                this._frameLen = this._buffer.length;
+                this._duration = this._frameLen / this._sampleRate;
+            }
+            else if (this._arrayBuffer) {
+                this._numberOfChannels = this._arrayBuffer.channelCount;
+                this._sampleRate = this._arrayBuffer.sampleRate;
+                this._frameLen = this._arrayBuffer.frameLen;
+                this._duration = this._frameLen / this._sampleRate;
+            }
+        }
+        else {
+            throw Error(AudioDataHolder.ONE_OF_MUST_BE_SET_ERR_MSG);
+        }
+    }
+    get duration() {
+        return this._duration;
+    }
+    get sampleRate() {
+        return this._sampleRate;
+    }
+    get numberOfChannels() {
+        return this._numberOfChannels;
+    }
+    get frameLen() {
+        return this._frameLen;
+    }
+    sampleCounts() {
+        return this._numberOfChannels * this._frameLen;
+    }
+    frames(framePos, frameLen, bufs) {
+        let read = 0;
+        if (this._buffer) {
+            let toRead = frameLen;
+            if (this._buffer.length < framePos + frameLen) {
+                toRead = this._buffer.length - framePos;
+            }
+            for (let ch = 0; ch < bufs.length; ch++) {
+                let chData = this._buffer.getChannelData(ch);
+                for (let i = 0; i < toRead; i++) {
+                    bufs[ch][i] = chData[framePos + i];
+                }
+            }
+            read = toRead;
+        }
+        else if (this._arrayBuffer) {
+            read = this._arrayBuffer.frames(framePos, frameLen, bufs);
+        }
+        return read;
+    }
+    audioInputStream() {
+        if (this._buffer) {
+            return new AudioBufferInputStream(this._buffer);
+        }
+        if (this._arrayBuffer) {
+            return new ArrayAudioBufferInputStream(this._arrayBuffer);
+        }
+        throw Error(AudioDataHolder.ONE_OF_MUST_BE_SET_ERR_MSG);
+    }
+    get buffer() {
+        return this._buffer;
+    }
+    get arrayBuffer() {
+        return this._arrayBuffer;
+    }
+}
+AudioDataHolder.ONE_OF_MUST_BE_SET_ERR_MSG = 'One of either audio buffer or array audio buffer must be set!';
+class AudioBufferInputStream {
+    constructor(audioBuffer) {
+        this.audioBuffer = audioBuffer;
+        this.framePos = 0;
+    }
+    close() {
+    }
+    skipFrames(n) {
+        this.framePos += n;
+    }
+    read(buffers) {
+        let read = 0;
+        let toRead = buffers[0].length;
+        if (this.framePos + toRead > this.audioBuffer.length) {
+            toRead = this.audioBuffer.length - this.framePos;
+        }
+        for (let ch = 0; ch < buffers.length; ch++) {
+            for (let i = 0; i < toRead; i++) {
+                buffers[ch][i] = this.audioBuffer.getChannelData(ch)[this.framePos + i];
+            }
+        }
+        read = toRead;
+        this.framePos += toRead;
+        return read;
+    }
+}
+
+class BasicRecFilesCache {
+    constructor() {
+        //public static readonly DEFAULT_MAX_SAMPLES=30*48000;  // TEST 30 seconds
+        this._sampleCount = 0;
+        this.maxSampleCount = BasicRecFilesCache.DEFAULT_MAX_SAMPLES;
+        this._currentRecordingFile = null;
+    }
+    get currentRecordingFile() {
+        return this._currentRecordingFile;
+    }
+    set currentRecordingFile(value) {
+        this._currentRecordingFile = value;
+        this.expire();
+    }
+}
+BasicRecFilesCache.DEBUG = false;
+BasicRecFilesCache.DEFAULT_MAX_SAMPLES = 10 * 60 * 48000; // 20 Minutes mono 48kHz
+class SprItemsCache extends BasicRecFilesCache {
+    constructor() {
+        super(...arguments);
+        this._items = new Array();
+    }
+    get items() {
+        return this._items;
+    }
+    addItem(item) {
+        this._items.push(item);
+    }
+    getItem(index) {
+        return this._items[index];
+    }
+    length() {
+        return this._items.length;
+    }
+    tryExpire(toBeExpiredRf) {
+        if (BasicRecFilesCache.DEBUG)
+            console.debug("Rec. files cache: " + toBeExpiredRf.toString() + " try expire:");
+        if (!RecordingFileUtils.equals(toBeExpiredRf, this.currentRecordingFile)) {
+            if (BasicRecFilesCache.DEBUG)
+                console.debug("Rec. files cache: " + toBeExpiredRf.toString() + " not current file...");
+            if (toBeExpiredRf.serverPersisted) {
+                if (BasicRecFilesCache.DEBUG)
+                    console.debug("Rec. files cache: " + toBeExpiredRf.toString() + " is server persisted...");
+                // expire recording files first stored to the cache
+                let expiredAudio = RecordingFileUtils.expireAudioData(toBeExpiredRf);
+                if (expiredAudio) {
+                    this._sampleCount -= expiredAudio.sampleCounts();
+                    if (BasicRecFilesCache.DEBUG)
+                        console.debug("Rec. files cache: Expired: " + toBeExpiredRf.toString() + ". Cache samples now: " + this._sampleCount);
+                }
+            }
+            else {
+                if (BasicRecFilesCache.DEBUG)
+                    console.debug("Rec. files cache: #" + toBeExpiredRf.toString() + " not yet persisted on server.");
+            }
+        }
+        else {
+            if (BasicRecFilesCache.DEBUG)
+                console.debug("Rec. files cache: " + toBeExpiredRf.toString() + " is current file.");
+        }
+    }
+    expire() {
+        // expire corrected versions first
+        if (BasicRecFilesCache.DEBUG)
+            console.debug("Rec. files cache: Expire? current: " + this._sampleCount + ", max: " + this.maxSampleCount);
+        if (this._sampleCount > this.maxSampleCount) {
+            // expire older versions of an item first
+            for (let ii = 0; ii < this._items.length; ii++) {
+                if (this._sampleCount <= this.maxSampleCount) {
+                    break;
+                }
+                let it = this._items[ii];
+                let itRfs = it.recs;
+                if (itRfs && itRfs.length > 1) {
+                    for (let rfi = 0; rfi < itRfs.length - 1; rfi++) {
+                        if (this._sampleCount <= this.maxSampleCount) {
+                            break;
+                        }
+                        let toBeExpiredRf = itRfs[rfi];
+                        this.tryExpire(toBeExpiredRf);
+                    }
+                }
+            }
+            // if that's not sufficient expire audio data of latest versions as well
+            for (let ii = 0; ii < this._items.length; ii++) {
+                if (this._sampleCount <= this.maxSampleCount) {
+                    break;
+                }
+                let it = this._items[ii];
+                let itRfs = it.recs;
+                if (itRfs && itRfs.length > 0) {
+                    for (let rfi = 0; rfi < itRfs.length; rfi++) {
+                        if (this._sampleCount <= this.maxSampleCount) {
+                            break;
+                        }
+                        let toBeExpiredRf = itRfs[rfi];
+                        this.tryExpire(toBeExpiredRf);
+                    }
+                }
+            }
         }
-        else {
-            console.error("Recording file UUID not set!");
+    }
+    addSprRecFile(item, sprRecFile) {
+        this.expire();
+        if (!item.recs) {
+            item.recs = new Array();
         }
+        item.recs.push(sprRecFile);
+        this._sampleCount += RecordingFileUtils.sampleCount(sprRecFile);
+        if (BasicRecFilesCache.DEBUG)
+            console.debug("Rec. files cache: Added. Cache samples: " + this._sampleCount);
     }
-    closed() {
-        this.statusAlertType = 'info';
-        this.statusMsg = 'Session closed.';
+    setSprRecFileAudioData(sprRecFile, adh) {
+        this.expire();
+        if (BasicRecFilesCache.DEBUG)
+            console.debug("Rec. files cache: Set audio data after expire. Cache samples: " + this._sampleCount);
+        let currSampleCnt = RecordingFileUtils.sampleCount(sprRecFile);
+        this._sampleCount -= currSampleCnt;
+        if (BasicRecFilesCache.DEBUG)
+            console.debug("Rec. files cache: Set audio data subtracted curr sample count: " + currSampleCnt + ". Cache samples: " + this._sampleCount);
+        RecordingFileUtils.setAudioData(sprRecFile, adh);
+        let newSampleCnt = RecordingFileUtils.sampleCount(sprRecFile);
+        this._sampleCount += newSampleCnt;
+        if (BasicRecFilesCache.DEBUG)
+            console.debug("Rec. files cache: Set audio data added new sample count: " + newSampleCnt + ". Cache samples: " + this._sampleCount);
+        let fl = adh === null || adh === void 0 ? void 0 : adh.frameLen;
+        if (fl) {
+            sprRecFile.frames = fl;
+        }
+        if (BasicRecFilesCache.DEBUG)
+            console.debug("Rec. files cache: Set audio data. Cache samples: " + this._sampleCount);
     }
-    error(msg = 'An unknown error occured during recording.', advice = 'Please retry.') {
-        this.statusMsg = 'ERROR: Recording.';
-        this.statusAlertType = 'error';
-        this.dialog.open(MessageDialog, {
-            data: {
-                type: 'error',
-                title: 'Recording error',
-                msg: msg,
-                advice: advice
+}
+class RecFilesCache extends BasicRecFilesCache {
+    constructor() {
+        super(...arguments);
+        this._recFiles = new Array();
+    }
+    get recFiles() {
+        return this._recFiles;
+    }
+    getRecFile(index) {
+        return this._recFiles[index];
+    }
+    length() {
+        return this._recFiles.length;
+    }
+    expire() {
+        if (this._sampleCount > this.maxSampleCount) {
+            // audio recorder list is sorted: lower index is newer
+            for (let rfI = this._recFiles.length - 1; rfI >= 0; rfI--) {
+                if (this._sampleCount <= this.maxSampleCount) {
+                    break;
+                }
+                let toBeExpiredRf = this._recFiles[rfI];
+                if (toBeExpiredRf.serverPersisted) {
+                    if (!RecordingFileUtils.equals(toBeExpiredRf, this.currentRecordingFile)) {
+                        // expire recording files first stored to the cache
+                        let expiredAudio = RecordingFileUtils.expireAudioData(toBeExpiredRf);
+                        if (expiredAudio) {
+                            this._sampleCount -= expiredAudio.sampleCounts();
+                            if (BasicRecFilesCache.DEBUG)
+                                console.debug("Rec. files cache: Expired #" + rfI + ". Cache samples: " + this._sampleCount);
+                        }
+                    }
+                    else {
+                        if (BasicRecFilesCache.DEBUG)
+                            console.debug("Rec. files cache: #" + rfI + " is current file. (not expiring)");
+                    }
+                }
+                else {
+                    if (BasicRecFilesCache.DEBUG)
+                        console.debug("Rec. files cache: #" + rfI + " not yet server persisted.");
+                }
             }
-        });
+        }
     }
-};
-BasicRecorder.DEFAULT_CHUNK_SIZE_SECONDS = 30;
-BasicRecorder = __decorate([
-    __param(3, Inject(SPEECHRECORDER_CONFIG))
-], BasicRecorder);
+    addRecFile(recFile) {
+        this.expire();
+        this._recFiles.push(recFile);
+        this._sampleCount += RecordingFileUtils.sampleCount(recFile);
+        if (BasicRecFilesCache.DEBUG)
+            console.debug("Rec. files cache: Added. Cache samples: " + this._sampleCount);
+    }
+    setRecFileAudioData(recFile, adh) {
+        this.expire();
+        this._sampleCount -= RecordingFileUtils.sampleCount(recFile);
+        RecordingFileUtils.setAudioData(recFile, adh);
+        this._sampleCount += RecordingFileUtils.sampleCount(recFile);
+        if (BasicRecFilesCache.DEBUG)
+            console.debug("Rec. files cache: Set audio data. Cache samples: " + this._sampleCount);
+    }
+}
 
 /**
  * Created by klausj on 17.06.2017.
@@ -8025,16 +9481,62 @@ class RecordingService {
         let recUrl = recFilesUrl + '/' + encItemcode + '/' + version;
         return this.audioRequest(recUrl);
     }
+    fetchRecordingFileAudioBuffer(aCtx, projectName, recordingFile) {
+        let wobs = new Observable(observer => {
+            let recFileId = recordingFile.recordingFileId;
+            if (!recFileId) {
+                recFileId = recordingFile.uuid;
+            }
+            if (recordingFile.session && recFileId) {
+                let obs = this.fetchAudiofile(projectName, recordingFile.session, recFileId);
+                obs.subscribe(resp => {
+                    // Do not use Promise version, which does not work with Safari 13 (13.0.5)
+                    if (resp.body) {
+                        aCtx.decodeAudioData(resp.body, ab => {
+                            observer.next(ab);
+                            observer.complete();
+                        }, error => {
+                            observer.error(error);
+                            observer.complete();
+                        });
+                    }
+                    else {
+                        observer.error('Fetching audio file: response has no body');
+                    }
+                }, (error) => {
+                    if (error.status == 404) {
+                        // Interpret not as an error, the file ist not recorded yet
+                        observer.next(null);
+                        observer.complete();
+                    }
+                    else {
+                        // all other states are errors
+                        observer.error(error);
+                        observer.complete();
+                    }
+                });
+            }
+            else {
+                observer.error();
+            }
+        });
+        return wobs;
+    }
     fetchAndApplyRecordingFile(aCtx, projectName, recordingFile) {
         let wobs = new Observable(observer => {
-            if (recordingFile.session && recordingFile.recordingFileId) {
-                let obs = this.fetchAudiofile(projectName, recordingFile.session, recordingFile.recordingFileId);
+            let recFileId = recordingFile.recordingFileId;
+            if (!recFileId) {
+                recFileId = recordingFile.uuid;
+            }
+            if (recordingFile.session && recFileId) {
+                let obs = this.fetchAudiofile(projectName, recordingFile.session, recFileId);
                 obs.subscribe(resp => {
                     //console.log("Fetched audio file. HTTP response status: "+resp.status+", type: "+resp.type+", byte length: "+ resp.body.byteLength);
                     // Do not use Promise version, which does not work with Safari 13 (13.0.5)
                     if (resp.body) {
                         aCtx.decodeAudioData(resp.body, ab => {
-                            recordingFile.audioBuffer = ab;
+                            let adh = new AudioDataHolder(ab, null);
+                            RecordingFileUtils.setAudioData(recordingFile, adh);
                             if (this.debugDelay > 0) {
                                 window.setTimeout(() => {
                                     observer.next(recordingFile);
@@ -8072,6 +9574,47 @@ class RecordingService {
         });
         return wobs;
     }
+    fetchSprRecordingFileAudioBuffer(aCtx, projectName, recordingFile) {
+        let wobs = new Observable(observer => {
+            if (recordingFile.session) {
+                let obs = this.fetchSprAudiofile(projectName, recordingFile.session, recordingFile.itemCode, recordingFile.version);
+                obs.subscribe({
+                    next: resp => {
+                        // Do not use Promise version, which does not work with Safari 13 (13.0.5)
+                        if (resp.body) {
+                            aCtx.decodeAudioData(resp.body, ab => {
+                                //RecordingFileUtils.setAudioData(recordingFile,new AudioDataHolder(ab,null));
+                                observer.next(ab);
+                                observer.complete();
+                            }, error => {
+                                observer.error(error);
+                                observer.complete();
+                            });
+                        }
+                        else {
+                            observer.error('Fetching audio file: response has no body');
+                        }
+                    },
+                    error: (error) => {
+                        if (error.status == 404) {
+                            // Interpret not as an error, the file ist not recorded yet
+                            observer.next(null);
+                            observer.complete();
+                        }
+                        else {
+                            // all other states are errors
+                            observer.error(error);
+                            observer.complete();
+                        }
+                    }
+                });
+            }
+            else {
+                observer.error();
+            }
+        });
+        return wobs;
+    }
     fetchAndApplySprRecordingFile(aCtx, projectName, recordingFile) {
         let wobs = new Observable(observer => {
             if (recordingFile.session) {
@@ -8081,7 +9624,7 @@ class RecordingService {
                     // Do not use Promise version, which does not work with Safari 13 (13.0.5)
                     if (resp.body) {
                         aCtx.decodeAudioData(resp.body, ab => {
-                            recordingFile.audioBuffer = ab;
+                            RecordingFileUtils.setAudioData(recordingFile, new AudioDataHolder(ab, null));
                             if (this.debugDelay > 0) {
                                 window.setTimeout(() => {
                                     observer.next(recordingFile);
@@ -8126,7 +9669,8 @@ class RecordingService {
                 // Do not use Promise version, which does not work with Safari 13
                 if (resp.body) {
                     aCtx.decodeAudioData(resp.body, ab => {
-                        let rf = new SprRecordingFile(sessId, itemcode, version, ab);
+                        let adh = new AudioDataHolder(ab, null);
+                        let rf = new SprRecordingFile(sessId, itemcode, version, adh);
                         if (this.debugDelay > 0) {
                             window.setTimeout(() => {
                                 observer.next(rf);
@@ -8246,14 +9790,9 @@ const DEFAULT_PRE_REC_DELAY = 1000;
 const DEFAULT_POST_REC_DELAY = 500;
 class SessionManager extends BasicRecorder {
     constructor(changeDetectorRef, renderer, dialog, sessionService, recFileService, uploader, config) {
-        super(dialog, sessionService, uploader, config);
-        this.changeDetectorRef = changeDetectorRef;
+        super(changeDetectorRef, dialog, sessionService, uploader, config);
         this.renderer = renderer;
-        this.dialog = dialog;
-        this.sessionService = sessionService;
         this.recFileService = recFileService;
-        this.uploader = uploader;
-        this.config = config;
         this.enableUploadRecordings = true;
         this.enableDownloadRecordings = false;
         this.status = 0 /* BLOCKED */;
@@ -8287,7 +9826,7 @@ class SessionManager extends BasicRecorder {
         };
     }
     ngOnDestroy() {
-        console.debug("Com destroy, disable wake lock.");
+        //console.debug("Com destroy, disable wake lock.")
         this.disableWakeLockCond();
         this.destroyed = true;
         // TODO stop capture /playback
@@ -8418,7 +9957,7 @@ class SessionManager extends BasicRecorder {
     progressPercentValue() {
         let v = 100;
         if (this.items) {
-            v = this.promptIndex * 100 / (this.items.length - 1);
+            v = this.promptIndex * 100 / (this.items.length() - 1);
         }
         return v;
     }
@@ -8432,9 +9971,6 @@ class SessionManager extends BasicRecorder {
         return ((this._session != null) && (this._session.type === 'TEST_DEF_A') && (this.audioDevices != null) && this.audioDevices.length > 0);
     }
     set controlAudioPlayer(controlAudioPlayer) {
-        if (this._controlAudioPlayer) {
-            //this._controlAudioPlayer.listener=null;
-        }
         this._controlAudioPlayer = controlAudioPlayer;
         if (this._controlAudioPlayer) {
             this._controlAudioPlayer.listener = this;
@@ -8519,6 +10055,8 @@ class SessionManager extends BasicRecorder {
             this.autorecording = true;
         }
         if (this.ac != null) {
+            // Hide loading hint on livelevel display
+            this.audioFetching = false;
             if (!this.ac.opened) {
                 if (this._selectedDeviceId) {
                     console.log("Open session with audio device Id: \'" + this._selectedDeviceId + "\' for " + this._channelCount + " channels");
@@ -8535,7 +10073,7 @@ class SessionManager extends BasicRecorder {
     }
     loadScript() {
         this.promptItemCount = 0;
-        this.items = new Array();
+        this.items = new SprItemsCache();
         let ln = 0;
         //TODO randomize not supported
         for (let si = 0; si < this._script.sections.length; si++) {
@@ -8549,7 +10087,7 @@ class SessionManager extends BasicRecorder {
                     let pi = pis[piSectIdx];
                     let promptAsStr = PromptitemUtil.toPlainTextString(pi);
                     let it = new Item$1(promptAsStr, section.training, (!pi.type || pi.type === 'recording'));
-                    this.items.push(it);
+                    this.items.addItem(it);
                     ln++;
                 }
             }
@@ -8590,10 +10128,10 @@ class SessionManager extends BasicRecorder {
     }
     downloadRecording() {
         if (this.displayRecFile) {
-            let ab = this.displayRecFile.audioBuffer;
+            let ab = this.displayRecFile.audioDataHolder;
             let ww = new WavWriter();
-            if (ab) {
-                let wavFile = ww.writeAsync(ab, (wavFile) => {
+            if (ab === null || ab === void 0 ? void 0 : ab.buffer) {
+                let wavFile = ww.writeAsync(ab.buffer, (wavFile) => {
                     let blob = new Blob([wavFile], { type: 'audio/wav' });
                     let rfUrl = URL.createObjectURL(blob);
                     let dataDnlLnk = this.renderer.createElement('a');
@@ -8616,7 +10154,10 @@ class SessionManager extends BasicRecorder {
     set displayRecFile(displayRecFile) {
         this._displayRecFile = displayRecFile;
         if (this._displayRecFile) {
-            let ab = this._displayRecFile.audioBuffer;
+            if (this.items) {
+                this.items.currentRecordingFile = this._displayRecFile;
+            }
+            let ab = this._displayRecFile.audioDataHolder;
             if (ab) {
                 this.displayAudioClip = new AudioClip(ab);
                 this.controlAudioPlayer.audioClip = this.displayAudioClip;
@@ -8624,27 +10165,46 @@ class SessionManager extends BasicRecorder {
             else {
                 // clear for now ...
                 this.displayAudioClip = null;
-                this.controlAudioPlayer.audioClip = null;
+                if (this.controlAudioPlayer) {
+                    this.controlAudioPlayer.audioClip = null;
+                }
                 if (this._controlAudioPlayer && this._session) {
                     //... and try to fetch from server
-                    this.audioFetchSubscription = this.recFileService.fetchAndApplySprRecordingFile(this._controlAudioPlayer.context, this._session.project, this._displayRecFile).subscribe((rf) => {
-                        let fab = null;
-                        if (rf && this._displayRecFile) {
-                            fab = this._displayRecFile.audioBuffer;
-                        }
-                        else {
-                            this.statusMsg = 'Recording file could not be loaded.';
+                    this.audioFetching = true;
+                    let rf = this._displayRecFile;
+                    this.audioFetchSubscription = this.recFileService.fetchSprRecordingFileAudioBuffer(this._controlAudioPlayer.context, this._session.project, rf).subscribe({
+                        next: (ab) => {
+                            this.audioFetching = false;
+                            let fabDh = null;
+                            if (ab) {
+                                if (rf && this.items) {
+                                    if (SessionManager.FORCE_ARRRAY_AUDIO_BUFFER) {
+                                        let aab = ArrayAudioBuffer.fromAudioBuffer(ab);
+                                        fabDh = new AudioDataHolder(null, aab);
+                                    }
+                                    else {
+                                        fabDh = new AudioDataHolder(ab);
+                                    }
+                                    this.items.setSprRecFileAudioData(rf, fabDh);
+                                }
+                            }
+                            else {
+                                // Should actually be handled by the error resolver
+                                this.statusMsg = 'Recording file could not be loaded.';
+                                this.statusAlertType = 'error';
+                            }
+                            if (fabDh) {
+                                // this.displayAudioClip could have been changed meanwhile, but the recorder unsubcribes before changing the item. Therefore there should be no risk to set to wrong item
+                                this.displayAudioClip = new AudioClip(fabDh);
+                            }
+                            this.controlAudioPlayer.audioClip = this.displayAudioClip;
+                            this.showRecording();
+                        }, error: err => {
+                            console.error("Could not load recording file from server: " + err);
+                            this.audioFetching = false;
+                            this.statusMsg = 'Recording file could not be loaded: ' + err;
                             this.statusAlertType = 'error';
                         }
-                        if (fab) {
-                            this.displayAudioClip = new AudioClip(fab);
-                        }
-                        this.controlAudioPlayer.audioClip = this.displayAudioClip;
-                        this.showRecording();
-                    }, err => {
-                        console.error("Could not load recording file from server: " + err);
-                        this.statusMsg = 'Recording file could not be loaded: ' + err;
-                        this.statusAlertType = 'error';
                     });
                 }
                 else {
@@ -8655,34 +10215,14 @@ class SessionManager extends BasicRecorder {
         }
         else {
             this.displayAudioClip = null;
-            this.controlAudioPlayer.audioClip = null;
+            if (this.controlAudioPlayer) {
+                this.controlAudioPlayer.audioClip = null;
+            }
         }
     }
     get displayRecFile() {
         return this._displayRecFile;
     }
-    showRecording() {
-        this.controlAudioPlayer.stop();
-        if (this.displayAudioClip) {
-            this.levelMeasure.calcBufferLevelInfos(this.displayAudioClip.buffer, LEVEL_BAR_INTERVALL_SECONDS).then((levelInfos) => {
-                this.displayLevelInfos = levelInfos;
-                this.changeDetectorRef.detectChanges();
-            });
-            this.playStartAction.disabled = false;
-        }
-        else {
-            // TODO
-            // Setting to null does not trigger a change if it was  null before (happens after nextitem() in AUTOPROGRESS mode)
-            // The level bar display does not clear, it shows the last captured stream
-            this.displayLevelInfos = null;
-            this.playStartAction.disabled = true;
-            // Collapse audio signal display if open
-            if (!this.audioSignalCollapsed) {
-                this.audioSignalCollapsed = true;
-            }
-        }
-        this.changeDetectorRef.detectChanges();
-    }
     isRecordingItem() {
         return (this.promptItem != null && this.promptItem.type !== 'nonrecording');
     }
@@ -8697,17 +10237,20 @@ class SessionManager extends BasicRecorder {
         if (this.audioFetchSubscription) {
             this.audioFetchSubscription.unsubscribe();
         }
+        this.audioFetching = false;
         this.clearPrompt();
         let isNonrecording = (this.promptItem.type === 'nonrecording');
         if (isNonrecording || !this.section.promptphase || this.section.promptphase === 'IDLE') {
             this.applyPrompt();
         }
         if (isNonrecording) {
+            this.displayRecFile = null;
+            this.displayRecFileVersion = 0;
             this.startStopSignalState = 4 /* OFF */;
         }
         else {
             if (this.items) {
-                let it = this.items[this.promptIndex];
+                let it = this.items.getItem(this.promptIndex);
                 if (!it.recs) {
                     it.recs = new Array();
                 }
@@ -8724,13 +10267,13 @@ class SessionManager extends BasicRecorder {
                     this.displayRecFileVersion = 0;
                 }
             }
-            if (!temporary) {
-                this.showRecording();
-            }
             if (!this.readonly) {
                 this.startStopSignalState = 0 /* IDLE */;
             }
         }
+        if (!temporary) {
+            this.showRecording();
+        }
         this.updateStartActionDisableState();
         this.updateNavigationActions();
     }
@@ -8768,7 +10311,7 @@ class SessionManager extends BasicRecorder {
     updateNavigationActions() {
         let fwdNxtActionDisabled = true;
         if (this.items) {
-            let currRecs = this.items[this._promptIndex].recs;
+            let currRecs = this.items.getItem(this._promptIndex).recs;
             fwdNxtActionDisabled = !(currRecs != null && currRecs.length > 0);
         }
         this.transportActions.fwdNextAction.disabled = this.navigationDisabled || fwdNxtActionDisabled;
@@ -8782,10 +10325,10 @@ class SessionManager extends BasicRecorder {
             newPrIdx = 0;
         }
         if (this.items != null) {
-            let itRecs = this.items[newPrIdx].recs;
+            let itRecs = this.items.getItem(newPrIdx).recs;
             while (itRecs != null && (itRecs.length > 0) && newPrIdx < this.promptItemCount) {
                 newPrIdx++;
-                itRecs = this.items[newPrIdx].recs;
+                itRecs = this.items.getItem(newPrIdx).recs;
             }
             if (!itRecs || itRecs.length == 0) {
                 this.promptIndex = newPrIdx;
@@ -8806,6 +10349,23 @@ class SessionManager extends BasicRecorder {
         }
     }
     started() {
+        let ic = this.promptItem.itemcode;
+        let rf = null;
+        if (this._session && ic) {
+            let sessId = this._session.sessionId;
+            let cpIdx = this.promptIndex;
+            if (this.items) {
+                let it = this.items.getItem(cpIdx);
+                if (!it.recs) {
+                    it.recs = new Array();
+                }
+                rf = new SprRecordingFile(sessId, ic, it.recs.length, null);
+                //it.recs.push(rf);
+                this.items.addSprRecFile(it, rf);
+                this.items.currentRecordingFile = rf;
+            }
+        }
+        this._recordingFile = rf;
         this.status = 3 /* PRE_RECORDING */;
         super.started();
         this.startStopSignalState = 1 /* PRERECORDING */;
@@ -8932,13 +10492,14 @@ class SessionManager extends BasicRecorder {
         if (rfd.recording && rfd.recording.itemcode) {
             let prIdx = this.promptIndexByItemcode(rfd.recording.itemcode);
             if (this.items != null && prIdx !== null) {
-                let it = this.items[prIdx];
+                let it = this.items.getItem(prIdx);
                 if (it && this._session) {
-                    if (!it.recs) {
-                        it.recs = new Array();
-                    }
+                    // if (!it.recs) {
+                    //   it.recs = new Array<SprRecordingFile>();
+                    // }
                     let rf = new SprRecordingFile(this._session.sessionId, rfd.recording.itemcode, rfd.version, null);
-                    it.recs[rfd.version] = rf;
+                    rf.serverPersisted = true;
+                    this.items.addSprRecFile(it, rf);
                 }
                 else {
                     //console.debug("WARN: No recording item with code: \"" +rfd.recording.itemcode+ "\" found.");
@@ -8952,6 +10513,7 @@ class SessionManager extends BasicRecorder {
     addRecordingFileByPromptIndex(promptIndex, rf) {
     }
     stopped() {
+        var _a;
         this.updateStartActionDisableState();
         this.transportActions.stopAction.disabled = true;
         this.transportActions.nextAction.disabled = true;
@@ -8960,22 +10522,24 @@ class SessionManager extends BasicRecorder {
         this.statusMsg = 'Recorded.';
         this.startStopSignalState = 0 /* IDLE */;
         let ad = null;
+        let ada = null;
+        let adh = null;
+        let frameLen = 0;
         if (this.ac != null) {
-            ad = this.ac.audioBuffer();
-        }
-        let ic = this.promptItem.itemcode;
-        let rf = null;
-        if (this._session && ic) {
-            let sessId = this._session.sessionId;
-            let cpIdx = this.promptIndex;
-            if (this.items) {
-                let it = this.items[cpIdx];
-                if (!it.recs) {
-                    it.recs = new Array();
-                }
-                rf = new SprRecordingFile(sessId, ic, it.recs.length, ad);
-                it.recs.push(rf);
+            if (this.uploadChunkSizeSeconds || SessionManager.FORCE_ARRRAY_AUDIO_BUFFER) {
+                ada = this.ac.audioBufferArray();
+                frameLen = ada.frameLen;
             }
+            else {
+                ad = this.ac.audioBuffer();
+                frameLen = ad.length;
+            }
+            adh = new AudioDataHolder(ad, ada);
+        }
+        // Use an own reference since the writing of the wave file is asynchronous and this._recordingFile might already contain the next recording
+        let rf = this._recordingFile;
+        if (rf && rf instanceof SprRecordingFile) {
+            (_a = this.items) === null || _a === void 0 ? void 0 : _a.setSprRecFileAudioData(rf, adh);
             if (this.enableUploadRecordings && !this.uploadChunkSizeSeconds) {
                 // TODO use SpeechRecorderconfig resp. RecfileService
                 // convert asynchronously to 16-bit integer PCM
@@ -8983,7 +10547,7 @@ class SessionManager extends BasicRecorder {
                 // TODO duplicate conversion for manual download
                 //console.log("Build wav writer...");
                 this.processingRecording = true;
-                if (ad && rf) {
+                if (ad) {
                     let ww = new WavWriter();
                     //new REST API URL
                     let apiEndPoint = '';
@@ -8996,7 +10560,7 @@ class SessionManager extends BasicRecorder {
                     let sessionsUrl = apiEndPoint + SessionService.SESSION_API_CTX;
                     let recUrl = sessionsUrl + '/' + rf.session + '/' + RECFILE_API_CTX + '/' + rf.itemCode;
                     ww.writeAsync(ad, (wavFile) => {
-                        this.postRecording(wavFile, recUrl);
+                        this.postRecording(wavFile, recUrl, rf);
                         this.processingRecording = false;
                         this.updateWakeLock();
                     });
@@ -9007,8 +10571,8 @@ class SessionManager extends BasicRecorder {
         let complete = true;
         if (this.items) {
             // search backwards, to gain faster detection of incomplete state
-            for (let ri = this.items.length - 1; ri >= 0; ri--) {
-                let it = this.items[ri];
+            for (let ri = this.items.length() - 1; ri >= 0; ri--) {
+                let it = this.items.getItem(ri);
                 if (it.recording && !it.training && (!it.recs || it.recs.length == 0)) {
                     complete = false;
                     break;
@@ -9073,13 +10637,13 @@ class SessionManager extends BasicRecorder {
         let sessionsUrl = apiEndPoint + SessionService.SESSION_API_CTX;
         let recUrl = sessionsUrl + '/' + ((_a = this.session) === null || _a === void 0 ? void 0 : _a.sessionId) + '/' + RECFILE_API_CTX + '/' + this.promptItem.itemcode + '/' + this.rfUuid + '/' + chunkIdx;
         ww.writeAsync(audioBuffer, (wavFile) => {
-            this.postRecording(wavFile, recUrl);
+            this.postRecording(wavFile, recUrl, null);
             this.processingRecording = false;
         });
     }
-    postRecording(wavFile, recUrl) {
+    postRecording(wavFile, recUrl, rf) {
         let wavBlob = new Blob([wavFile], { type: 'audio/wav' });
-        let ul = new Upload(wavBlob, recUrl);
+        let ul = new Upload(wavBlob, recUrl, rf);
         this.uploader.queueUpload(ul);
     }
     stop() {
@@ -9115,7 +10679,7 @@ SessionManager.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
     <app-warningbar [show]="isDefaultAudioTestSession()" warningText="This test uses default audio device! Regular sessions may require a particular audio device (microphone)!"></app-warningbar>
       <app-sprprompting [projectName]="projectName"
                         [startStopSignalState]="startStopSignalState" [promptItem]="promptItem" [showPrompt]="showPrompt"
-                        [items]="items"
+                        [items]="items?.items"
                         [transportActions]="transportActions"
                         [selectedItemIdx]="promptIndex" (onItemSelect)="itemSelect($event)" (onNextItem)="nextItem()" (onPrevItem)="prevItem()"
                         [audioSignalCollapsed]="audioSignalCollapsed" [displayAudioClip]="displayAudioClip"
@@ -9129,10 +10693,10 @@ SessionManager.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
 
 
     <div fxLayout="row" fxLayout.xs="column" [ngStyle]="{'height.px':100,'min-height.px': 100}" [ngStyle.xs]="{'height.px':125,'min-height.px': 125}">
-      <audio-levelbar fxFlex="1 0 1" [streamingMode]="isRecording()" [displayLevelInfos]="displayLevelInfos"></audio-levelbar>
+      <audio-levelbar fxFlex="1 0 1" [streamingMode]="isRecording()" [displayLevelInfos]="displayAudioClip?.levelInfos"  [stateLoading]="audioFetching"></audio-levelbar>
       <div fxLayout="row">
         <spr-recordingitemcontrols fxFlex="10 0 1"
-                                   [audioLoaded]="displayAudioClip?.buffer!==null"
+                                   [audioLoaded]="displayAudioClip?.audioDataHolder!==null"
                                    [playStartAction]="controlAudioPlayer?.startAction"
                                    [playStopAction]="controlAudioPlayer?.stopAction"
                                    [peakDbLvl]="peakLevelInDb"
@@ -9150,7 +10714,7 @@ SessionManager.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
       <div fxFlex="1 1 30%" fxLayoutAlign="start center">
         <app-sprstatusdisplay fxHide.xs [statusMsg]="statusMsg" [statusAlertType]="statusAlertType" [statusWaiting]="statusWaiting"></app-sprstatusdisplay>
       </div>
-      <app-sprtransport fxFlex="10 0 30%" fxLayoutAlign="center center" [readonly]="readonly" [actions]="transportActions" [navigationEnabled]="items==null || items.length>1"></app-sprtransport>
+      <app-sprtransport fxFlex="10 0 30%" fxLayoutAlign="center center" [readonly]="readonly" [actions]="transportActions" [navigationEnabled]="!items || items.length()>1"></app-sprtransport>
       <div fxFlex="1 1 30%" fxLayoutAlign="end center" fxLayout="row">
         <app-uploadstatus class="ricontrols" fxHide.xs fxLayoutAlign="end center" *ngIf="enableUploadRecordings" [value]="uploadProgress"
                           [status]="uploadStatus" [awaitNewUpload]="processingRecording"></app-uploadstatus>
@@ -9158,7 +10722,7 @@ SessionManager.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
         <app-readystateindicator class="ricontrols" fxLayoutAlign="end center" fxHide.xs [ready]="dataSaved && !isActive()"></app-readystateindicator>
       </div>
     </div>
-  `, isInline: true, styles: [":host{flex:2;background:lightgrey;display:flex;flex-direction:column;margin:0;padding:0;min-height:0px;overflow:hidden}\n", ".ricontrols{padding:4px;box-sizing:border-box;height:100%}\n", ".dark{background:darkgray}\n", ".controlpanel{align-content:center;align-items:center;margin:0;padding:20px;min-height:min-content}\n"], components: [{ type: WarningBar, selector: "app-warningbar", inputs: ["warningText", "show"] }, { type: Prompting, selector: "app-sprprompting", inputs: ["projectName", "startStopSignalState", "promptItem", "showPrompt", "items", "selectedItemIdx", "transportActions", "enableDownload", "audioSignalCollapsed", "displayAudioClip", "playStartAction", "playSelectionAction", "autoPlayOnSelectToggleAction", "playStopAction"], outputs: ["onItemSelect", "onNextItem", "onPrevItem"] }, { type: i7.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { type: LevelBar, selector: "audio-levelbar", inputs: ["streamingMode", "displayLevelInfos"] }, { type: RecordingItemControls, selector: "spr-recordingitemcontrols", inputs: ["audioSignalCollapsed", "enableDownload", "peakDbLvl", "agc", "audioLoaded", "playStartAction", "playStopAction", "displayLevelInfos"], outputs: ["onShowRecordingDetails", "onDownloadRecording"] }, { type: UploadStatus, selector: "app-uploadstatus", inputs: ["value", "awaitNewUpload", "status"] }, { type: WakeLockIndicator, selector: "app-wakelockindicator", inputs: ["screenLocked"] }, { type: ReadyStateIndicator, selector: "app-readystateindicator", inputs: ["ready"] }, { type: StatusDisplay, selector: "app-sprstatusdisplay", inputs: ["statusAlertType", "statusMsg", "statusWaiting"] }, { type: TransportPanel, selector: "app-sprtransport", inputs: ["readonly", "actions", "navigationEnabled", "pausingEnabled"] }], directives: [{ type: i3$1.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }, { type: i8.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i3$1.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i8.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }] });
+  `, isInline: true, styles: [":host{flex:2;background:lightgrey;display:flex;flex-direction:column;margin:0;padding:0;min-height:0px;overflow:hidden}\n", ".ricontrols{padding:4px;box-sizing:border-box;height:100%}\n", ".dark{background:darkgray}\n", ".controlpanel{align-content:center;align-items:center;margin:0;padding:20px;min-height:min-content}\n"], components: [{ type: WarningBar, selector: "app-warningbar", inputs: ["warningText", "show"] }, { type: Prompting, selector: "app-sprprompting", inputs: ["projectName", "startStopSignalState", "promptItem", "showPrompt", "items", "selectedItemIdx", "transportActions", "enableDownload", "audioSignalCollapsed", "displayAudioClip", "playStartAction", "playSelectionAction", "autoPlayOnSelectToggleAction", "playStopAction"], outputs: ["onItemSelect", "onNextItem", "onPrevItem"] }, { type: i7.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { type: LevelBar, selector: "audio-levelbar", inputs: ["streamingMode", "displayLevelInfos", "stateLoading"] }, { type: RecordingItemControls, selector: "spr-recordingitemcontrols", inputs: ["audioSignalCollapsed", "enableDownload", "peakDbLvl", "agc", "audioLoaded", "playStartAction", "playStopAction", "displayLevelInfos"], outputs: ["onShowRecordingDetails", "onDownloadRecording"] }, { type: UploadStatus, selector: "app-uploadstatus", inputs: ["value", "awaitNewUpload", "status"] }, { type: WakeLockIndicator, selector: "app-wakelockindicator", inputs: ["screenLocked"] }, { type: ReadyStateIndicator, selector: "app-readystateindicator", inputs: ["ready"] }, { type: StatusDisplay, selector: "app-sprstatusdisplay", inputs: ["statusAlertType", "statusMsg", "statusWaiting"] }, { type: TransportPanel, selector: "app-sprtransport", inputs: ["readonly", "actions", "navigationEnabled", "pausingEnabled"] }], directives: [{ type: i3$1.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }, { type: i8.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i3$1.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i8.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SessionManager, decorators: [{
             type: Component,
             args: [{
@@ -9169,7 +10733,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
     <app-warningbar [show]="isDefaultAudioTestSession()" warningText="This test uses default audio device! Regular sessions may require a particular audio device (microphone)!"></app-warningbar>
       <app-sprprompting [projectName]="projectName"
                         [startStopSignalState]="startStopSignalState" [promptItem]="promptItem" [showPrompt]="showPrompt"
-                        [items]="items"
+                        [items]="items?.items"
                         [transportActions]="transportActions"
                         [selectedItemIdx]="promptIndex" (onItemSelect)="itemSelect($event)" (onNextItem)="nextItem()" (onPrevItem)="prevItem()"
                         [audioSignalCollapsed]="audioSignalCollapsed" [displayAudioClip]="displayAudioClip"
@@ -9183,10 +10747,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
 
 
     <div fxLayout="row" fxLayout.xs="column" [ngStyle]="{'height.px':100,'min-height.px': 100}" [ngStyle.xs]="{'height.px':125,'min-height.px': 125}">
-      <audio-levelbar fxFlex="1 0 1" [streamingMode]="isRecording()" [displayLevelInfos]="displayLevelInfos"></audio-levelbar>
+      <audio-levelbar fxFlex="1 0 1" [streamingMode]="isRecording()" [displayLevelInfos]="displayAudioClip?.levelInfos"  [stateLoading]="audioFetching"></audio-levelbar>
       <div fxLayout="row">
         <spr-recordingitemcontrols fxFlex="10 0 1"
-                                   [audioLoaded]="displayAudioClip?.buffer!==null"
+                                   [audioLoaded]="displayAudioClip?.audioDataHolder!==null"
                                    [playStartAction]="controlAudioPlayer?.startAction"
                                    [playStopAction]="controlAudioPlayer?.stopAction"
                                    [peakDbLvl]="peakLevelInDb"
@@ -9204,7 +10768,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
       <div fxFlex="1 1 30%" fxLayoutAlign="start center">
         <app-sprstatusdisplay fxHide.xs [statusMsg]="statusMsg" [statusAlertType]="statusAlertType" [statusWaiting]="statusWaiting"></app-sprstatusdisplay>
       </div>
-      <app-sprtransport fxFlex="10 0 30%" fxLayoutAlign="center center" [readonly]="readonly" [actions]="transportActions" [navigationEnabled]="items==null || items.length>1"></app-sprtransport>
+      <app-sprtransport fxFlex="10 0 30%" fxLayoutAlign="center center" [readonly]="readonly" [actions]="transportActions" [navigationEnabled]="!items || items.length()>1"></app-sprtransport>
       <div fxFlex="1 1 30%" fxLayoutAlign="end center" fxLayout="row">
         <app-uploadstatus class="ricontrols" fxHide.xs fxLayoutAlign="end center" *ngIf="enableUploadRecordings" [value]="uploadProgress"
                           [status]="uploadStatus" [awaitNewUpload]="processingRecording"></app-uploadstatus>
@@ -9497,7 +11061,7 @@ class SpeechrecorderngComponent extends RecorderComponent {
             this.uploadUpdate(ue);
         };
         window.addEventListener('beforeunload', (e) => {
-            console.debug("Before page unload event");
+            //console.debug("Before page unload event");
             if (this.ready()) {
                 return;
             }
@@ -9816,14 +11380,15 @@ class AudioDisplayPlayer {
         if (this.aCtx) {
             this.aCtx.decodeAudioData(data, (audioBuffer) => {
                 //console.debug("Audio Buffer Samplerate: ", audioBuffer.sampleRate)
-                this.audioClip = new AudioClip(audioBuffer);
+                let adh = new AudioDataHolder(audioBuffer, null);
+                this.audioClip = new AudioClip(adh);
             });
         }
     }
-    set audioData(audioBuffer) {
-        this.audioDisplayScrollPane.audioData = audioBuffer;
-        if (audioBuffer) {
-            let clip = new AudioClip(audioBuffer);
+    set audioData(audioData) {
+        this.audioDisplayScrollPane.audioData = audioData;
+        if (audioData) {
+            let clip = new AudioClip(audioData);
             if (this.ap) {
                 this.ap.audioClip = clip;
                 this.playStartAction.disabled = false;
@@ -9845,7 +11410,7 @@ class AudioDisplayPlayer {
         let audioData = null;
         let sel = null;
         if (audioClip) {
-            audioData = audioClip.buffer;
+            audioData = audioClip.audioDataHolder;
             sel = audioClip.selection;
             if (this._audioClip) {
                 this._audioClip.addSelectionObserver((ac) => {
@@ -10116,7 +11681,7 @@ class RecordingFileService {
                     // Do not use Promise version, which does not work with Safari 13
                     if (resp.body) {
                         aCtx.decodeAudioData(resp.body, ab => {
-                            recordingFile.audioBuffer = ab;
+                            RecordingFileUtils.setAudioData(recordingFile, new AudioDataHolder(ab));
                             if (this.debugDelay > 0) {
                                 window.setTimeout(() => {
                                     observer.next(recordingFile);
@@ -10166,7 +11731,7 @@ class RecordingFileService {
                     if (resp.body) {
                         aCtx.decodeAudioData(resp.body, ab => {
                             if (rf) {
-                                rf.audioBuffer = ab;
+                                RecordingFileUtils.setAudioData(rf, new AudioDataHolder(ab));
                             }
                             else {
                                 observer.error('Recording file object null');
@@ -10217,7 +11782,8 @@ class RecordingFileService {
                     if (resp.body) {
                         aCtx.decodeAudioData(resp.body, ab => {
                             if (rf) {
-                                rf.audioBuffer = ab;
+                                let adh = new AudioDataHolder(ab);
+                                RecordingFileUtils.setAudioData(rf, adh);
                             }
                             else {
                                 observer.error('Recording file object null');
@@ -10260,7 +11826,7 @@ class RecordingFileService {
             // append UUID to make request URL unique to avoid localhost server caching
             recUrl = recUrl + '.json?requestUUID=' + UUID.generate();
         }
-        console.log("Path request URL: " + recUrl);
+        //console.log("Path request URL: "+recUrl)
         return this.http.patch(recUrl, { editSampleRate: editSampleRate, editStartFrame: editStartFrame, editEndFrame: editEndFrame }, { withCredentials: this.withCredentials });
     }
 }
@@ -10280,6 +11846,7 @@ class RecordingFileMetaComponent {
     constructor() {
         this.sessionId = null;
         this._recordingFile = null;
+        this.stateLoading = false;
         this.itemCode = null;
         this.uuid = null;
     }
@@ -10296,12 +11863,12 @@ class RecordingFileMetaComponent {
             }
             if (this.itemCode) {
                 this.uuid = null;
-                console.debug("SprRecordingFile: " + this.itemCode + " UUID: " + this.uuid);
+                //console.debug("SprRecordingFile: "+this.itemCode+ " UUID: "+this.uuid)
             }
             else {
                 this.itemCode = null;
                 this.uuid = (_b = this._recordingFile) === null || _b === void 0 ? void 0 : _b.uuid;
-                console.debug("RecordingFile: " + this.itemCode + " UUID: " + this.uuid);
+                //console.debug("RecordingFile: "+this.itemCode+ " UUID: "+this.uuid)
             }
         }
         else {
@@ -10318,10 +11885,11 @@ class RecordingFileMetaComponent {
     }
 }
 RecordingFileMetaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: RecordingFileMetaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-RecordingFileMetaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: RecordingFileMetaComponent, selector: "app-recording-file-meta", inputs: { sessionId: "sessionId", recordingFile: "recordingFile" }, ngImport: i0, template: `
+RecordingFileMetaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: RecordingFileMetaComponent, selector: "app-recording-file-meta", inputs: { sessionId: "sessionId", stateLoading: "stateLoading", recordingFile: "recordingFile" }, ngImport: i0, template: `
     <mat-card>
       <mat-card-title>Recording file ID: {{recordingFile?.recordingFileId}}</mat-card-title>
       <mat-card-content>
+        <mat-progress-spinner *ngIf="stateLoading" mode="indeterminate" [diameter]="20"></mat-progress-spinner>
         <table>
           <tr *ngIf="itemCode">
             <td>Itemcode:</td>
@@ -10351,7 +11919,7 @@ RecordingFileMetaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
         </table>
       </mat-card-content>
     </mat-card>
-  `, isInline: true, components: [{ type: i1$4.MatCard, selector: "mat-card", exportAs: ["matCard"] }], directives: [{ type: i1$4.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { type: i1$4.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+  `, isInline: true, components: [{ type: i1$4.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i1$3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], directives: [{ type: i1$4.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { type: i1$4.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: RecordingFileMetaComponent, decorators: [{
             type: Component,
             args: [{
@@ -10360,6 +11928,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
     <mat-card>
       <mat-card-title>Recording file ID: {{recordingFile?.recordingFileId}}</mat-card-title>
       <mat-card-content>
+        <mat-progress-spinner *ngIf="stateLoading" mode="indeterminate" [diameter]="20"></mat-progress-spinner>
         <table>
           <tr *ngIf="itemCode">
             <td>Itemcode:</td>
@@ -10394,6 +11963,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 }]
         }], propDecorators: { sessionId: [{
                 type: Input
+            }], stateLoading: [{
+                type: Input
             }], recordingFile: [{
                 type: Input
             }] } });
@@ -10536,6 +12107,7 @@ class RecordingFileViewComponent extends AudioDisplayPlayer {
         this.recordingFileVersion = null;
         this.routedByQueryParam = false;
         this.posInList = null;
+        this.audioFetching = false;
         this.naviInfoLoading = false;
         this.parentE = this.eRef.nativeElement;
         this.firstAction = new Action('First');
@@ -10707,18 +12279,20 @@ class RecordingFileViewComponent extends AudioDisplayPlayer {
         this.updateActions();
         let audioContext = AudioContextProvider.audioContextInstance();
         if (audioContext) {
+            this.audioFetching = true;
             this.recordingFileService.fetchSprRecordingFile(audioContext, rfId).subscribe(value => {
+                this.audioFetching = false;
                 this.status = 'Audio file loaded.';
                 let clip = null;
                 this.recordingFile = value;
                 if (this.recordingFile) {
-                    let ab = this.recordingFile.audioBuffer;
+                    let ab = this.recordingFile.audioDataHolder;
                     if (ab) {
                         clip = new AudioClip(ab);
                         let esffsr = null;
                         let eeffsr = null;
                         let esr = null;
-                        if (clip.buffer != null) {
+                        if (clip.audioDataHolder != null) {
                             esr = ab.sampleRate;
                             if (esr != null) {
                                 esffsr = RecordingFileUtil.editStartFrameForSampleRate(this.recordingFile, esr);
@@ -10730,8 +12304,8 @@ class RecordingFileViewComponent extends AudioDisplayPlayer {
                                     sel = new Selection(ab.sampleRate, esffsr, eeffsr);
                                 }
                                 else {
-                                    let ch0 = ab.getChannelData(0);
-                                    let frameLength = ch0.length;
+                                    //let ch0 = ab.getChannelData(0);
+                                    let frameLength = ab.frameLen;
                                     sel = new Selection(esr, esffsr, frameLength);
                                 }
                             }
@@ -10745,6 +12319,7 @@ class RecordingFileViewComponent extends AudioDisplayPlayer {
                 this.audioClip = clip;
                 this.loadedRecfile();
             }, error1 => {
+                this.audioFetching = false;
                 this.status = 'Error loading audio file!';
             });
         }
@@ -10854,7 +12429,7 @@ class RecordingFileViewComponent extends AudioDisplayPlayer {
                             for (let avRfV of avRf) {
                                 os += avRfV.version + '/';
                             }
-                            console.debug(os);
+                            //console.debug(os);
                         }
                     }
                     this.updatePos();
@@ -10870,7 +12445,7 @@ RecordingFileViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
 
     <audio-display-scroll-pane #audioDisplayScrollPane></audio-display-scroll-pane>
     <div class="ctrlview">
-      <app-recording-file-meta [sessionId]="sessionId" [recordingFile]="recordingFile"></app-recording-file-meta>
+      <app-recording-file-meta [sessionId]="sessionId" [recordingFile]="recordingFile" [stateLoading]="audioFetching"></app-recording-file-meta>
 
     <audio-display-control [audioClip]="audioClip"
                              [playStartAction]="playStartAction"
@@ -10883,7 +12458,7 @@ RecordingFileViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
                            [zoomFitToPanelAction]="zoomFitToPanelAction"></audio-display-control>
       <app-recording-file-navi [items]="availRecFiles?.length" [itemPos]="posInList" [version]="recordingFileVersion" [versions]="versions" [firstAction]="firstAction" [prevAction]="prevAction" [nextAction]="nextAction" [lastAction]="lastAction" [selectVersion]="toVersionAction" [naviInfoLoading]="naviInfoLoading"></app-recording-file-navi>
       </div>
-  `, isInline: true, styles: [":host{flex:2;display:flex;flex-direction:column;min-height:0;overflow:hidden;padding:20px;z-index:5;box-sizing:border-box;background-color:#fff}\n", ".ctrlview{display:flex;flex-direction:row}\n", "audio-display-control{flex:3}\n"], components: [{ type: AudioDisplayScrollPane, selector: "audio-display-scroll-pane", inputs: ["audioClip"], outputs: ["zoomInAction", "zoomOutAction", "zoomSelectedAction", "zoomFitToPanelAction"] }, { type: RecordingFileMetaComponent, selector: "app-recording-file-meta", inputs: ["sessionId", "recordingFile"] }, { type: AudioDisplayControl, selector: "audio-display-control", inputs: ["audioClip", "playStartAction", "playSelectionAction", "playStopAction", "zoomInAction", "zoomOutAction", "zoomFitToPanelAction", "zoomSelectedAction", "autoPlayOnSelectToggleAction"] }, { type: RecordingFileNaviComponent, selector: "app-recording-file-navi", inputs: ["firstAction", "prevAction", "nextAction", "lastAction", "items", "itemPos", "selectVersion", "versions", "version", "naviInfoLoading"] }] });
+  `, isInline: true, styles: [":host{flex:2;display:flex;flex-direction:column;min-height:0;overflow:hidden;padding:20px;z-index:5;box-sizing:border-box;background-color:#fff}\n", ".ctrlview{display:flex;flex-direction:row}\n", "audio-display-control{flex:3}\n"], components: [{ type: AudioDisplayScrollPane, selector: "audio-display-scroll-pane", inputs: ["audioClip"], outputs: ["zoomInAction", "zoomOutAction", "zoomSelectedAction", "zoomFitToPanelAction"] }, { type: RecordingFileMetaComponent, selector: "app-recording-file-meta", inputs: ["sessionId", "stateLoading", "recordingFile"] }, { type: AudioDisplayControl, selector: "audio-display-control", inputs: ["audioClip", "playStartAction", "playSelectionAction", "playStopAction", "zoomInAction", "zoomOutAction", "zoomFitToPanelAction", "zoomSelectedAction", "autoPlayOnSelectToggleAction"] }, { type: RecordingFileNaviComponent, selector: "app-recording-file-navi", inputs: ["firstAction", "prevAction", "nextAction", "lastAction", "items", "itemPos", "selectVersion", "versions", "version", "naviInfoLoading"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: RecordingFileViewComponent, decorators: [{
             type: Component,
             args: [{
@@ -10892,7 +12467,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
 
     <audio-display-scroll-pane #audioDisplayScrollPane></audio-display-scroll-pane>
     <div class="ctrlview">
-      <app-recording-file-meta [sessionId]="sessionId" [recordingFile]="recordingFile"></app-recording-file-meta>
+      <app-recording-file-meta [sessionId]="sessionId" [recordingFile]="recordingFile" [stateLoading]="audioFetching"></app-recording-file-meta>
 
     <audio-display-control [audioClip]="audioClip"
                              [playStartAction]="playStartAction"
@@ -10986,7 +12561,7 @@ class RecordingFileUI extends RecordingFileViewComponent {
     applySelection() {
         var _a;
         if (this.audioClip) {
-            let ab = this.audioClip.buffer;
+            let ab = this.audioClip.audioDataHolder;
             let s = this.audioClip.selection;
             if (ab && ((_a = this.recordingFile) === null || _a === void 0 ? void 0 : _a.recordingFileId)) {
                 let sr = null;
@@ -11024,7 +12599,7 @@ RecordingFileUI.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
 
     <audio-display-scroll-pane #audioDisplayScrollPane></audio-display-scroll-pane>
       <div class="ctrlview">
-        <app-recording-file-meta [sessionId]="sessionId"  [recordingFile]="recordingFile"></app-recording-file-meta>
+        <app-recording-file-meta [sessionId]="sessionId"  [recordingFile]="recordingFile" [stateLoading]="audioFetching"></app-recording-file-meta>
     <audio-display-control [audioClip]="audioClip"
                              [playStartAction]="playStartAction"
                              [playSelectionAction]="playSelectionAction"
@@ -11038,7 +12613,7 @@ RecordingFileUI.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
       </div>
 
       <button mat-raised-button color="accent" (click)="applySelection()" [disabled]="editSaved">{{this.applyButtonText()}}</button>
-  `, isInline: true, styles: [":host{flex:2;display:flex;flex-direction:column;min-height:0;overflow:hidden;padding:20px;z-index:5;box-sizing:border-box;background-color:#fff}\n", ".ctrlview{display:flex;flex-direction:row}\n", "audio-display-control{flex:3}\n"], components: [{ type: AudioDisplayScrollPane, selector: "audio-display-scroll-pane", inputs: ["audioClip"], outputs: ["zoomInAction", "zoomOutAction", "zoomSelectedAction", "zoomFitToPanelAction"] }, { type: RecordingFileMetaComponent, selector: "app-recording-file-meta", inputs: ["sessionId", "recordingFile"] }, { type: AudioDisplayControl, selector: "audio-display-control", inputs: ["audioClip", "playStartAction", "playSelectionAction", "playStopAction", "zoomInAction", "zoomOutAction", "zoomFitToPanelAction", "zoomSelectedAction", "autoPlayOnSelectToggleAction"] }, { type: RecordingFileNaviComponent, selector: "app-recording-file-navi", inputs: ["firstAction", "prevAction", "nextAction", "lastAction", "items", "itemPos", "selectVersion", "versions", "version", "naviInfoLoading"] }, { type: i3$2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] });
+  `, isInline: true, styles: [":host{flex:2;display:flex;flex-direction:column;min-height:0;overflow:hidden;padding:20px;z-index:5;box-sizing:border-box;background-color:#fff}\n", ".ctrlview{display:flex;flex-direction:row}\n", "audio-display-control{flex:3}\n"], components: [{ type: AudioDisplayScrollPane, selector: "audio-display-scroll-pane", inputs: ["audioClip"], outputs: ["zoomInAction", "zoomOutAction", "zoomSelectedAction", "zoomFitToPanelAction"] }, { type: RecordingFileMetaComponent, selector: "app-recording-file-meta", inputs: ["sessionId", "stateLoading", "recordingFile"] }, { type: AudioDisplayControl, selector: "audio-display-control", inputs: ["audioClip", "playStartAction", "playSelectionAction", "playStopAction", "zoomInAction", "zoomOutAction", "zoomFitToPanelAction", "zoomSelectedAction", "autoPlayOnSelectToggleAction"] }, { type: RecordingFileNaviComponent, selector: "app-recording-file-navi", inputs: ["firstAction", "prevAction", "nextAction", "lastAction", "items", "itemPos", "selectVersion", "versions", "version", "naviInfoLoading"] }, { type: i3$2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: RecordingFileUI, decorators: [{
             type: Component,
             args: [{
@@ -11049,7 +12624,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
 
     <audio-display-scroll-pane #audioDisplayScrollPane></audio-display-scroll-pane>
       <div class="ctrlview">
-        <app-recording-file-meta [sessionId]="sessionId"  [recordingFile]="recordingFile"></app-recording-file-meta>
+        <app-recording-file-meta [sessionId]="sessionId"  [recordingFile]="recordingFile" [stateLoading]="audioFetching"></app-recording-file-meta>
     <audio-display-control [audioClip]="audioClip"
                              [playStartAction]="playStartAction"
                              [playSelectionAction]="playSelectionAction"
@@ -11106,7 +12681,8 @@ class MediaUtils {
 
 class RecordingList {
     constructor() {
-        this.recordingList = new Array();
+        //private recordingList:Array<RecordingFile>=new Array<RecordingFile>();
+        this.recordingList = new RecFilesCache();
         //cols=['index','length','samples','samplerate','action'];
         this.cols = ['index', 'startedDate', 'length', 'action'];
         this.selectDisabled = false;
@@ -11118,7 +12694,7 @@ class RecordingList {
         this.buildDataSource();
     }
     buildDataSource() {
-        this.recordingList.sort((a, b) => {
+        this.recordingList.recFiles.sort((a, b) => {
             let cmp = 0;
             let aD = null;
             let bD = null;
@@ -11139,25 +12715,36 @@ class RecordingList {
             }
             return cmp;
         });
-        this.recordingListDataSource.data = this.recordingList;
+        this.recordingListDataSource.data = this.recordingList.recFiles;
     }
-    push(rf) {
-        this.recordingList.push(rf);
+    addRecFile(rf) {
+        this.recordingList.addRecFile(rf);
         this.buildDataSource();
     }
+    setRecFileAudioData(recFile, adh) {
+        this.recordingList.setRecFileAudioData(recFile, adh);
+    }
     selectRecordingFile(rf) {
+        this.recordingList.currentRecordingFile = rf;
         this.selectedRecordingFileChanged.emit(rf);
     }
     selectTop() {
-        if (this.recordingList.length > 0) {
-            this.selectRecordingFile(this.recordingList[0]);
+        if (this.recordingList.recFiles.length > 0) {
+            this.selectRecordingFile(this.recordingList.recFiles[0]);
         }
     }
     lengthTimeFormatted(rf) {
         var _a;
         let str = '--:--:--';
-        if (rf.frames && rf.audioBuffer) {
-            str = MediaUtils.toMediaTime(rf.frames / ((_a = rf.audioBuffer) === null || _a === void 0 ? void 0 : _a.sampleRate));
+        let tl = null;
+        if (rf.timeLength) {
+            tl = rf.timeLength;
+        }
+        else if (rf.frames && rf.audioDataHolder) {
+            tl = rf.frames / ((_a = rf.audioDataHolder) === null || _a === void 0 ? void 0 : _a.sampleRate);
+        }
+        if (tl) {
+            str = MediaUtils.toMediaTime(tl);
         }
         return str;
     }
@@ -11243,8 +12830,11 @@ class RecorderCombiPane {
     }
     ngAfterViewInit() {
     }
-    push(rf) {
-        this.recordingListComp.push(rf);
+    addRecFile(rf) {
+        this.recordingListComp.addRecFile(rf);
+    }
+    setRecFileAudioData(recFile, adh) {
+        this.recordingListComp.setRecFileAudioData(recFile, adh);
     }
     selectRecordingFile(rf) {
         this.selectedRecordingFileChanged.emit(rf);
@@ -11317,15 +12907,11 @@ class Item {
 }
 class AudioRecorder extends BasicRecorder {
     constructor(changeDetectorRef, renderer, route, dialog, sessionService, recFileService, uploader, config) {
-        super(dialog, sessionService, uploader, config);
-        this.changeDetectorRef = changeDetectorRef;
+        super(changeDetectorRef, dialog, sessionService, uploader, config);
         this.renderer = renderer;
         this.route = route;
-        this.dialog = dialog;
-        this.sessionService = sessionService;
         this.recFileService = recFileService;
         this.uploader = uploader;
-        this.config = config;
         this._project = null;
         this.projectName = null;
         this.enableUploadRecordings = true;
@@ -11508,13 +13094,15 @@ class AudioRecorder extends BasicRecorder {
                     if (rfs) {
                         if (rfs instanceof Array) {
                             rfs.forEach((rf) => {
+                                // the list comes from the server, asssuem all recording files as server persisted
+                                rf.serverPersisted = true;
                                 if (rf.startedDate) {
                                     rf._startedAsDateObj = new Date(rf.startedDate);
                                 }
                                 if (rf.date) {
                                     rf._dateAsDateObj = new Date(rf.date);
                                 }
-                                this.recorderCombiPane.push(rf);
+                                this.recorderCombiPane.addRecFile(rf);
                             });
                         }
                         else {
@@ -11568,6 +13156,7 @@ class AudioRecorder extends BasicRecorder {
         return this._project;
     }
     selectRecordingFile(rf) {
+        this.audioFetching = false;
         this.displayRecFile = rf;
     }
     uploadUpdate(ue) {
@@ -11589,9 +13178,6 @@ class AudioRecorder extends BasicRecorder {
         this.changeDetectorRef.detectChanges();
     }
     set controlAudioPlayer(controlAudioPlayer) {
-        if (this._controlAudioPlayer) {
-            //this._controlAudioPlayer.listener=null;
-        }
         this._controlAudioPlayer = controlAudioPlayer;
         if (this._controlAudioPlayer) {
             this._controlAudioPlayer.listener = this;
@@ -11671,6 +13257,7 @@ class AudioRecorder extends BasicRecorder {
         this.displayAudioClip = null;
         this.showRecording();
         if (this.ac) {
+            this.audioFetching = false;
             if (!this.ac.opened) {
                 if (this._selectedDeviceId) {
                     console.log("Open session with audio device Id: \'" + this._selectedDeviceId + "\' for " + this._channelCount + " channels");
@@ -11687,10 +13274,10 @@ class AudioRecorder extends BasicRecorder {
     }
     downloadRecording() {
         if (this.displayRecFile) {
-            let ab = this.displayRecFile.audioBuffer;
+            let ab = this.displayRecFile.audioDataHolder;
             let ww = new WavWriter();
-            if (ab) {
-                let wavFile = ww.writeAsync(ab, (wavFile) => {
+            if (ab === null || ab === void 0 ? void 0 : ab.buffer) {
+                let wavFile = ww.writeAsync(ab.buffer, (wavFile) => {
                     let blob = new Blob([wavFile], { type: 'audio/wav' });
                     let rfUrl = URL.createObjectURL(blob);
                     let dataDnlLnk = this.renderer.createElement('a');
@@ -11713,35 +13300,50 @@ class AudioRecorder extends BasicRecorder {
     set displayRecFile(displayRecFile) {
         this._displayRecFile = displayRecFile;
         if (this._displayRecFile) {
-            let ab = this._displayRecFile.audioBuffer;
-            if (ab) {
-                this.displayAudioClip = new AudioClip(ab);
+            let adh = this._displayRecFile.audioDataHolder;
+            if (adh) {
+                this.displayAudioClip = new AudioClip(adh);
+                console.debug(" set recording file: display audio clip set");
                 this.controlAudioPlayer.audioClip = this.displayAudioClip;
             }
             else {
                 // clear for now ...
                 this.displayAudioClip = null;
+                console.debug("set recording file: display audio clip null");
                 this.controlAudioPlayer.audioClip = null;
                 if (this._controlAudioPlayer && this._session) {
                     //... and try to fetch from server
-                    this.audioFetchSubscription = this.recFileService.fetchAndApplyRecordingFile(this._controlAudioPlayer.context, this._session.project, this._displayRecFile).subscribe((rf) => {
-                        let fab = null;
-                        if (rf && this._displayRecFile) {
-                            fab = this._displayRecFile.audioBuffer;
-                        }
-                        else {
-                            this.statusMsg = 'Recording file could not be loaded.';
+                    this.audioFetching = true;
+                    let rf = this._displayRecFile;
+                    let clip = this.displayAudioClip;
+                    this.audioFetchSubscription = this.recFileService.fetchRecordingFileAudioBuffer(this._controlAudioPlayer.context, this._session.project, rf).subscribe({
+                        next: ab => {
+                            this.audioFetching = false;
+                            let fabDh = null;
+                            if (ab) {
+                                if (rf) {
+                                    fabDh = new AudioDataHolder(ab);
+                                    this.recorderCombiPane.setRecFileAudioData(rf, fabDh);
+                                }
+                            }
+                            else {
+                                console.error('Recording file could not be loaded.');
+                                this.statusMsg = 'Recording file could not be loaded.';
+                                this.statusAlertType = 'error';
+                            }
+                            if (fabDh) {
+                                // this.displayAudioClip could have been changed meanwhile, but the recorder unsubcribes before changing the item. Therefore there should be no risk to set to wrong item
+                                this.displayAudioClip = new AudioClip(fabDh);
+                                //console.debug("set recording file: display audio clip from fetched audio buffer");
+                            }
+                            this.controlAudioPlayer.audioClip = this.displayAudioClip;
+                            this.showRecording();
+                        }, error: err => {
+                            console.error("Could not load recording file from server: " + err);
+                            this.audioFetching = false;
+                            this.statusMsg = 'Recording file could not be loaded: ' + err;
                             this.statusAlertType = 'error';
                         }
-                        if (fab) {
-                            this.displayAudioClip = new AudioClip(fab);
-                        }
-                        this.controlAudioPlayer.audioClip = this.displayAudioClip;
-                        this.showRecording();
-                    }, err => {
-                        console.error("Could not load recording file from server: " + err);
-                        this.statusMsg = 'Recording file could not be loaded: ' + err;
-                        this.statusAlertType = 'error';
                     });
                 }
                 else {
@@ -11751,6 +13353,7 @@ class AudioRecorder extends BasicRecorder {
             }
         }
         else {
+            console.debug("recording file null");
             this.displayAudioClip = null;
             this.controlAudioPlayer.audioClip = null;
         }
@@ -11759,28 +13362,6 @@ class AudioRecorder extends BasicRecorder {
     get displayRecFile() {
         return this._displayRecFile;
     }
-    showRecording() {
-        this.controlAudioPlayer.stop();
-        if (this.displayAudioClip) {
-            this.levelMeasure.calcBufferLevelInfos(this.displayAudioClip.buffer, LEVEL_BAR_INTERVALL_SECONDS).then((levelInfos) => {
-                this.displayLevelInfos = levelInfos;
-                this.changeDetectorRef.detectChanges();
-            });
-            this.playStartAction.disabled = false;
-        }
-        else {
-            // TODO
-            // Setting to null does not trigger a change if it was  null before (happens after nextitem() in AUTOPROGRESS mode)
-            // The level bar display does not clear, it shows the last captured stream
-            this.displayLevelInfos = null;
-            this.playStartAction.disabled = true;
-            // Collapse audio signal display if open
-            if (!this.audioSignalCollapsed) {
-                this.audioSignalCollapsed = true;
-            }
-        }
-        this.changeDetectorRef.detectChanges();
-    }
     updateStartActionDisableState() {
         this.transportActions.startAction.disabled = !(this.ac);
     }
@@ -11824,6 +13405,19 @@ class AudioRecorder extends BasicRecorder {
         super.started();
         this.statusAlertType = 'info';
         this.statusMsg = 'Recording...';
+        if (!this.rfUuid) {
+            this.rfUuid = UUID.generate();
+        }
+        let sessId = 0;
+        if (this._session) {
+            sessId = this._session.sessionId;
+        }
+        let rf = new RecordingFile(this.rfUuid, sessId, null);
+        rf._startedAsDateObj = this.startedDate;
+        if (rf._startedAsDateObj) {
+            rf.startedDate = rf._startedAsDateObj.toString();
+        }
+        this._recordingFile = rf;
         let maxRecordingTimeMs = MAX_RECORDING_TIME_MS;
         this.maxRecTimerId = window.setTimeout(() => {
             this.stopRecordingMaxRec();
@@ -11860,68 +13454,75 @@ class AudioRecorder extends BasicRecorder {
         this.transportActions.pauseAction.disabled = true;
         this.statusAlertType = 'info';
         this.statusMsg = 'Recorded.';
-        let ad;
+        let ad = null;
+        let ada = null;
+        let adh = null;
+        let frameLen = 0;
         if (this.ac) {
-            ad = this.ac.audioBuffer();
+            if (this.uploadChunkSizeSeconds || AudioRecorder.FORCE_ARRRAY_AUDIO_BUFFER) {
+                ada = this.ac.audioBufferArray();
+                frameLen = ada.frameLen;
+            }
+            else {
+                ad = this.ac.audioBuffer();
+                frameLen = ad.length;
+            }
+            adh = new AudioDataHolder(ad, ada);
             let sessId = 0;
             if (this._session) {
                 sessId = this._session.sessionId;
             }
-            if (!this.rfUuid) {
-                this.rfUuid = UUID.generate();
-            }
-            let rf = new RecordingFile(this.rfUuid, sessId, ad);
-            rf._startedAsDateObj = this.startedDate;
-            if (rf._startedAsDateObj) {
-                rf.startedDate = rf._startedAsDateObj.toString();
-            }
-            rf.frames = ad.length;
-            this.displayRecFile = rf;
-            this.recorderCombiPane.push(rf);
-            // Upload if upload enabled and not in chunked upload mode
-            if (this.enableUploadRecordings && !this.uploadChunkSizeSeconds) {
-                let apiEndPoint = '';
-                if (this.config && this.config.apiEndPoint) {
-                    apiEndPoint = this.config.apiEndPoint;
-                }
-                if (apiEndPoint !== '') {
-                    apiEndPoint = apiEndPoint + '/';
+            if (this._recordingFile) {
+                // Use an own reference since the writing of the wave file is asynchronous and this._recordingFile might already contain the next recording
+                let rf = this._recordingFile;
+                RecordingFileUtils.setAudioData(rf, adh);
+                this.recorderCombiPane.addRecFile(rf);
+                // Upload if upload enabled and not in chunked upload mode
+                if (this.enableUploadRecordings && !this.uploadChunkSizeSeconds && rf != null && ad != null) {
+                    let apiEndPoint = '';
+                    if (this.config && this.config.apiEndPoint) {
+                        apiEndPoint = this.config.apiEndPoint;
+                    }
+                    if (apiEndPoint !== '') {
+                        apiEndPoint = apiEndPoint + '/';
+                    }
+                    let sessionsUrl = apiEndPoint + SessionService.SESSION_API_CTX;
+                    let recUrl = sessionsUrl + '/' + rf.session + '/' + RECFILE_API_CTX + '/' + rf.uuid;
+                    // convert asynchronously to 16-bit integer PCM
+                    // TODO could we avoid conversion to save CPU resources and transfer float PCM directly?
+                    // TODO duplicate conversion for manual download
+                    this.processingRecording = true;
+                    let ww = new WavWriter();
+                    ww.writeAsync(ad, (wavFile) => {
+                        this.postRecordingMultipart(wavFile, recUrl, rf);
+                        this.processingRecording = false;
+                        this.updateWakeLock();
+                        this.changeDetectorRef.detectChanges();
+                    });
                 }
-                let sessionsUrl = apiEndPoint + SessionService.SESSION_API_CTX;
-                let recUrl = sessionsUrl + '/' + rf.session + '/' + RECFILE_API_CTX + '/' + rf.uuid;
-                // convert asynchronously to 16-bit integer PCM
-                // TODO could we avoid conversion to save CPU resources and transfer float PCM directly?
-                // TODO duplicate conversion for manual download
-                this.processingRecording = true;
-                let ww = new WavWriter();
-                ww.writeAsync(ad, (wavFile) => {
-                    this.postRecordingMultipart(wavFile, rf.uuid, rf.session, rf._startedAsDateObj, recUrl);
-                    this.processingRecording = false;
-                    this.updateWakeLock();
-                    this.changeDetectorRef.detectChanges();
-                });
             }
         }
+        this.displayRecFile = this._recordingFile;
         this.status = 1 /* IDLE */;
         this.navigationDisabled = false;
         this.updateNavigationActions();
         this.updateWakeLock();
         this.changeDetectorRef.detectChanges();
     }
-    postRecordingMultipart(wavFile, uuid, sessionId, startedDate, recUrl) {
+    postRecordingMultipart(wavFile, recUrl, rf) {
         let wavBlob = new Blob([wavFile], { type: 'audio/wav' });
         let fd = new FormData();
-        if (uuid) {
-            fd.set('uuid', uuid);
+        if (rf.uuid) {
+            fd.set('uuid', rf.uuid);
         }
-        if (sessionId !== null) {
-            fd.set('sessionId', sessionId.toString());
+        if (rf.session !== null) {
+            fd.set('sessionId', rf.session.toString());
         }
-        if (startedDate) {
-            fd.set('startedDate', startedDate.toJSON());
+        if (rf._startedAsDateObj) {
+            fd.set('startedDate', rf._startedAsDateObj.toJSON());
         }
         fd.set('audio', wavBlob);
-        let ul = new Upload(fd, recUrl);
+        let ul = new Upload(fd, recUrl, rf);
         this.uploader.queueUpload(ul);
     }
     postChunkAudioBuffer(audioBuffer, chunkIdx) {
@@ -11938,8 +13539,9 @@ class AudioRecorder extends BasicRecorder {
         }
         let sessionsUrl = apiEndPoint + SessionService.SESSION_API_CTX;
         let recUrl = sessionsUrl + '/' + ((_a = this.session) === null || _a === void 0 ? void 0 : _a.sessionId) + '/' + RECFILE_API_CTX + '/' + this.rfUuid + '/' + chunkIdx;
+        let rf = this._recordingFile;
         ww.writeAsync(audioBuffer, (wavFile) => {
-            this.postRecording(wavFile, recUrl);
+            this.postRecording(wavFile, recUrl, rf);
             this.processingRecording = false;
         });
     }
@@ -11988,11 +13590,11 @@ AudioRecorder.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
 
     <div fxLayout="row" fxLayout.xs="column" [ngStyle]="{'height.px':100,'min-height.px': 100}"
          [ngStyle.xs]="{'height.px':125,'min-height.px': 125}">
-      <audio-levelbar fxFlex="1 0 1" [streamingMode]="isRecording()"
-                      [displayLevelInfos]="displayLevelInfos"></audio-levelbar>
+      <audio-levelbar fxFlex="1 0 1" [streamingMode]="isRecording()" [stateLoading]="audioFetching"
+                      [displayLevelInfos]="displayAudioClip?.levelInfos"></audio-levelbar>
       <div fxLayout="row">
         <spr-recordingitemcontrols fxFlex="10 0 1"
-                                   [audioLoaded]="displayAudioClip?.buffer!==null"
+                                   [audioLoaded]="displayAudioClip?.audioDataHolder!==null"
                                    [playStartAction]="controlAudioPlayer?.startAction"
                                    [playStopAction]="controlAudioPlayer?.stopAction"
                                    [peakDbLvl]="peakLevelInDb"
@@ -12031,7 +13633,7 @@ AudioRecorder.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                                  [ready]="dataSaved && !isActive()"></app-readystateindicator>
       </div>
     </div>
-  `, isInline: true, styles: [":host{flex:2;background:lightgrey;display:flex;flex-direction:column;margin:0;padding:0;height:100%;min-height:0px;overflow:hidden}\n", ".ricontrols{padding:4px;box-sizing:border-box;height:100%}\n", ".dark{background:darkgray}\n", ".controlpanel{align-content:center;align-items:center;margin:0;padding:20px;min-height:min-content}\n", ".startstop{width:100%;text-align:center;align-content:center;align-items:center}\n", ".bigbutton{min-width:70px;min-height:50px;font-size:50px;border-radius:20px}\n"], components: [{ type: WarningBar, selector: "app-warningbar", inputs: ["warningText", "show"] }, { type: RecorderCombiPane, selector: "app-recordercombipane", inputs: ["selectDisabled", "selectedRecordingFile", "audioSignalCollapsed", "displayAudioClip", "playStartAction", "playSelectionAction", "autoPlayOnSelectToggleAction", "playStopAction"], outputs: ["selectedRecordingFileChanged"] }, { type: LevelBar, selector: "audio-levelbar", inputs: ["streamingMode", "displayLevelInfos"] }, { type: RecordingItemControls, selector: "spr-recordingitemcontrols", inputs: ["audioSignalCollapsed", "enableDownload", "peakDbLvl", "agc", "audioLoaded", "playStartAction", "playStopAction", "displayLevelInfos"], outputs: ["onShowRecordingDetails", "onDownloadRecording"] }, { type: UploadStatus, selector: "app-uploadstatus", inputs: ["value", "awaitNewUpload", "status"] }, { type: WakeLockIndicator, selector: "app-wakelockindicator", inputs: ["screenLocked"] }, { type: ReadyStateIndicator, selector: "app-readystateindicator", inputs: ["ready"] }, { type: StatusDisplay, selector: "app-sprstatusdisplay", inputs: ["statusAlertType", "statusMsg", "statusWaiting"] }, { type: i3$2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i8.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i3$1.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i8.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }] });
+  `, isInline: true, styles: [":host{flex:2;background:lightgrey;display:flex;flex-direction:column;margin:0;padding:0;height:100%;min-height:0px;overflow:hidden}\n", ".ricontrols{padding:4px;box-sizing:border-box;height:100%}\n", ".dark{background:darkgray}\n", ".controlpanel{align-content:center;align-items:center;margin:0;padding:20px;min-height:min-content}\n", ".startstop{width:100%;text-align:center;align-content:center;align-items:center}\n", ".bigbutton{min-width:70px;min-height:50px;font-size:50px;border-radius:20px}\n"], components: [{ type: WarningBar, selector: "app-warningbar", inputs: ["warningText", "show"] }, { type: RecorderCombiPane, selector: "app-recordercombipane", inputs: ["selectDisabled", "selectedRecordingFile", "audioSignalCollapsed", "displayAudioClip", "playStartAction", "playSelectionAction", "autoPlayOnSelectToggleAction", "playStopAction"], outputs: ["selectedRecordingFileChanged"] }, { type: LevelBar, selector: "audio-levelbar", inputs: ["streamingMode", "displayLevelInfos", "stateLoading"] }, { type: RecordingItemControls, selector: "spr-recordingitemcontrols", inputs: ["audioSignalCollapsed", "enableDownload", "peakDbLvl", "agc", "audioLoaded", "playStartAction", "playStopAction", "displayLevelInfos"], outputs: ["onShowRecordingDetails", "onDownloadRecording"] }, { type: UploadStatus, selector: "app-uploadstatus", inputs: ["value", "awaitNewUpload", "status"] }, { type: WakeLockIndicator, selector: "app-wakelockindicator", inputs: ["screenLocked"] }, { type: ReadyStateIndicator, selector: "app-readystateindicator", inputs: ["ready"] }, { type: StatusDisplay, selector: "app-sprstatusdisplay", inputs: ["statusAlertType", "statusMsg", "statusWaiting"] }, { type: i3$2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i8.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i3$1.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i8.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AudioRecorder, decorators: [{
             type: Component,
             args: [{
@@ -12054,11 +13656,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
 
     <div fxLayout="row" fxLayout.xs="column" [ngStyle]="{'height.px':100,'min-height.px': 100}"
          [ngStyle.xs]="{'height.px':125,'min-height.px': 125}">
-      <audio-levelbar fxFlex="1 0 1" [streamingMode]="isRecording()"
-                      [displayLevelInfos]="displayLevelInfos"></audio-levelbar>
+      <audio-levelbar fxFlex="1 0 1" [streamingMode]="isRecording()" [stateLoading]="audioFetching"
+                      [displayLevelInfos]="displayAudioClip?.levelInfos"></audio-levelbar>
       <div fxLayout="row">
         <spr-recordingitemcontrols fxFlex="10 0 1"
-                                   [audioLoaded]="displayAudioClip?.buffer!==null"
+                                   [audioLoaded]="displayAudioClip?.audioDataHolder!==null"
                                    [playStartAction]="controlAudioPlayer?.startAction"
                                    [playStopAction]="controlAudioPlayer?.stopAction"
                                    [peakDbLvl]="peakLevelInDb"
@@ -12338,20 +13940,20 @@ class SpeechrecorderngModule {
 }
 SpeechrecorderngModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SpeechrecorderngModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 SpeechrecorderngModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SpeechrecorderngModule, declarations: [AudioSignal, Sonagram, ScrollPaneHorizontal, AudioClipUIContainer, AudioDisplayScrollPane, AudioDisplay, AudioDisplayPlayer, AudioDisplayControl, LevelBar, Progress, SimpleTrafficLight, Recinstructions, Prompter, PromptContainer, PromptingContainer, Prompting, StatusDisplay,
-        ProgressDisplay, RecordingItemDisplay, RecordingItemControls, UploadStatus, TransportPanel, WakeLockIndicator, ReadyStateIndicator, ControlPanel, WarningBar, AudioRecorder, SessionManager, MessageDialog, SessionFinishedDialog, SpeechrecorderngComponent, AudioRecorderComponent, RecordingFileViewComponent, RecordingFileUI, ScrollIntoViewDirective, RecordingFileNaviComponent, RecordingFileMetaComponent, RecordingList, RecorderCombiPane, AudioRecorder], imports: [i1$1.RouterModule, FlexLayoutModule, CommonModule, MatIconModule, MatButtonModule, MatDialogModule, MatProgressBarModule, MatProgressSpinnerModule, MatTooltipModule, HttpClientModule, MatCheckboxModule, MatCardModule, MatDividerModule, MatGridListModule, MatTableModule, MatInputModule, MatSelectModule, MatSnackBarModule], exports: [MessageDialog, SpeechrecorderngComponent, ScrollPaneHorizontal, AudioClipUIContainer, AudioDisplayScrollPane, AudioDisplay, AudioDisplayPlayer, AudioDisplayControl, LevelBar, AudioRecorder] });
-SpeechrecorderngModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SpeechrecorderngModule, providers: [SessionService, ProjectService, ScriptService, RecordingService, RecordingFileService, SpeechRecorderUploader], imports: [[RouterModule.forChild(SPR_ROUTES), FlexLayoutModule, CommonModule, MatIconModule, MatButtonModule, MatDialogModule, MatProgressBarModule, MatProgressSpinnerModule, MatTooltipModule, HttpClientModule, MatCheckboxModule, MatCardModule, MatDividerModule, MatGridListModule, MatTableModule, MatInputModule, MatSelectModule, MatSnackBarModule]] });
+        ProgressDisplay, RecordingItemDisplay, RecordingItemControls, UploadStatus, TransportPanel, WakeLockIndicator, ReadyStateIndicator, ControlPanel, WarningBar, AudioRecorder, SessionManager, MessageDialog, SessionFinishedDialog, SpeechrecorderngComponent, AudioRecorderComponent, RecordingFileViewComponent, RecordingFileUI, ScrollIntoViewDirective, RecordingFileNaviComponent, RecordingFileMetaComponent, RecordingList, RecorderCombiPane, AudioRecorder], imports: [i1$1.RouterModule, FlexLayoutModule, CommonModule, MatIconModule, MatButtonModule, MatDialogModule, MatProgressBarModule, MatProgressSpinnerModule, MatTooltipModule, HttpClientModule, MatCheckboxModule, MatCardModule, MatDividerModule, MatGridListModule, MatTableModule, MatInputModule, MatSelectModule, MatSnackBarModule, MatMenuModule], exports: [MessageDialog, SpeechrecorderngComponent, ScrollPaneHorizontal, AudioClipUIContainer, AudioDisplayScrollPane, AudioDisplay, AudioDisplayPlayer, AudioDisplayControl, LevelBar, AudioRecorder] });
+SpeechrecorderngModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SpeechrecorderngModule, providers: [SessionService, ProjectService, ScriptService, RecordingService, RecordingFileService, SpeechRecorderUploader], imports: [[RouterModule.forChild(SPR_ROUTES), FlexLayoutModule, CommonModule, MatIconModule, MatButtonModule, MatDialogModule, MatProgressBarModule, MatProgressSpinnerModule, MatTooltipModule, HttpClientModule, MatCheckboxModule, MatCardModule, MatDividerModule, MatGridListModule, MatTableModule, MatInputModule, MatSelectModule, MatSnackBarModule, MatMenuModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SpeechrecorderngModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AudioSignal, Sonagram, ScrollPaneHorizontal, AudioClipUIContainer, AudioDisplayScrollPane, AudioDisplay, AudioDisplayPlayer, AudioDisplayControl, LevelBar, Progress, SimpleTrafficLight, Recinstructions, Prompter, PromptContainer, PromptingContainer, Prompting, StatusDisplay,
                         ProgressDisplay, RecordingItemDisplay, RecordingItemControls, UploadStatus, TransportPanel, WakeLockIndicator, ReadyStateIndicator, ControlPanel, WarningBar, AudioRecorder, SessionManager, MessageDialog, SessionFinishedDialog, SpeechrecorderngComponent, AudioRecorderComponent, RecordingFileViewComponent, RecordingFileUI, ScrollIntoViewDirective, RecordingFileNaviComponent, RecordingFileMetaComponent, RecordingList, RecorderCombiPane, AudioRecorder],
                     exports: [MessageDialog, SpeechrecorderngComponent, ScrollPaneHorizontal, AudioClipUIContainer, AudioDisplayScrollPane, AudioDisplay, AudioDisplayPlayer, AudioDisplayControl, LevelBar, AudioRecorder],
-                    imports: [RouterModule.forChild(SPR_ROUTES), FlexLayoutModule, CommonModule, MatIconModule, MatButtonModule, MatDialogModule, MatProgressBarModule, MatProgressSpinnerModule, MatTooltipModule, HttpClientModule, MatCheckboxModule, MatCardModule, MatDividerModule, MatGridListModule, MatTableModule, MatInputModule, MatSelectModule, MatSnackBarModule],
+                    imports: [RouterModule.forChild(SPR_ROUTES), FlexLayoutModule, CommonModule, MatIconModule, MatButtonModule, MatDialogModule, MatProgressBarModule, MatProgressSpinnerModule, MatTooltipModule, HttpClientModule, MatCheckboxModule, MatCardModule, MatDividerModule, MatGridListModule, MatTableModule, MatInputModule, MatSelectModule, MatSnackBarModule, MatMenuModule],
                     providers: [SessionService, ProjectService, ScriptService, RecordingService, RecordingFileService, SpeechRecorderUploader]
                 }]
         }] });
 
-const VERSION = '2.25.2';
+const VERSION = '3.0.1';
 
 /*
  * Public API Surface of speechrecorderng