cables DocumentationHow To UseWorking with filesKeyboard ShortcutsUser Interface WalkthroughBeginner TutorialBeginner 1: Drawing A CircleBeginner 2: TransformationsBeginner 3: ColorMore TransformationsIntermediateImage CompositionsPost-Processing 3D ScenesExporting 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 full PatchExport a ZIP fileExternal triggers / functionsUsing variablesPreviewing / uploading exported cables patchesExamples for EmbeddingPermissionsUsersPatchesTeamsOpsMultiplayerPatchlistsCoding OpsCreating AttachmentsGeneral op/Port CallbacksPortsMultiPortsArray 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 DevelopmentDeveloping CablesRepositoriesSet up local environmentScriptsHow to work with forksGenerated DocumentationUsing standalone to develop cablesCables StandaloneGeneralCoding OpsSharing opsUsing NPMImport/ExportStandalone - FAQLightingLightsShadowsWorking With AudioBasic Audio SetupWorking with EffectsReal-Time Audio Analyzation & Audio VisualizationOffline Audio Visualization & AnalyzationCommunicationcables APIOptimizing 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.glHTML And CSS In CablesJavascript 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  ⟩  Working With Audio  ⟩  Basic Audio Setup

Basic Audio Setup

To get an audio stream into cables, there are multiple options. First off, to play back any file, you need to use the Audio Buffer op. With this op, you create an audio buffer that you can connect to one of our audio players mentioned in the next section. If you upload a file to cables and drag-drop it on the patch field, an AudioBuffer op will be created.

A note on file formats

Depending on your target platform, you need to keep in mind that not all file formats work consistently on all browsers & operating systems. To counteract this, we provide the BrowserSpecificFile op that lets you switch files depending on which browser/OS is detected. In its' documentation, you can find the specific file formats needed for the different browsers. Have a look at the example patch for usage.

As a little example: To be able to loop a file in Firefox, the file format needs to be .ogg, where as in Chrome, you need an .mp3. In Safari, you need an .m4a file.

AudioBufferPlayer vs. SamplePlayer

After you successfully loaded a file into the AudioBuffer op, you need a player to play back the buffer. You have two choices here, depending on what you want to do:

  1. If you want to play back a sound as a loop, such as a background ambience or a longer audio file, such as a musical piece, you should use the AudioBufferPlayer op.

  2. If you want to play a shorter sound (called one-shot), such as a notification sound, a drum sample or want to play a file based on a trigger, use the SamplePlayer op. A little side note: keep in mind that when triggering multiple times and using longer files, the audio file will play back twice. Make sure you time your triggers correctly to avoid overlapping the sound multiple times. This can lead to distortion, because the sounds add up in volume.

players

Getting sound to play back on your speakers

After you have connected the AudioBuffer to one of the two players, connect the player to an Output op. If you press play on your player, you should hear sound coming out of the speakers. If you don't hear sound, make sure to check your system's volume settings and verify your browser tab is not muted.

output

Multiple audio inputs

It is not recommended to plug multiple audio streams (such as two SamplePlayers) into one Output op as it can lead to unexpected behaviour.

If you want to connect multiple audio sources, use the Mixer op before your output and connect the two. The Mixer op features volume and pan controls for up to eight channels. If you need more input channels, cascade multiple Mixers.

output

Connecting the timeline and audio playback

Timeline can be easily connected with audio playback by using TimeLinecontrols.

output

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