WebAudioView.js 9.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  1. export class WebAudioView extends UI.ThrottledWidget{constructor(){super(true,1000);this.element.classList.add('web-audio-drawer');this.registerRequiredCSS('web_audio/webAudio.css');const toolbarContainer=this.contentElement.createChild('div','web-audio-toolbar-container vbox');this._contextSelector=new WebAudio.AudioContextSelector();const toolbar=new UI.Toolbar('web-audio-toolbar',toolbarContainer);toolbar.appendToolbarItem(UI.Toolbar.createActionButtonForId('components.collect-garbage'));toolbar.appendSeparator();toolbar.appendToolbarItem(this._contextSelector.toolbarItem());this._detailViewContainer=this.contentElement.createChild('div','vbox flex-auto');this._graphManager=new WebAudio.GraphVisualizer.GraphManager();this._landingPage=new UI.VBox();this._landingPage.contentElement.classList.add('web-audio-landing-page','fill');this._landingPage.contentElement.appendChild(UI.html`
  2. <div>
  3. <p>${ls`Open a page that uses Web Audio API to start monitoring.`}</p>
  4. </div>
  5. `);this._landingPage.show(this._detailViewContainer);this._summaryBarContainer=this.contentElement.createChild('div','web-audio-summary-container');this._contextSelector.addEventListener(WebAudio.AudioContextSelector.Events.ContextSelected,event=>{const context=(event.data);this._updateDetailView(context);this.doUpdate();});SDK.targetManager.observeModels(WebAudio.WebAudioModel,this);}
  6. wasShown(){super.wasShown();for(const model of SDK.targetManager.models(WebAudio.WebAudioModel)){this._addEventListeners(model);}}
  7. willHide(){for(const model of SDK.targetManager.models(WebAudio.WebAudioModel)){this._removeEventListeners(model);}}
  8. modelAdded(webAudioModel){if(this.isShowing()){this._addEventListeners(webAudioModel);}}
  9. modelRemoved(webAudioModel){this._removeEventListeners(webAudioModel);}
  10. async doUpdate(){await this._pollRealtimeData();this.update();}
  11. _addEventListeners(webAudioModel){webAudioModel.ensureEnabled();webAudioModel.addEventListener(WebAudio.WebAudioModel.Events.ContextCreated,this._contextCreated,this);webAudioModel.addEventListener(WebAudio.WebAudioModel.Events.ContextDestroyed,this._contextDestroyed,this);webAudioModel.addEventListener(WebAudio.WebAudioModel.Events.ContextChanged,this._contextChanged,this);webAudioModel.addEventListener(WebAudio.WebAudioModel.Events.ModelReset,this._reset,this);webAudioModel.addEventListener(WebAudio.WebAudioModel.Events.ModelSuspend,this._suspendModel,this);webAudioModel.addEventListener(WebAudio.WebAudioModel.Events.AudioListenerCreated,this._audioListenerCreated,this);webAudioModel.addEventListener(WebAudio.WebAudioModel.Events.AudioListenerWillBeDestroyed,this._audioListenerWillBeDestroyed,this);webAudioModel.addEventListener(WebAudio.WebAudioModel.Events.AudioNodeCreated,this._audioNodeCreated,this);webAudioModel.addEventListener(WebAudio.WebAudioModel.Events.AudioNodeWillBeDestroyed,this._audioNodeWillBeDestroyed,this);webAudioModel.addEventListener(WebAudio.WebAudioModel.Events.AudioParamCreated,this._audioParamCreated,this);webAudioModel.addEventListener(WebAudio.WebAudioModel.Events.AudioParamWillBeDestroyed,this._audioParamWillBeDestroyed,this);webAudioModel.addEventListener(WebAudio.WebAudioModel.Events.NodesConnected,this._nodesConnected,this);webAudioModel.addEventListener(WebAudio.WebAudioModel.Events.NodesDisconnected,this._nodesDisconnected,this);webAudioModel.addEventListener(WebAudio.WebAudioModel.Events.NodeParamConnected,this._nodeParamConnected,this);webAudioModel.addEventListener(WebAudio.WebAudioModel.Events.NodeParamDisconnected,this._nodeParamDisconnected,this);}
  12. _removeEventListeners(webAudioModel){webAudioModel.removeEventListener(WebAudio.WebAudioModel.Events.ContextCreated,this._contextCreated,this);webAudioModel.removeEventListener(WebAudio.WebAudioModel.Events.ContextDestroyed,this._contextDestroyed,this);webAudioModel.removeEventListener(WebAudio.WebAudioModel.Events.ContextChanged,this._contextChanged,this);webAudioModel.removeEventListener(WebAudio.WebAudioModel.Events.ModelReset,this._reset,this);webAudioModel.removeEventListener(WebAudio.WebAudioModel.Events.ModelSuspend,this._suspendModel,this);webAudioModel.removeEventListener(WebAudio.WebAudioModel.Events.AudioListenerCreated,this._audioListenerCreated,this);webAudioModel.removeEventListener(WebAudio.WebAudioModel.Events.AudioListenerWillBeDestroyed,this._audioListenerWillBeDestroyed,this);webAudioModel.removeEventListener(WebAudio.WebAudioModel.Events.AudioNodeCreated,this._audioNodeCreated,this);webAudioModel.removeEventListener(WebAudio.WebAudioModel.Events.AudioNodeWillBeDestroyed,this._audioNodeWillBeDestroyed,this);webAudioModel.removeEventListener(WebAudio.WebAudioModel.Events.AudioParamCreated,this._audioParamCreated,this);webAudioModel.removeEventListener(WebAudio.WebAudioModel.Events.AudioParamWillBeDestroyed,this._audioParamWillBeDestroyed,this);webAudioModel.removeEventListener(WebAudio.WebAudioModel.Events.NodesConnected,this._nodesConnected,this);webAudioModel.removeEventListener(WebAudio.WebAudioModel.Events.NodesDisconnected,this._nodesDisconnected,this);webAudioModel.removeEventListener(WebAudio.WebAudioModel.Events.NodeParamConnected,this._nodeParamConnected,this);webAudioModel.removeEventListener(WebAudio.WebAudioModel.Events.NodeParamDisconnected,this._nodeParamDisconnected,this);}
  13. _contextCreated(event){const context=(event.data);this._graphManager.createContext(context.contextId);this._contextSelector.contextCreated(event);}
  14. _contextDestroyed(event){const contextId=(event.data);this._graphManager.destroyContext(contextId);this._contextSelector.contextDestroyed(event);}
  15. _contextChanged(event){const context=(event.data);if(!this._graphManager.hasContext(context.contextId)){return;}
  16. this._contextSelector.contextChanged(event);}
  17. _reset(){if(this._landingPage.isShowing()){this._landingPage.detach();}
  18. this._contextSelector.reset();this._detailViewContainer.removeChildren();this._landingPage.show(this._detailViewContainer);this._graphManager.clearGraphs();}
  19. _suspendModel(){this._graphManager.clearGraphs();}
  20. _audioListenerCreated(event){const listener=(event.data);const graph=this._graphManager.getGraph(listener.contextId);if(!graph){return;}
  21. graph.addNode({nodeId:listener.listenerId,nodeType:'Listener',numberOfInputs:0,numberOfOutputs:0,});}
  22. _audioListenerWillBeDestroyed(event){const{contextId,listenerId}=event.data;const graph=this._graphManager.getGraph(contextId);if(!graph){return;}
  23. graph.removeNode(listenerId);}
  24. _audioNodeCreated(event){const node=(event.data);const graph=this._graphManager.getGraph(node.contextId);if(!graph){return;}
  25. graph.addNode({nodeId:node.nodeId,nodeType:node.nodeType,numberOfInputs:node.numberOfInputs,numberOfOutputs:node.numberOfOutputs,});}
  26. _audioNodeWillBeDestroyed(event){const{contextId,nodeId}=event.data;const graph=this._graphManager.getGraph(contextId);if(!graph){return;}
  27. graph.removeNode(nodeId);}
  28. _audioParamCreated(event){const param=(event.data);const graph=this._graphManager.getGraph(param.contextId);if(!graph){return;}
  29. graph.addParam({paramId:param.paramId,paramType:param.paramType,nodeId:param.nodeId,});}
  30. _audioParamWillBeDestroyed(event){const{contextId,paramId}=event.data;const graph=this._graphManager.getGraph(contextId);if(!graph){return;}
  31. graph.removeParam(paramId);}
  32. _nodesConnected(event){const{contextId,sourceId,destinationId,sourceOutputIndex,destinationInputIndex}=event.data;const graph=this._graphManager.getGraph(contextId);if(!graph){return;}
  33. graph.addNodeToNodeConnection({sourceId,destinationId,sourceOutputIndex,destinationInputIndex,});}
  34. _nodesDisconnected(event){const{contextId,sourceId,destinationId,sourceOutputIndex,destinationInputIndex}=event.data;const graph=this._graphManager.getGraph(contextId);if(!graph){return;}
  35. graph.removeNodeToNodeConnection({sourceId,destinationId,sourceOutputIndex,destinationInputIndex,});}
  36. _nodeParamConnected(event){const{contextId,sourceId,destinationId,sourceOutputIndex}=event.data;const graph=this._graphManager.getGraph(contextId);if(!graph){return;}
  37. const nodeId=graph.getNodeIdByParamId(destinationId);if(!nodeId){return;}
  38. graph.addNodeToParamConnection({sourceId,destinationId:nodeId,sourceOutputIndex,destinationParamId:destinationId,});}
  39. _nodeParamDisconnected(event){const{contextId,sourceId,destinationId,sourceOutputIndex}=event.data;const graph=this._graphManager.getGraph(contextId);if(!graph){return;}
  40. const nodeId=graph.getNodeIdByParamId(destinationId);if(!nodeId){return;}
  41. graph.removeNodeToParamConnection({sourceId,destinationId:nodeId,sourceOutputIndex,destinationParamId:destinationId,});}
  42. _updateDetailView(context){if(this._landingPage.isShowing()){this._landingPage.detach();}
  43. const detailBuilder=new WebAudio.ContextDetailBuilder(context);this._detailViewContainer.removeChildren();this._detailViewContainer.appendChild(detailBuilder.getFragment());}
  44. _updateSummaryBar(contextId,contextRealtimeData){const summaryBuilder=new WebAudio.AudioContextSummaryBuilder(contextId,contextRealtimeData);this._summaryBarContainer.removeChildren();this._summaryBarContainer.appendChild(summaryBuilder.getFragment());}
  45. _clearSummaryBar(){this._summaryBarContainer.removeChildren();}
  46. async _pollRealtimeData(){const context=this._contextSelector.selectedContext();if(!context){this._clearSummaryBar();return;}
  47. for(const model of SDK.targetManager.models(WebAudio.WebAudioModel)){if(context.contextType==='realtime'){if(!this._graphManager.hasContext(context.contextId)){continue;}
  48. const realtimeData=await model.requestRealtimeData(context.contextId);if(realtimeData){this._updateSummaryBar(context.contextId,realtimeData);}}else{this._clearSummaryBar();}}}}
  49. self.WebAudio=self.WebAudio||{};WebAudio=WebAudio||{};WebAudio.WebAudioView=WebAudioView;