AudioContextContentBuilder.js 2.2 KB

123456789101112131415161718192021222324252627
  1. export class ContextDetailBuilder{constructor(context){this._fragment=createDocumentFragment();this._container=createElementWithClass('div','context-detail-container');this._fragment.appendChild(this._container);this._build(context);}
  2. _build(context){const title=context.contextType==='realtime'?ls`AudioContext`:ls`OfflineAudioContext`;this._addTitle(title,context.contextId);this._addEntry(ls`State`,context.contextState);this._addEntry(ls`Sample Rate`,context.sampleRate,'Hz');if(context.contextType==='realtime'){this._addEntry(ls`Callback Buffer Size`,context.callbackBufferSize,'frames');}
  3. this._addEntry(ls`Max Output Channels`,context.maxOutputChannelCount,'ch');}
  4. _addTitle(title,subtitle){this._container.appendChild(UI.html`
  5. <div class="context-detail-header">
  6. <div class="context-detail-title">${title}</div>
  7. <div class="context-detail-subtitle">${subtitle}</div>
  8. </div>
  9. `);}
  10. _addEntry(entry,value,unit){const valueWithUnit=value+(unit?` ${unit}`:'');this._container.appendChild(UI.html`
  11. <div class="context-detail-row">
  12. <div class="context-detail-row-entry">${entry}</div>
  13. <div class="context-detail-row-value">${valueWithUnit}</div>
  14. </div>
  15. `);}
  16. getFragment(){return this._fragment;}}
  17. export class AudioContextSummaryBuilder{constructor(contextId,contextRealtimeData){const time=contextRealtimeData.currentTime.toFixed(3);const mean=(contextRealtimeData.callbackIntervalMean*1000).toFixed(3);const stddev=(Math.sqrt(contextRealtimeData.callbackIntervalVariance)*1000).toFixed(3);const capacity=(contextRealtimeData.renderCapacity*100).toFixed(3);this._fragment=createDocumentFragment();this._fragment.appendChild(UI.html`
  18. <div class="context-summary-container">
  19. <span>${ls`Current Time`}: ${time} s</span>
  20. <span>\u2758</span>
  21. <span>${ls`Callback Interval`}: μ = ${mean} ms, σ = ${stddev} ms</span>
  22. <span>\u2758</span>
  23. <span>${ls`Render Capacity`}: ${capacity} %</span>
  24. </div>
  25. `);}
  26. getFragment(){return this._fragment;}}
  27. self.WebAudio=self.WebAudio||{};WebAudio=WebAudio||{};WebAudio.ContextDetailBuilder=ContextDetailBuilder;WebAudio.AudioContextSummaryBuilder=AudioContextSummaryBuilder;