beta
cables is under heavy development.
There might be one or another bug, please let us know about it!
cables DocumentationHow To UseWorking with filesKeyboard ShortcutsUser Interface WalkthroughBeginner TutorialBeginner 1: Drawing A CircleBeginner 2: TransformationsBeginner 3: ColorMore TransformationsintermediateImage CompositionsPost-Processing 3D Scenescommunicationcables APICommunication with an Arduino via SerialCommunicating with Arduino over MQTTExporting 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 patchescoding opsCreating AttachmentsGeneral op/Port CallbacksPortsDynamic PortsArray PortsBoolean portsInteger Number PortsObject PortsString portsTrigger PortsFloating Point Number PortsGUI/UI attributesHello Op - Part 1LibrariesDeveloping OpsGuidelinesObject PortsWriting ShadersWeb Audio Op DevelopmentHTML and CSS in cablesLightingLightsShadowsWorking with audioBasic Audio SetupWorking with EffectsReal-Time Audio Analyzation & Audio VisualizationOffline Audio Visualization & AnalyzationFAQAudio in web browsersEmbeddingHow to integrate my cables patch into my CMS (webflow/wix/squarespace/...)?getting a warning when running the patch in electronHow to remove grey rectangles on touch (mobile)?Why doesn't the DownloadTexture op work on iOS?How to disable page scrolling on mobile?Mobile tippsTransparent CanvasFeatures and SupportHow to contribute code to cablesWill there be support for (animated) GIFs?How to report a bug in cablesGeneral questionsLicences and paymentWhat licence do i need to use cables?Will I have to pay for it in the future?How is my work licenced when using cables?Does cables support midi and OSC?ShadertoyTechnical questionsUI / EditorGuide to VR in cablesWebGL1 and WebGL2

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


help cables get better and edit this file on github