cables DocumentationHow To UseWorking with filesKeyboard ShortcutsUser Interface WalkthroughBeginner TutorialBeginner 1: Drawing A CircleBeginner 2: TransformationsBeginner 3: ColorMore TransformationsIntermediateImage CompositionsPost-Processing 3D ScenesCommunicationcables APIExporting And EmbeddingHow to serve files externally and fix CORS headersExporting PatchesExport using the cables command line interfaceExport via IframeExport creating a standalone executableExport to github (pages)Export and deploy to netlifyExport a ZIP fileExternal triggers / functionsUsing variablesPreviewing / uploading exported cables patchesExamples for EmbeddingPermissionsUsersPatchesTeamsOpsMultiplayerPatchlistsCoding OpsCreating AttachmentsGeneral op/Port CallbacksPortsDynamic PortsArray PortsBoolean portsInteger Number PortsObject PortsString portsTrigger PortsFloating Point Number PortsGUI/UI attributesHello Op - Part 1LibrariesDeveloping OpsRenaming / Creating a new versionCreating Viz OpsGuidelinesObject PortsPatching Ops / SubPatchOpsWriting ShadersWeb Audio Op DevelopmentHTML And CSS In CablesLightingLightsShadowsWorking With AudioBasic Audio SetupWorking with EffectsReal-Time Audio Analyzation & Audio VisualizationOffline Audio Visualization & AnalyzationOptimizing Performance In PatchesTools for debugging your patchHow to optimize cables patches with the Performance opHow to optimize cables patches with the ProfilerCommon pitfalls with the "usual suspects"Optimizing arraysDebugging Shaders with ShaderInfoFAQAudio in web browsersHow to make demoscene demos with cables.glEmbeddingHow to integrate my cables patch into my CMS (webflow/wix/squarespace/...)?How to remove grey rectangles on touch (mobile)?Why doesn't the DownloadTexture op work on iOS?How to disable page scrolling on mobile?Mobile tippsHow to run exported patches on your local machineTransparent CanvasFeatures and SupportHow to contribute code to cablesWill there be support for (animated) GIFs?Can i use a website as a texture?Screenshots and Video recordingHow to report a bug in cablesHow can I share a patch to get help?How can I support cables?Video playback in cablesGeneral questionsWhat is dev.cables.glJavascript Frameworkscordova / phonegapelectronreactvuejsLicenses and paymentWhat license do i need to use cables?Will I have to pay for it in the future?How is my work licensed when using cables?Does cables support midi and OSC?Patch PermissionsMy User Profile & Social MediaShadertoyCables at schools and universitiesTechnical questionsWebGL1 and WebGL2
cables Documentation  ⟩  FAQ  ⟩  Audio in web browsers

Audio in web browsers

Before diving into adding sounds into your cables projects, let's cover some basics of web based audio in its current state.
As a general rule, browsers will only allow playing audio after some user-interaction with the webpage has happened.
This is to make websites less intrusive and annoying when you open them in a desktop or mobile browser. It is also part of security permissions set for a website - in our case:

  • cables.gl published patch pages
  • the cables.gl editor
  • your own website where you plan to export your project to

We recommend checking out the standards for web browsers and devices you plan to deploy on and definitely advise some debugging time to nail all of the gotchas.

Some reference materials:

https://developer.chrome.com/blog/autoplay/

https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide

let's take a look at some frequently asked questions and answers:

why does my sound work in cables.gl editor but not when I export the project to my server?

This is most likely related to the way web browsers decide if a sound is allowed to play on a webpage. When you are working in the cables.gl editor, you are interacting with a "website" and therefore any audio that you specify to play will be allowed to play.

When you or a visitor to your page sees the same project, you may not have set up a user interaction to allow the browser to play a sound. The easiest way to insure that you can play sounds in your exported and shared projects is to add a PlayButton operator.

we still don't get sound in my project, but everything seems to be setup correctly?

The second most common reason why a sound won't play on a webpage is that the browser tab is muted.
To unmute a browser tab click on the speaker button in a browser tab.

mute_tab

Another, less common, reason is that the user has explicitly blocked permission for the website to play audio.
A website will ask permission for webcam, microphone and even audio access. If a user has blocked audio playback access on your webpage, they will not be able to hear sounds that are played.
Most often this won't be an issue, but just in case, this is how you can test if sound is blocked on a page or a browser tab:

in Chrome you can click the little Lock icon next to the url.
(if you don't see sound settings, click "site settings")

  • "allow" will always allow playing audio automatically
  • "default" will (probably) suspend it by default
  • "block" will always block a permission

chrome-audiosetting

what is this speaker button on my patch?

The AudioOutput operator has been streamlined and now displays a button to manually permit the browser to play your project's audio. Think of it as a free PlayButton safety net in case you don't need or forgot to add it into your patch.

audioout_unmute

In case you don't want to see the little speaker button, you can toggle it off in the op's parameters.

show_audiounmute

Found a problem? Edit this file on github and contribute to cables!