To learn more on how to add audio to your Rive file, see Audio Events.
On the web, most browsers restrict audio from playing until the web page is interacted with. This applies to any audio, not just Rive audio.The web page needs to receive some interaction (touch/click) before sound is played. This interaction can be anything on the browser and doesn’t need to be a Rive specific interaction.
Referenced assets require a little bit more work to play audio. Audio will still automatically play, but the audio file(s) must be loaded when a Rive runtime attempts to play audio.For more information, see Loading Assets.
To control volume on the artboard, set the .volume property on the Rive instance. The value is a multiplier applied to the default volume level of each audio event on the artboard, allowing you to adjust the overall audio level up or down as needed. The default value is 1.0, which means the audio plays at its default level.
To mute the audio, set .volume to 0.The example below adjusts the volume to be 50% softer than the default level.
{"docsConfig":{"theme":"mint","$schema":"https://mintlify.com/docs.json","name":"Rive","colors":{"primary":"#ffa41c","light":"#ffa41c","dark":"#ffa41c"},"logo":{"light":"https://mintcdn.com/rive/tBktbqSaEr9ZwywZ/logo/rive_top_logo_black.svg?fit=max\u0026auto=format\u0026n=tBktbqSaEr9ZwywZ\u0026q=85\u0026s=e09b8659935986a837947ae7c3b104e0","dark":"https://mintcdn.com/rive/tBktbqSaEr9ZwywZ/logo/rive_top_logo_white.svg?fit=max\u0026auto=format\u0026n=tBktbqSaEr9ZwywZ\u0026q=85\u0026s=d2ccc2c4dec459d584f578475de89248","href":"https://rive.app?utm_source=docs\u0026utm_medium=header_nav"},"favicon":"https://mintcdn.com/rive/IGEy4oJSivuQmjey/favicon_black.png?fit=max\u0026auto=format\u0026n=IGEy4oJSivuQmjey\u0026q=85\u0026s=986c81e5b82e1138420d773296030a3a","appearance":{"default":"dark"},"background":{"decoration":"grid"},"navbar":{"links":[{"href":"/tutorials/learn-rive","label":"Learn"},{"href":"/community/support","label":"Support"}],"primary":{"type":"button","label":"Get Rive","href":"https://rive.app/downloads?utm_source=docs\u0026utm_medium=header_nav"}},"footer":{"socials":{"youtube":"https://www.youtube.com/channel/UCPal2R1FxwRTPylhP_7ofEg","x":"https://twitter.com/rive_app","instagram":"https://www.instagram.com/rive.app","github":"https://github.com/rive-app","discord":"https://discord.gg/rive-app"},"links":[{"header":"Resources","items":[{"label":"Community","href":"https://community.rive.app?utm_source=docs\u0026utm_medium=footer_nav"},{"label":"Blog","href":"https://rive.app/blog?utm_source=docs\u0026utm_medium=footer_nav"},{"label":"Case Studies","href":"https://rive.app/blog/case-studies?utm_source=docs\u0026utm_medium=footer_nav"},{"label":"Marketplace","href":"https://rive.app/marketplace?utm_source=docs\u0026utm_medium=footer_nav"},{"label":"Feature Requests","href":"https://community.rive.app/c/feature-requests"}]},{"header":"Company","items":[{"label":"Careers","href":"https://rive.app/careers?utm_source=docs\u0026utm_medium=footer_nav"},{"label":"Terms of Service","href":"/docs/legal/terms-of-service"},{"label":"Acceptable Use Policy","href":"/docs/legal/acceptable-use-policy"},{"label":"Privacy Policy","href":"/docs/legal/privacy-policy"}]}]},"fonts":{"heading":{"family":"Tomorrow Placeholder","weight":500,"source":"https://framerusercontent.com/assets/nCpxWS6DaPlPe0lHzStXAPCo3lw.woff2","format":"woff2"}},"integrations":{"amplitude":{"apiKey":"38803036884a752b104ee4bf501e0945"}},"contextual":{"options":["copy","view","chatgpt","claude"],"display":"header"},"variables":{"runtimeCurrentNameApple":"New Runtime","runtimeLegacyNameApple":"Legacy Runtime","monthlyCreditsVoyager":"$20","monthlyCreditsEnterprise":"$40","pricingCadetMonthly":"$17","pricingCadetYearly":"$108","pricingVoyagerMonthly":"$49","pricingVoyagerYearly":"$384","pricingEnterpriseYearly":"$1,440","versionWeb":"2.40.1","versionReact":"4.33.0","versionApple":"6.24.0","versionAndroid":"11.9.2","versionReactNative":"0.5.5","versionFlutter":"0.14.11","versionDevFlutter":"0.15.0-dev.4","versionUnity":"0.4.5","versionUnreal":"0.4.25","supportForm":"https://forms.rive.app/support?utm_medium=support_page","supportFormEducational":"https://forms.rive.app/education?utm_medium=support_page"},"styling":{"latex":true},"navigation":{"pages":[]}},"deployment":{"deploymentMetadataValue":{"subdomain":"rive","hasAudioNarration":false,"actualSubdomain":"rive","customDomains":["rive.app"],"gitSource":{"type":"github","owner":"rive-app","repo":"rive-docs","deployBranch":"main","contentDirectory":"","isPrivate":false,"mountPath":"","label":""},"chroma":{"liveDeploymentHistoryId":"6ae8e4b0a87c707f4b901a31","collectionId":"73024da6-63a5-4dc9-9335-bea7112ddfc2","schemaVersion":"v3","latestBuiltDeploymentHistoryId":"6ae8e4b0a87c707f4b901a31"},"feedback":{"edits":true,"issues":true,"thumbs":true},"entitlements":{"AI_CHAT":{"status":"ENABLED"},"REMOVE_BRANDING":{"status":"ENABLED"},"WEB_MCP":{"status":"ENABLED"},"NARRATION":{"status":"ENABLED"}},"buildId":"6ae8e4b0a87c707f4b901a31","clientVersion":"0.0.4045","searchFilterCounts":[{"language":"default","tag":"Runtimes","count":279},{"language":"default","tag":"Scripting","count":187},{"language":"default","tag":"Scripting API","count":167},{"language":"default","tag":"Editor","count":100},{"language":"default","tag":"Fundamentals","count":64},{"language":"default","tag":"GPU","count":45},{"language":"default","tag":"Design","count":32},{"language":"default","tag":"Artboards","count":25},{"language":"default","tag":"Interfaces","count":24},{"language":"default","tag":"Advanced Topics","count":22}]},"assistantConfig":{},"basePath":"/docs","hasChatPermissions":false,"hasWebMcpPermissions":true,"toggles":[{"name":"kill-isr","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-mintlify-slack","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-integrations-settings","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-pr-grouping","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"custom-prefix","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"analytics-v7","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"user-flows-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"no-publish-flow","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-onboarding","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"llms-txt-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving-live","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"stripTemperatureMiddleware","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"support-platform-pylon-zendesk","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"instant-rollback","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications-server","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-fable","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fixed-ai-action-pricing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automation-resolve-merge-conflict","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"scoped-publishing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"mintql","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"page-level-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-version-history-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"billing-page-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"full-page-search","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workspace-projects","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"assistant-v5","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"byok-sep-25","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fork-pr-previews","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"revalidation-jwt","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"vite-origin","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"billing-updated-9-15","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-sso-scim","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"hobby-abuse-scan","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"dashboard-inbox","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-signup","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"turbopuffer-dual-write","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-enabled","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"approve-review-flow","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"sso-setup-deadline-banner","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false}],"googleFontsInlined":false},"customCss":[{"filePath":"custom.css","content":"ol li,p,ul li{font-size:14px}.signature .code-block{border:0}.signature .code-block [data-floating-buttons=true]{display:none}.signature .code-block [data-component-part=code-block-root]{background:0 0;padding:0}.dark .card{background-color:var(--background-dark)!important;border-color:rgb(255 255 255/.1)!important}.dark .card:hover{border-color:var(--primary-light)!important}"}],"page":{"pagePath":"runtimes/web/playing-audio","slug":"/runtimes/web/playing-audio","pageMetadata":{"title":"Playing Audio","description":"Playing Rive audio events","href":"/runtimes/web/playing-audio"},"description":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const _components = {\n p: \"p\",\n ..._provideComponents(),\n ...props.components\n };\n return _jsx(_components.p, {\n children: \"Playing Rive audio events\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\n","frontmatter":{},"scope":{}},"pageType":"default","mdx":{"mdxSource":{"compiledSource":"\"use strict\";const{Fragment:_Fragment,jsx:_jsx,jsxs:_jsxs}=arguments[0];const{useMDXComponents:_provideComponents}=arguments[0];function _createMdxContent(props){const _components={a:`a`,code:`code`,p:`p`,pre:`pre`,span:`span`,..._provideComponents(),...props.components},{CodeBlock,Heading,Warning}=_components;if(!CodeBlock)_missingMdxReference(`CodeBlock`,true);if(!Heading)_missingMdxReference(`Heading`,true);if(!Warning)_missingMdxReference(`Warning`,true);return _jsxs(_Fragment,{children:[_jsxs(_components.p,{children:[`To learn more on how to add audio to your Rive file, see `,_jsx(_components.a,{href:`/editor/events/audio-events`,children:`Audio Events`}),`.`]}),`\n`,_jsxs(Warning,{children:[_jsx(_components.p,{children:`On the web, most browsers restrict audio from playing until the web page is interacted with. This applies to any audio, not just Rive audio.`}),_jsx(_components.p,{children:`The web page needs to receive some interaction (touch/click) before sound is played. This interaction can be anything on the browser and doesn’t need to be a Rive specific interaction.`})]}),`\n`,_jsx(Heading,{level:`2`,id:`embedded-assets`,children:`Embedded assets`}),`\n`,_jsx(_components.p,{children:`Embedded assets require no additional work to play audio.`}),`\n`,_jsx(Heading,{level:`2`,id:`referenced-assets`,children:`Referenced assets`}),`\n`,_jsx(_components.p,{children:`Referenced assets require a little bit more work to play audio. Audio will still automatically play, but the audio file(s) must be loaded when a Rive runtime attempts to play audio.`}),`\n`,_jsxs(_components.p,{children:[`For more information, see `,_jsx(_components.a,{href:`/runtimes/web/loading-assets`,children:`Loading Assets`}),`.`]}),`\n`,_jsx(Heading,{level:`2`,id:`volume-control`,children:`Volume control`}),`\n`,_jsxs(_components.p,{children:[`To control volume on the artboard, set the `,_jsx(_components.code,{children:`.volume`}),` property on the Rive instance. The value is a multiplier applied to the default volume level of each audio event on the artboard, allowing you to adjust the overall audio level up or down as needed. The default value is `,_jsx(_components.code,{children:`1.0`}),`, which means the audio plays at its default level.\nTo mute the audio, set `,_jsx(_components.code,{children:`.volume`}),` to `,_jsx(_components.code,{children:`0`}),`.`]}),`\n`,_jsx(_components.p,{children:`The example below adjusts the volume to be 50% softer than the default level.`}),`\n`,_jsx(CodeBlock,{filename:``,numberOfLines:`2`,language:`javascript`,children:_jsx(_components.pre,{className:`shiki shiki-themes github-light-default dark-plus`,style:{backgroundColor:`#ffffff`,\"--shiki-dark-bg\":`#0B0C0E`,color:`#1f2328`,\"--shiki-dark\":`#D4D4D4`},language:`javascript`,children:_jsxs(_components.code,{language:`javascript`,numberOfLines:`2`,children:[_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:`const`}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#4FC1FF`},children:` r`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#D4D4D4`},children:` =`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:` new`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:` Rive`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` ({ `}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#D4D4D4`},children:`...`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` });`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`r`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`.`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`volume`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#D4D4D4`},children:` =`}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#B5CEA8`},children:` 0.5`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`;`})]}),`\n`]})})})]})}function MDXContent(props={}){const{wrapper:MDXLayout}={..._provideComponents(),...props.components};return MDXLayout?_jsx(MDXLayout,{...props,children:_jsx(_createMdxContent,{...props})}):_createMdxContent(props)}return{default:MDXContent};function _missingMdxReference(id,component){throw new Error(`Expected `+(component?`component`:`object`)+\" `\"+id+\"` to be defined: you likely forgot to import, pass, or provide it.\")}","frontmatter":{},"scope":{"config":{},"pageMetadata":{"title":"Playing Audio","description":"Playing Rive audio events","href":"/runtimes/web/playing-audio"}}},"mdxSourceWithNoJs":null},"mdxExtracts":{"tableOfContents":[{"title":"Embedded assets","slug":"embedded-assets","depth":2,"children":[]},{"title":"Referenced assets","slug":"referenced-assets","depth":2,"children":[]},{"title":"Volume control","slug":"volume-control","depth":2,"children":[]}],"codeExamples":{}},"jsLinks":["/docs/_mintlify/custom/rive/6157a238f0df2356/rive-init.js"],"subdomain":"rive","siteName":"Rive","title":"Playing Audio - Rive","navMaps":{"firstHrefInVersion":{},"firstHrefInLanguage":{}},"lastModified":"2026-09-11T15:46:57.676Z","originalFileLocation":"runtimes/web/playing-audio.mdx"},"headHtml":"\u003cscript data-mint-head>(function(){var d=document.documentElement,p=null;if(!p){try{p=localStorage.getItem(\"isDarkMode\")}catch(e){}if(p==='true')p='dark';else if(p==='false')p='light';if(p!=='light'\u0026\u0026p!=='dark'\u0026\u0026p!=='system')p=\"dark\"}var r=p==='system'?(matchMedia(\"(prefers-color-scheme: dark)\").matches?'dark':'light'):p;d.classList.remove(r==='dark'?'light':'dark');d.classList.add(r);d.setAttribute(\"data-theme-preference\",p)})();\u003c/script>\u003cmeta data-mint-head name=\"description\" content=\"Playing Rive audio events\">\u003cmeta data-mint-head name=\"application-name\" content=\"Rive\">\u003cmeta data-mint-head name=\"generator\" content=\"Mintlify\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/docs/mintlify-assets/_mintlify/favicons/rive/QOppeg00QlFTw5Bu/_generated/favicon/android-chrome-192x192.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"apple-touch-icon\" type=\"image/png\" sizes=\"180x180\" href=\"/docs/mintlify-assets/_mintlify/favicons/rive/QOppeg00QlFTw5Bu/_generated/favicon/apple-touch-icon.png\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/docs/mintlify-assets/_mintlify/favicons/rive/QOppeg00QlFTw5Bu/_generated/favicon/favicon-16x16.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/docs/mintlify-assets/_mintlify/favicons/rive/QOppeg00QlFTw5Bu/_generated/favicon/favicon-32x32.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/docs/mintlify-assets/_mintlify/favicons/rive/QOppeg00QlFTw5Bu/_generated/favicon/favicon.ico\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/docs/mintlify-assets/_mintlify/favicons/rive/QOppeg00QlFTw5Bu/_generated/favicon-dark/android-chrome-192x192.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/docs/mintlify-assets/_mintlify/favicons/rive/QOppeg00QlFTw5Bu/_generated/favicon-dark/favicon-16x16.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/docs/mintlify-assets/_mintlify/favicons/rive/QOppeg00QlFTw5Bu/_generated/favicon-dark/favicon-32x32.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/docs/mintlify-assets/_mintlify/favicons/rive/QOppeg00QlFTw5Bu/_generated/favicon-dark/favicon.ico\" media=\"(prefers-color-scheme: dark)\">\u003cmeta data-mint-head property=\"og:title\" content=\"Playing Audio - Rive\">\u003cmeta data-mint-head property=\"og:description\" content=\"Playing Rive audio events\">\u003cmeta data-mint-head property=\"og:site_name\" content=\"Rive\">\u003cmeta data-mint-head property=\"og:url\" content=\"https://rive.app/docs/runtimes/web/playing-audio\">\u003cmeta data-mint-head property=\"og:type\" content=\"website\">\u003cmeta data-mint-head property=\"og:image\" content=\"https://rive.mintlify.app/_mintlify/api/og/v2?division=Web+%28JS%29\u0026amp;title=Playing+Audio\u0026amp;description=Playing+Rive+audio+events\u0026amp;theme=9d194ea41709afb0505e42e9\u0026amp;signature=440f3a373d1f3b0f7d3e16593faa036a8c11c2a0123b5a2c99353a390bf04907\">\u003cmeta data-mint-head property=\"og:image:width\" content=\"1200\">\u003cmeta data-mint-head property=\"og:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"twitter:card\" content=\"summary_large_image\">\u003cmeta data-mint-head name=\"twitter:title\" content=\"Playing Audio - Rive\">\u003cmeta data-mint-head name=\"twitter:description\" content=\"Playing Rive audio events\">\u003cmeta data-mint-head name=\"twitter:image\" content=\"https://rive.mintlify.app/_mintlify/api/og/v2?division=Web+%28JS%29\u0026amp;title=Playing+Audio\u0026amp;description=Playing+Rive+audio+events\u0026amp;theme=9d194ea41709afb0505e42e9\u0026amp;signature=440f3a373d1f3b0f7d3e16593faa036a8c11c2a0123b5a2c99353a390bf04907\">\u003cmeta data-mint-head name=\"twitter:image:width\" content=\"1200\">\u003cmeta data-mint-head name=\"twitter:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"msapplication-config\" content=\"/docs/mintlify-assets/_mintlify/favicons/rive/QOppeg00QlFTw5Bu/_generated/favicon/browserconfig.xml\">\u003cmeta data-mint-head name=\"apple-mobile-web-app-title\" content=\"Rive\">\u003cmeta data-mint-head name=\"msapplication-TileColor\" content=\"#ffa41c\">\u003clink data-mint-head rel=\"canonical\" href=\"https://rive.app/docs/runtimes/web/playing-audio\">\u003clink data-mint-head rel=\"alternate\" type=\"application/xml\" href=\"/docs/sitemap.xml\">\u003clink data-mint-head rel=\"alternate\" type=\"text/markdown\" href=\"/docs/runtimes/web/playing-audio.md\">\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https://rive.app/#organization\",\"name\":\"Rive\",\"url\":\"https://rive.app\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https://mintcdn.com/rive/tBktbqSaEr9ZwywZ/logo/rive_top_logo_black.svg?fit=max\u0026auto=format\u0026n=tBktbqSaEr9ZwywZ\u0026q=85\u0026s=e09b8659935986a837947ae7c3b104e0\"}},{\"@type\":\"WebSite\",\"@id\":\"https://rive.app/docs#website\",\"name\":\"Rive\",\"url\":\"https://rive.app/docs\",\"publisher\":{\"@id\":\"https://rive.app/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https://rive.app/docs/runtimes/web/playing-audio#webpage\",\"url\":\"https://rive.app/docs/runtimes/web/playing-audio\",\"name\":\"Playing Audio\",\"description\":\"Playing Rive audio events\",\"dateModified\":\"2026-09-11T15:46:57.676Z\",\"isPartOf\":{\"@id\":\"https://rive.app/docs#website\"},\"breadcrumb\":{\"@id\":\"https://rive.app/docs/runtimes/web/playing-audio#breadcrumb\"}},{\"@type\":\"BreadcrumbList\",\"@id\":\"https://rive.app/docs/runtimes/web/playing-audio#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Runtimes\",\"item\":\"https://rive.app/docs/runtimes/web/web-js\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web (JS)\",\"item\":\"https://rive.app/docs/runtimes/web/web-js\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Playing Audio\",\"item\":\"https://rive.app/docs/runtimes/web/playing-audio\"}]},{\"@type\":[\"Article\",\"TechArticle\"],\"@id\":\"https://rive.app/docs/runtimes/web/playing-audio#article\",\"headline\":\"Playing Audio\",\"name\":\"Playing Audio\",\"description\":\"Playing Rive audio events\",\"url\":\"https://rive.app/docs/runtimes/web/playing-audio\",\"mainEntityOfPage\":{\"@id\":\"https://rive.app/docs/runtimes/web/playing-audio#webpage\"},\"dateModified\":\"2026-09-11T15:46:57.676Z\",\"publisher\":{\"@id\":\"https://rive.app/#organization\"},\"isPartOf\":{\"@id\":\"https://rive.app/docs#website\"}}]}\u003c/script>","siteName":"Rive","nav":{"global":null,"tabs":[{"tab":"Home","pages":[{"title":"Home","href":"/getting-started/introduction"}]},{"tab":"Editor","pages":[{"title":"Editor","href":"/editor/get-rive"}]},{"tab":"Scripting","pages":[{"title":"Scripting","href":"/scripting/getting-started"}]},{"tab":"Runtimes","groups":[{"group":" ","pages":[{"title":"Getting Started with the Rive Runtimes","sidebarTitle":"Getting Started","href":"/runtimes/getting-started"},{"title":"Rive Runtime Demos \u0026 Starters","sidebarTitle":"Demos","mode":"wide","href":"/runtimes/demos"},{"title":"Feature Support","href":"/feature-support"},{"title":"Runtime Sizes","href":"/runtimes/runtime-sizes"},{"title":"Choosing a Renderer","href":"/runtimes/choose-a-renderer/overview"},{"group":"File formats","pages":[{"title":".riv File Format","href":"/runtimes/advanced-topic/format"},{"title":"Rive Markup Language (RML)","sidebarTitle":"RML","href":"/runtimes/advanced-topic/rml"}]}]},{"group":"Runtimes","pages":[{"group":"Web (JS)","pages":[{"title":"Getting Started","href":"/runtimes/web/web-js"},{"title":"Canvas vs WebGL2","href":"/runtimes/web/canvas-vs-webgl"},{"title":"Rive Parameters","href":"/runtimes/web/rive-parameters"},{"title":"Artboards","href":"/runtimes/web/artboards"},{"title":"Layout","href":"/runtimes/web/layouts"},{"title":"State Machine Playback","href":"/runtimes/web/state-machines"},{"title":"Data Binding","href":"/runtimes/web/data-binding"},{"title":"Loading Assets","href":"/runtimes/web/loading-assets"},{"title":"Fonts","href":"/runtimes/web/fonts"},{"title":"Semantics","href":"/runtimes/web/semantics"},{"title":"Focus","href":"/runtimes/web/focus"},{"title":"Text and key input","sidebarTitle":"Text and Key Input","href":"/runtimes/web/text-and-key-input"},{"title":"GPU Canvas","href":"/runtimes/web/gpu-canvas"},{"title":"Preloading WASM","href":"/runtimes/web/preloading-wasm"},{"title":"Caching a Rive File","description":null,"href":"/runtimes/web/caching-a-rive-file"},{"title":"Playing Audio","href":"/runtimes/web/playing-audio"},{"title":"Low-level API Usage","description":"Using low-level JS APIs to construct Rive scenes.","href":"/runtimes/web/low-level-api-usage"},{"group":"Legacy Features","pages":[{"title":"Animation Playback","href":"/runtimes/web/animation-playback"},{"title":"Inputs","href":"/runtimes/web/inputs"},{"title":"Text","href":"/runtimes/web/text"},{"title":"Rive Events","href":"/runtimes/web/rive-events"}]},{"title":"Migration Guides","href":"/runtimes/web/migration-guides"},{"title":"FAQ","href":"/runtimes/web/faq"}]},{"group":"React","pages":[{"title":"React","sidebarTitle":"Getting Started","href":"/runtimes/react/react"},{"title":"Parameters and Return Values","href":"/runtimes/react/parameters-and-return-values"},{"title":"Artboards","href":"/runtimes/react/artboards"},{"title":"Layout","href":"/runtimes/react/layouts"},{"title":"State Machine Playback","href":"/runtimes/react/state-machines"},{"title":"Data Binding","href":"/runtimes/react/data-binding"},{"title":"Loading Assets","href":"/runtimes/react/loading-assets"},{"title":"Fonts","href":"/runtimes/react/fonts"},{"title":"Semantics","href":"/runtimes/react/semantics"},{"title":"Focus","href":"/runtimes/react/focus"},{"title":"Text and key input","sidebarTitle":"Text and Key Input","href":"/runtimes/react/text-and-key-input"},{"title":"GPU Canvas","href":"/runtimes/react/gpu-canvas"},{"title":"Preloading WASM","href":"/runtimes/react/preloading-wasm"},{"title":"Caching a Rive File","href":"/runtimes/react/caching-a-rive-file"},{"title":"Playing Audio","href":"/runtimes/react/playing-audio"},{"title":"Rendering to a Bitmap","href":"/runtimes/react/rendering-to-a-bitmap"},{"title":"Best Practices","href":"/runtimes/react/best-practices"},{"group":"Legacy Features","pages":[{"title":"Animation Playback","href":"/runtimes/react/animation-playback"},{"title":"Inputs","href":"/runtimes/react/inputs"},{"title":"Text","href":"/runtimes/react/text"},{"title":"Rive Events","href":"/runtimes/react/rive-events"}]},{"title":"Migration Guides","href":"/runtimes/react/migration-guides"}]},{"group":"React Native","pages":[{"title":"React Native","href":"/runtimes/react-native/react-native"},{"title":"GPU Canvas","href":"/runtimes/react-native/gpu-canvas"},{"title":"Loading Rive Files","href":"/runtimes/react-native/loading-rive-files"},{"title":"Props","href":"/runtimes/react-native/props"},{"title":"Rive Ref Methods","href":"/runtimes/react-native/rive-ref-methods"},{"title":"Error Handling","href":"/runtimes/react-native/error-handling"},{"title":"Adding Rive to Expo","href":"/runtimes/react-native/adding-rive-to-expo"},{"title":"Native SDK Version Customization","sidebarTitle":"Custom SDK Version","href":"/runtimes/react-native/native-version-customization"},{"title":"Artboards","href":"/runtimes/react-native/artboards"},{"title":"Layout","href":"/runtimes/react-native/layouts"},{"title":"State Machine Playback","href":"/runtimes/react-native/state-machines"},{"title":"Data Binding","href":"/runtimes/react-native/data-binding"},{"title":"Loading Assets","href":"/runtimes/react-native/loading-assets"},{"title":"Fonts","href":"/runtimes/react-native/fonts"},{"title":"Caching a Rive File","href":"/runtimes/react-native/caching-a-rive-file"},{"title":"Semantics","href":"/runtimes/react-native/semantics"},{"title":"Playing Audio","href":"/runtimes/react-native/playing-audio"},{"group":"Legacy Features","pages":[{"title":"Animation Playback","href":"/runtimes/react-native/animation-playback"},{"title":"Inputs","href":"/runtimes/react-native/inputs"},{"title":"Text","href":"/runtimes/react-native/text"},{"title":"Rive Events","href":"/runtimes/react-native/rive-events"}]},{"title":"Migration Guide","href":"/runtimes/react-native/migration-guide"}]},{"group":"Flutter","pages":[{"title":"Flutter","href":"/runtimes/flutter/flutter"},{"title":"Rive Native for Flutter","href":"/runtimes/flutter/rive-native"},{"title":"Artboards","href":"/runtimes/flutter/artboards"},{"title":"Layout","href":"/runtimes/flutter/layouts"},{"title":"State Machine Playback","href":"/runtimes/flutter/state-machines"},{"title":"Data Binding","href":"/runtimes/flutter/data-binding"},{"title":"Loading Assets","href":"/runtimes/flutter/loading-assets"},{"title":"Fonts","href":"/runtimes/flutter/fonts"},{"title":"Semantics","href":"/runtimes/flutter/semantics"},{"title":"Caching a Rive File","href":"/runtimes/flutter/caching-a-rive-file"},{"title":"Playing Audio","href":"/runtimes/flutter/playing-audio"},{"group":"Legacy Features","pages":[{"title":"Animation Playback","href":"/runtimes/flutter/animation-playback"},{"title":"Inputs","href":"/runtimes/flutter/inputs"},{"title":"Text","href":"/runtimes/flutter/text"},{"title":"Rive Events","href":"/runtimes/flutter/rive-events"}]},{"title":"Migration Guide","href":"/runtimes/flutter/migration-guide"},{"title":"FAQ","href":"/runtimes/flutter/faq"},{"title":"Flutter API Reference","sidebarTitle":"API Reference","href":"/runtimes/flutter/api-reference"}]},{"group":"Apple","pages":[{"title":"Apple","href":"/runtimes/apple/apple"},{"title":"GPU Canvas","href":"/runtimes/apple/gpu-canvas"},{"title":"FAQ","href":"/runtimes/apple/faq"},{"title":"Resource Usage","href":"/runtimes/apple/resource-usage"},{"title":"Artboards","href":"/runtimes/apple/artboards"},{"title":"Layout","href":"/runtimes/apple/layouts"},{"title":"State Machine Playback","href":"/runtimes/apple/state-machines"},{"title":"Data Binding","href":"/runtimes/apple/data-binding"},{"title":"Loading Assets","href":"/runtimes/apple/loading-assets"},{"title":"Fonts","href":"/runtimes/apple/fonts"},{"title":"Caching a Rive File","href":"/runtimes/apple/caching-a-rive-file"},{"title":"Semantics","href":"/runtimes/apple/semantics"},{"title":"Playing Audio","href":"/runtimes/apple/playing-audio"},{"title":"Logging","href":"/runtimes/apple/logging"},{"group":"Legacy Features","pages":[{"title":"Animation Playback","href":"/runtimes/apple/animation-playback"},{"title":"Inputs","href":"/runtimes/apple/inputs"},{"title":"Text","href":"/runtimes/apple/text"},{"title":"Rive Events","href":"/runtimes/apple/rive-events"}]},{"title":"Migration Guides","href":"/runtimes/apple/migration-guides"},{"title":"Migrating from the Legacy Rive Apple Runtime","sidebarTitle":"Migrating from Legacy","href":"/runtimes/apple/migrating-from-legacy"}]},{"group":"Android","pages":[{"title":"Android","href":"/runtimes/android/android"},{"title":"Artboards","href":"/runtimes/android/artboards"},{"title":"Layout","href":"/runtimes/android/layouts"},{"title":"State Machine Playback","href":"/runtimes/android/state-machines"},{"title":"Data Binding","href":"/runtimes/android/data-binding"},{"title":"Loading Assets","href":"/runtimes/android/loading-assets"},{"title":"Fonts","href":"/runtimes/android/fonts"},{"title":"Caching a Rive File","href":"/runtimes/android/caching-a-rive-file"},{"title":"Playing Audio","href":"/runtimes/android/playing-audio"},{"title":"Logging","href":"/runtimes/android/logging"},{"title":"Rendering to a Bitmap","href":"/runtimes/android/rendering-to-a-bitmap"},{"group":"Legacy Features","pages":[{"title":"Getting Started (Legacy API)","href":"/runtimes/android/legacy-getting-started"},{"title":"Animation Playback","href":"/runtimes/android/animation-playback"},{"title":"Inputs","href":"/runtimes/android/inputs"},{"title":"Text","href":"/runtimes/android/text"},{"title":"Rive Events","href":"/runtimes/android/rive-events"}]},{"title":"Migrating from the Legacy Rive Android Runtime","sidebarTitle":"Migrating from Legacy","href":"/runtimes/android/migrating-from-legacy"},{"title":"API Reference","url":"https://api-docs.rive.app/android/latest/","href":"/runtimes/android/api-reference"}]},{"group":"Unity","pages":[{"title":"Unity","href":"/game-runtimes/unity/unity"},{"title":"Getting Started","href":"/game-runtimes/unity/getting-started"},{"title":"Fundamentals","href":"/game-runtimes/unity/fundamentals"},{"title":"Components","href":"/game-runtimes/unity/components"},{"title":"Best Practices","href":"/game-runtimes/unity/best-practices"},{"title":"Layouts","href":"/game-runtimes/unity/layouts"},{"title":"Listeners","href":"/game-runtimes/unity/listeners"},{"title":"State Machines","href":"/game-runtimes/unity/state-machines"},{"title":"Data Binding","href":"/game-runtimes/unity/data-binding"},{"title":"Loading Assets","href":"/game-runtimes/unity/loading-assets"},{"title":"Audio","href":"/game-runtimes/unity/audio"},{"group":"Tutorials","pages":[{"title":"Control a health bar with data binding in Unity","href":"/game-runtimes/unity/tutorials/health-bar"}]},{"title":"Procedural Rendering","href":"/game-runtimes/unity/procedural-rendering"},{"title":"Runtime Asset Swapping","href":"/game-runtimes/unity/runtime-asset-swapping"},{"title":"FAQ","href":"/game-runtimes/unity/faq"},{"group":"Legacy Features","pages":[{"title":"Inputs","href":"/game-runtimes/unity/inputs"},{"title":"Text","href":"/game-runtimes/unity/text"},{"title":"Rive Events","href":"/game-runtimes/unity/rive-events"}]}]},{"group":"Unreal","pages":[{"title":"Unreal Engine","href":"/game-runtimes/unreal/unreal"},{"title":"Getting Started","href":"/game-runtimes/unreal/getting-started"},{"title":"Observing ViewModel Changes","href":"/game-runtimes/unreal/observing-viewmodel-changes"},{"title":"Using Triggers","href":"/game-runtimes/unreal/using-triggers"},{"title":"Runtime Asset Swapping","href":"/game-runtimes/unreal/runtime-asset-swapping"},{"title":"World-Space RenderTargets","href":"/game-runtimes/unreal/in-world-textures"}]},{"group":"C++","pages":[{"title":"C++ Runtime","sidebarTitle":"Overview","href":"/runtimes/cpp/overview"},{"title":"Getting Started","href":"/runtimes/cpp/getting-started"},{"title":"File \u0026 Artboard","href":"/runtimes/cpp/file-and-artboard"},{"title":"State Machines","href":"/runtimes/cpp/state-machines"},{"title":"Data Binding","href":"/runtimes/cpp/data-binding"},{"title":"Asset Loading","href":"/runtimes/cpp/asset-loading"},{"title":"Rendering Loop","href":"/runtimes/cpp/rendering-loop"},{"title":"Command Queue","href":"/runtimes/cpp/command-queue"},{"title":"Renderers","href":"/runtimes/cpp/renderers"},{"title":"External Renderer","href":"/runtimes/cpp/external-renderer"}]},{"title":"Defold","href":"/game-runtimes/defold"},{"group":"Community Runtimes","pages":[{"title":"Angular","href":"/runtimes/community-runtimes/angular"},{"title":"C#","href":"/runtimes/community-runtimes/c-sharp"},{"title":"Qt / QtQuick","href":"/runtimes/community-runtimes/qt-quick"},{"title":"RiveCMP","href":"/runtimes/community-runtimes/rive-cmp"}]}]},{"group":"Integrations","pages":[{"title":"3rd Party Integrations","href":"/integrations/overview"},{"title":"HTML Embed","href":"/integrations/html-embed"}]}]},{"tab":"CLI","pages":[{"title":"CLI","href":"/cli/overview"}]},{"tab":" ","pages":[{"title":" ","href":"/tutorials/learn-rive"}]},{"tab":" ","pages":[{"title":" ","href":"/community/support"}]}]},"basePath":"","title":"Playing Audio - Rive","buildId":"dpl_Acry4NrQAgjcikyFgVE2eJ7XQCAv","deploymentId":"dpl_Acry4NrQAgjcikyFgVE2eJ7XQCAv","dynamics":[],"chunks":[]}