{"id":92637,"date":"2022-08-15T21:41:28","date_gmt":"2022-08-15T19:41:28","guid":{"rendered":"https:\/\/rmarketingdigital.com\/dev\/creacion-de-perfiles-de-aplicaciones-de-audio-web-en-chrome\/"},"modified":"2020-10-07T06:08:41","modified_gmt":"2020-10-07T09:08:41","slug":"creacion-de-perfiles-de-aplicaciones-de-audio-web-en-chrome","status":"publish","type":"post","link":"https:\/\/rmarketingdigital.com\/en\/dev\/creacion-de-perfiles-de-aplicaciones-de-audio-web-en-chrome\/","title":{"rendered":"Profile web audio apps in Chrome"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/creacion-de-perfiles-de-aplicaciones-de-audio-web-en-chrome\/#Cuando-usas-chrome-tracing\" >When do you use chrome: \/\/ tracing?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/creacion-de-perfiles-de-aplicaciones-de-audio-web-en-chrome\/#%C2%BFCuando-usas-el-WebAudio-%C2%BFlengueta\" >When do you use the WebAudio tab?<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/creacion-de-perfiles-de-aplicaciones-de-audio-web-en-chrome\/#Utilizar-chrome-tracing\" >Use chrome: \/\/ tracing<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/creacion-de-perfiles-de-aplicaciones-de-audio-web-en-chrome\/#Como-capturar-datos-de-rastreo\" >How to capture trace data<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/creacion-de-perfiles-de-aplicaciones-de-audio-web-en-chrome\/#Como-analizar-los-datos-de-rastreo\" >How to analyze trace data<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/creacion-de-perfiles-de-aplicaciones-de-audio-web-en-chrome\/#Modo-nativo\" >Native mode<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/creacion-de-perfiles-de-aplicaciones-de-audio-web-en-chrome\/#Modo-worklet\" >Worklet mode<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/creacion-de-perfiles-de-aplicaciones-de-audio-web-en-chrome\/#Aprender-de-ejemplos-del-mundo-real\" >Learn from real-world examples<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/creacion-de-perfiles-de-aplicaciones-de-audio-web-en-chrome\/#Ejemplo-1-tareas-de-renderizacion-que-van-mas-alla-del-presupuesto-de-renderizacion\" >Example 1: rendering tasks that go beyond the rendering budget<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/creacion-de-perfiles-de-aplicaciones-de-audio-web-en-chrome\/#Ejemplo-2-recoleccion-de-basura-significativa-en-el-subproceso-del-worklet\" >Example 2: significant garbage collection on the worklet thread<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/creacion-de-perfiles-de-aplicaciones-de-audio-web-en-chrome\/#Ejemplo-3-Devolucion-de-llamada-de-dispositivo-de-audio-nerviosa-desde-AudioOutputDevice\" >Example 3: Nervous Audio Device Callback from AudioOutputDevice<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/creacion-de-perfiles-de-aplicaciones-de-audio-web-en-chrome\/#Conclusion\" >conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<p><\/p>\n<div>\n<header class=\"w-article-header\">\n<p class=\"w-article-header__subhead w-mb--non\">\n<p>          Learn how to profile the performance of Web Audio applications in Chrome using  <code>chrome:\/\/tracing<\/code> and the <strong>WebAudio<\/strong> tab in DevTools.<\/p>\n<p>\n          <time>May 4, 2020<\/time><\/p>\n<\/header>\n<p>You have come to this documentation probably because you are developing an application that uses the <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/Web_Audio_API\">Web Audio API<\/a><br \/>\nand experienced some unexpected glitches, such as noises on the output. You may already be involved in a <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/crbug.com\">crbug.com<\/a><br \/>\ndiscussion and a Chrome engineer has asked you to upload &quot;trace data.&quot; This guide shows how to get the data so that you can help engineers classify and eventually troubleshoot the problem.<\/p>\n<p>There are two tools to help you create web audio profiles,<br \/>\n<code>chrome:\/\/tracing<\/code> and the <strong>WebAudio<\/strong> tab in Chrome DevTools.<\/p>\n<h3 id=\"when-do-you-use-chrome:tracing\"><span class=\"ez-toc-section\" id=\"Cuando-usas-chrome-tracing\"><\/span>When you use <code>chrome:\/\/tracing<\/code>? <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>When mysterious &quot;failures&quot; occur. Profiling the application with the tracking tools gives you information on:<\/p>\n<ul>\n<li><strong>Chunks of time spent on specific function calls<\/strong> in different threads<\/li>\n<li><strong>Audio callback time<\/strong> in timeline view<\/li>\n<\/ul>\n<p>It usually shows missed deadlines or large garbage collection stops that can cause unexpected audio glitches. This information is useful for detecting an error. Chromium engineers will request trace data if local reproduction of the problem is not possible. Watch <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.chromium.org\/developers\/how-tos\/trace-event-profiling-tool\">The Tracking Event Profiling Tool<\/a> for general instructions on how to track.<\/p>\n<h3 id=\"when-do-you-use-the-webaudio-tab\"><span class=\"ez-toc-section\" id=\"%C2%BFCuando-usas-el-WebAudio-%C2%BFlengueta\"><\/span>When do you use the <strong>WebAudio<\/strong> tongue? <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>When you want to get an idea of how your application is performing in the real world. DevTools shows you a running estimate of throughput, indicating how the web audio rendering engine is handling rendering tasks with a given rendering budget (for example, approximately 2.67ms at 48KHz). If the capacity is close to 100%, that means your application is likely to crash because the renderer cannot finish the job on the rendering budget.<\/p>\n<h2 id=\"use-chrome:tracing\"><span class=\"ez-toc-section\" id=\"Utilizar-chrome-tracing\"><\/span>Use <code>chrome:\/\/tracing<\/code> <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3 id=\"how-to-capture-tracing-data\"><span class=\"ez-toc-section\" id=\"Como-capturar-datos-de-rastreo\"><\/span>How to capture trace data <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><em>The instructions written below are for Chrome 80 and later.<\/em><\/p>\n<p>For best results, close all other tabs and windows and disable extensions. Alternatively, you can <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.chrome.com\/devtools\/docs\/clean-testing-environment\">launch a new instance of Chrome<\/a><br \/>\nor use other compilations of <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.chromium.org\/getting-involved\/dev-channel\">different launch channels<\/a> (for example, Beta or Canary). Once you have the browser ready, follow the steps below:<\/p>\n<ol>\n<li>\n<p>Open your application (web page) in a tab.<\/p>\n<\/li>\n<li>\n<p>Open another tab and go to <code>chrome:\/\/tracing<\/code>.<\/p>\n<\/li>\n<li>\n<p>press the <strong>Engrave<\/strong> button and select <strong>Manually select settings<\/strong>.<\/p>\n<\/li>\n<li>\n<p>press the <strong>None<\/strong> buttons on both <strong>Record Categories<\/strong> and<br \/>\n<strong>Disabled by default categories<\/strong> sections.<\/p>\n<\/li>\n<li>\n<p>At <strong>Record Categories<\/strong> section, select the following:<\/p>\n<ul>\n<li><code>Audio<\/code><\/li>\n<li><code>blink_gc<\/code><\/li>\n<li><code>half<\/code><\/li>\n<li><code>v8.execute<\/code>  (if you&#039;re interested <code>AudioWorklet<\/code> JS code performance)<\/li>\n<li><code>webaudio<\/code><\/li>\n<\/ul>\n<\/li>\n<li>\n<p>At <strong>Disabled by default categories<\/strong> section, select the following:<\/p>\n<ul>\n<li><code>audio-worklet<\/code>  (if you are interested in where <code>AudioWorklet<\/code> thread begins)<\/li>\n<li><code>webaudio.audionode<\/code>  (if you need the detailed tracking of each <code>AudioNode<\/code>)<\/li>\n<\/ul>\n<\/li>\n<li>\n<p>press the <strong>Engrave<\/strong> button at the bottom.<\/p>\n<\/li>\n<li>\n<p>Go back to your app tab and go through the steps that triggered the problem again.<\/p>\n<\/li>\n<li>\n<p>When you have enough tracking data, go back to the tracking tab and press <strong>Stop<\/strong>.<\/p>\n<\/li>\n<li>\n<p>The follow-up tab will display the result.<\/p>\n<p><img alt='1-hello-audio-worklet-4505179' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/1-hello-audio-worklet-4505179.jpg' class=\"w-screenshot w-screenshot--filled\"><\/p>\n<\/li>\n<li>\n<p>press <strong>Save<\/strong> to save the tracking data.<\/p>\n<\/li>\n<\/ol>\n<h3 id=\"how-to-analyze-tracing-data\"><span class=\"ez-toc-section\" id=\"Como-analizar-los-datos-de-rastreo\"><\/span>How to analyze trace data <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Tracking data visualizes how Chrome&#039;s web audio engine processes audio. The renderer has two different rendering modes: <strong>Native mode<\/strong> and<br \/>\n<strong>Worklet mode<\/strong>. Each mode uses a different threading model, so the tracking results also differ.<\/p>\n<h4 id=\"native-mode\"><span class=\"ez-toc-section\" id=\"Modo-nativo\"><\/span>Native mode <span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>In native mode, the <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/source.chromium.org\/chromium\/chromium\/src\/+\/master:media\/audio\/audio_output_device.h\"><code>AudioOutputDevice<\/code><\/a>  thread runs all web audio code. the <code>AudioOutputDevice<\/code> it is a real-time priority thread that originates from the browser&#039;s audio service and is driven by the audio hardware clock. If you notice an irregularity in the tracking data in this lane, it means that the callback time of the device may be nervous. The combination of Linux and Pulse Audio is known to have this problem. See the following Chromium issues for more details: <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/crbug.com\/825823\"># 825823<\/a>,<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/crbug.com\/864463\"># 864463<\/a>.<\/p>\n<p><img alt='2e-box2d-5564452' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/2e-box2d-5564452.jpg' class=\"w-screenshot w-screenshot--filled\"><\/p>\n<h4 id=\"worklet-mode\"><span class=\"ez-toc-section\" id=\"Modo-worklet\"><\/span>Worklet mode <span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>In Worklet mode, which is characterized by a thread jump from<br \/>\n<code>AudioOutputDevice<\/code> to the <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/source.chromium.org\/chromium\/chromium\/src\/+\/master:third_party\/blink\/renderer\/modules\/webaudio\/audio_worklet_thread.h\"><code>AudioWorklet<\/code>  thread<\/a>You should see well aligned strokes on two thread lines as shown below. When the worklet is enabled, all web audio operations are processed by the<br \/>\n<code>AudioWorklet<\/code> thread. This thread is not currently a realtime priority. The common irregularity here is a large crash caused by garbage collection or missed processing deadlines. Both cases cause failures in the audio transmission.<\/p>\n<p><img alt='3e-hello-audio-worklet-2574748' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/3e-hello-audio-worklet-2574748.png' class=\"w-screenshot w-screenshot--filled\"><\/p>\n<p>In both cases, the ideal tracking data is characterized by well-aligned audio device callback invocations and rendering tasks that are completed within the given rendering budget. The two screenshots above are excellent examples of ideal trace data.<\/p>\n<h3 id=\"learning-from-real-world-examples\"><span class=\"ez-toc-section\" id=\"Aprender-de-ejemplos-del-mundo-real\"><\/span>Learn from real-world examples <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<h4 id=\"example-1:-render-tasks-going-beyond-render-budget\"><span class=\"ez-toc-section\" id=\"Ejemplo-1-tareas-de-renderizacion-que-van-mas-alla-del-presupuesto-de-renderizacion\"><\/span>Example 1: rendering tasks that go beyond the rendering budget <span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>The screenshot below (<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/crbug.com\/796330\">Chromium Problem # 796330<\/a>) is a typical example of when the code in <code>AudioWorkletProcessor<\/code> takes too long and exceeds a certain rendering budget. The callback time behaves fine, but the call to the Web Audio API audio processing function failed to complete the job before the next device callback.<\/p>\n<p><img alt='5e-render-budget-7879549' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/5e-render-budget-7879549.png' class=\"w-screenshot w-screenshot--filled\"><\/p>\n<p><strong>Your options:<\/strong><\/p>\n<ul>\n<li>Reduce audio graph workload by using less <code>AudioNode<\/code> instances.<\/li>\n<li>Reduce your code workload on the <code>AudioWorkletProcessor<\/code>.<\/li>\n<li>Increase the base latency of <code>AudioContext<\/code>.<\/li>\n<\/ul>\n<h4 id=\"example-2:-significant-garbage-collection-on-the-worklet-thread\"><span class=\"ez-toc-section\" id=\"Ejemplo-2-recoleccion-de-basura-significativa-en-el-subproceso-del-worklet\"><\/span>Example 2: significant garbage collection on the worklet thread <span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Unlike the native audio rendering thread, garbage collection is handled in the worklet thread. That means if your code does memory allocation \/ deallocation (for example, new arrays), it eventually triggers a garbage collection that synchronously locks the thread. If the workload for web audio operations and garbage collection is greater than a given rendering budget, audio streaming fails. The following screenshot is an extreme example of this case.<\/p>\n<p><img alt='6e-garbage-collection-6170599' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/6e-garbage-collection-6170599.png' class=\"w-screenshot w-screenshot--filled\"><\/p>\n<div class=\"w-aside w-aside--note\">\n<p>Chrome <code>AudioWorkletProcessor<\/code> the implementation generates <code>Float32Array<\/code> instances for the input and output buffer each audio processing callback. This also slowly increases memory usage over time. The team has a plan to improve the design after the related specification is finalized.<\/p>\n<\/div>\n<p><strong>Your options:<\/strong><\/p>\n<ul>\n<li>Allocate memory in advance and reuse it whenever possible.<\/li>\n<li>Use different design patterns based on <code>SharedArrayBuffer<\/code>. Although this is not a perfect solution, several web audio applications use a similar pattern with<br \/>\n<code>SharedArrayBuffer<\/code> to run the intensive audio code. Examples:<\/p>\n<\/li>\n<\/ul>\n<h4 id=\"example-3:-jittery-audio-device-callback-from-audiooutputdevice\"><span class=\"ez-toc-section\" id=\"Ejemplo-3-Devolucion-de-llamada-de-dispositivo-de-audio-nerviosa-desde-AudioOutputDevice\"><\/span>Example 3: Nervous audio device callback from <code>AudioOutputDevice<\/code> <span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Accurate timing of the audio callback is the most important thing for web audio. This should be the most accurate clock in your system. If the operating system or its audio subsystem cannot guarantee a robust callback time, all subsequent operations will be affected. The image below is an example of an edgy audio callback. Compared to the previous two images, the interval between each callback varies significantly.<\/p>\n<p><img alt='4e-pulse-audio-3314692' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/4e-pulse-audio-3314692.png' class=\"w-screenshot w-screenshot--filled\"><\/p>\n<p>This is a known issue in Linux, which uses Pulse Audio as the audio backend. This is still under investigation (<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/crbug.com\/825823\">Chromium problem no. 825823<\/a>).<\/p>\n<p>You can also use the DevTools tab designed specifically for web audio. This is less comprehensive compared to the tracking tool, but it is useful if you want to measure the execution performance of your application.<\/p>\n<p>Access the panel by opening the <strong>Main menu<\/strong> from DevTools, then go to <strong>More tools<\/strong> > <strong>WebAudio<\/strong>.<\/p>\n<p><img alt='7e-devtools-9409473' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/7e-devtools-9409473.jpg' class=\"w-screenshot w-screenshot--filled\"><\/p>\n<p><img alt='8e-devtools-6891348' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/8e-devtools-6891348.png' class=\"w-screenshot w-screenshot--filled\"><\/p>\n<p>This tab displays information about running instances of <code>BaseAudioContext<\/code>. Use it to see the performance of the web audio renderer on the page.<\/p>\n<p>Since a page can have multiple <code>BaseAudioContext<\/code> instances, the <strong>Context selector<\/strong><br \/>\n(which is the dropdown that says <code>realtime (4e1073)<\/code> in the last screenshot), allows you to choose what you want to inspect. The inspector view shows the properties (for example, sample rate, buffer size, channel count, and context status) of a <code>BaseAudioContext<\/code> instance you select, and it changes dynamically when properties change.<\/p>\n<p>The most useful thing in this view is the status bar at the bottom. It is only active when the selected <code>BaseAudioContext<\/code> is a <code>AudioContext<\/code>, which runs in real time. This bar shows the quality of the instant audio transmission of a <code>AudioContext<\/code> and updates every second. Provide the following information:<\/p>\n<ul>\n<li><strong>Callback interval<\/strong> (ms) - Displays the weighted mean \/ variance of the callback interval. Ideally, the mean should be stable and the variance should be close to zero. Otherwise, the audio infrastructure of the operating system could have problems in deeper layers.<\/li>\n<li><strong>Rendering Capability<\/strong> (percentage): follow this formula: (<em>time spent on actual rendering \/ instant callback interval<\/em>) \u00d7 100. When the capacity is close to 100 percent, it means that the renderer is doing too much for a given rendering budget, so you should consider doing less in your web audio code.<\/li>\n<\/ul>\n<p>You can manullay and activate a garbage collector by clicking the trash can icon.<\/p>\n<h2 id=\"conclusion\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>conclusion <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Audio debugging is difficult. Debugging audio in the browser is even more difficult. However, these tools can ease the pain by providing you with useful information on how web audio code works. In some cases, the web audio may not behave as it should; then don&#039;t be afraid of<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/bugs.chromium.org\/p\/chromium\/issues\/entry?components=Blink%3EWebAudio\">file a bug in Chromium Bug Tracker<\/a>. While filling in the information, you can follow the guide above and submit the trace data you captured with a reproducible test case. With this data, Chrome engineers will be able to correct your error much faster.<\/p>\n<p>Photo by Jonathan Velasquez in <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/unsplash.com\/photos\/c1ZN57GfDB0\">Unsplash<\/a><\/p>\n<p>    <web-feedback additional-questions=\"\"><\/web-feedback>\n  <\/div>","protected":false},"excerpt":{"rendered":"<p>Learn how to profile the performance of Web Audio applications in Chrome using chrome:\/\/tracing and the WebAudio tab in DevTools. May 4, 2020 You have reached this documentation\u2026<\/p>","protected":false},"author":1,"featured_media":92638,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1356],"tags":[],"class_list":["post-92637","post","type-post","status-publish","format-standard","has-post-thumbnail","category-dev"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v28.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Creaci\u00f3n de perfiles de aplicaciones de audio web en Chrome - R Marketing Digital<\/title>\n<meta name=\"description\" content=\"Aprenda a perfilar el rendimiento de las aplicaciones Web Audio en Chrome usando chrome:\/\/tracing y el WebAudio pesta\u00f1a en DevTools. 4 de mayo de 2020 Ha\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/creacion-de-perfiles-de-aplicaciones-de-audio-web-en-chrome\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creaci\u00f3n de perfiles de aplicaciones de audio web en Chrome\" \/>\n<meta property=\"og:description\" content=\"Aprenda a perfilar el rendimiento de las aplicaciones Web Audio en Chrome usando chrome:\/\/tracing y el WebAudio pesta\u00f1a en DevTools. 4 de mayo de 2020 Ha\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rmarketingdigital.com\/en\/dev\/creacion-de-perfiles-de-aplicaciones-de-audio-web-en-chrome\/\" \/>\n<meta property=\"og:site_name\" content=\"R Marketing Digital\" \/>\n<meta property=\"article:published_time\" content=\"2022-08-15T19:41:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/hero-3991352.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"360\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"R Marketing Digital\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/creacion-de-perfiles-de-aplicaciones-de-audio-web-en-chrome\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/creacion-de-perfiles-de-aplicaciones-de-audio-web-en-chrome\\\/\"},\"author\":{\"name\":\"R Marketing Digital\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"headline\":\"Creaci\u00f3n de perfiles de aplicaciones de audio web en Chrome\",\"datePublished\":\"2022-08-15T19:41:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/creacion-de-perfiles-de-aplicaciones-de-audio-web-en-chrome\\\/\"},\"wordCount\":1808,\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/creacion-de-perfiles-de-aplicaciones-de-audio-web-en-chrome\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/10\\\/hero-3991352.jpg\",\"articleSection\":[\"Dev\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/creacion-de-perfiles-de-aplicaciones-de-audio-web-en-chrome\\\/\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/creacion-de-perfiles-de-aplicaciones-de-audio-web-en-chrome\\\/\",\"name\":\"Creaci\u00f3n de perfiles de aplicaciones de audio web en Chrome - R Marketing Digital\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/creacion-de-perfiles-de-aplicaciones-de-audio-web-en-chrome\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/creacion-de-perfiles-de-aplicaciones-de-audio-web-en-chrome\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/10\\\/hero-3991352.jpg\",\"datePublished\":\"2022-08-15T19:41:28+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"description\":\"Aprenda a perfilar el rendimiento de las aplicaciones Web Audio en Chrome usando chrome:\\\/\\\/tracing y el WebAudio pesta\u00f1a en DevTools. 4 de mayo de 2020 Ha\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/creacion-de-perfiles-de-aplicaciones-de-audio-web-en-chrome\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/creacion-de-perfiles-de-aplicaciones-de-audio-web-en-chrome\\\/#primaryimage\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/10\\\/hero-3991352.jpg\",\"contentUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/10\\\/hero-3991352.jpg\",\"width\":1200,\"height\":360,\"caption\":\"hero-3991352-2200209-jpg\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/\",\"name\":\"R Marketing Digital\",\"description\":\"Agencia SEO | Publicidad redes sociales | Community Management\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/rmarketingdigital.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\",\"name\":\"R Marketing Digital\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"caption\":\"R Marketing Digital\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Profiling Web Audio Apps in Chrome - R Marketing Digital","description":"Learn how to profile the performance of Web Audio applications in Chrome using chrome: \/\/ tracing and the WebAudio tab in DevTools. May 4, 2020 Ha","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/rmarketingdigital.com\/en\/dev\/creacion-de-perfiles-de-aplicaciones-de-audio-web-en-chrome\/","og_locale":"en_US","og_type":"article","og_title":"Creaci\u00f3n de perfiles de aplicaciones de audio web en Chrome","og_description":"Aprenda a perfilar el rendimiento de las aplicaciones Web Audio en Chrome usando chrome:\/\/tracing y el WebAudio pesta\u00f1a en DevTools. 4 de mayo de 2020 Ha","og_url":"https:\/\/rmarketingdigital.com\/en\/dev\/creacion-de-perfiles-de-aplicaciones-de-audio-web-en-chrome\/","og_site_name":"R Marketing Digital","article_published_time":"2022-08-15T19:41:28+00:00","og_image":[{"width":1200,"height":360,"url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/hero-3991352.jpg","type":"image\/jpeg"}],"author":"R Marketing Digital","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/rmarketingdigital.com\/dev\/creacion-de-perfiles-de-aplicaciones-de-audio-web-en-chrome\/#article","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/dev\/creacion-de-perfiles-de-aplicaciones-de-audio-web-en-chrome\/"},"author":{"name":"R Marketing Digital","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"headline":"Creaci\u00f3n de perfiles de aplicaciones de audio web en Chrome","datePublished":"2022-08-15T19:41:28+00:00","mainEntityOfPage":{"@id":"https:\/\/rmarketingdigital.com\/dev\/creacion-de-perfiles-de-aplicaciones-de-audio-web-en-chrome\/"},"wordCount":1808,"image":{"@id":"https:\/\/rmarketingdigital.com\/dev\/creacion-de-perfiles-de-aplicaciones-de-audio-web-en-chrome\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/hero-3991352.jpg","articleSection":["Dev"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/rmarketingdigital.com\/dev\/creacion-de-perfiles-de-aplicaciones-de-audio-web-en-chrome\/","url":"https:\/\/rmarketingdigital.com\/dev\/creacion-de-perfiles-de-aplicaciones-de-audio-web-en-chrome\/","name":"Profiling Web Audio Apps in Chrome - R Marketing Digital","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rmarketingdigital.com\/dev\/creacion-de-perfiles-de-aplicaciones-de-audio-web-en-chrome\/#primaryimage"},"image":{"@id":"https:\/\/rmarketingdigital.com\/dev\/creacion-de-perfiles-de-aplicaciones-de-audio-web-en-chrome\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/hero-3991352.jpg","datePublished":"2022-08-15T19:41:28+00:00","author":{"@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"description":"Learn how to profile the performance of Web Audio applications in Chrome using chrome: \/\/ tracing and the WebAudio tab in DevTools. May 4, 2020 Ha","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rmarketingdigital.com\/dev\/creacion-de-perfiles-de-aplicaciones-de-audio-web-en-chrome\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/rmarketingdigital.com\/dev\/creacion-de-perfiles-de-aplicaciones-de-audio-web-en-chrome\/#primaryimage","url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/hero-3991352.jpg","contentUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/hero-3991352.jpg","width":1200,"height":360,"caption":"hero-3991352-2200209-jpg"},{"@type":"WebSite","@id":"https:\/\/rmarketingdigital.com\/#website","url":"https:\/\/rmarketingdigital.com\/","name":"R Digital Marketing","description":"SEO Agency | Advertising social networks | Community Management","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rmarketingdigital.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e","name":"R Digital Marketing","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","caption":"R Marketing Digital"}}]}},"_links":{"self":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/posts\/92637","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/comments?post=92637"}],"version-history":[{"count":0,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/posts\/92637\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/media\/92638"}],"wp:attachment":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/media?parent=92637"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/categories?post=92637"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/tags?post=92637"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}