Instantly share code, notes, and snippets.
kus / fixIOSAudioContext.js
- Download ZIP
- Star ( 40 ) 40 You must be signed in to star a gist
- Fork ( 4 ) 4 You must be signed in to fork a gist
- Embed Embed this gist in your website.
- Share Copy sharable link for this gist.
- Clone via HTTPS Clone using the web URL.
- Learn more about clone URLs
- Save kus/3f01d60569eeadefe3a1 to your computer and use it in GitHub Desktop.
RobertSwirsky commented Nov 3, 2016 • edited Loading
I just tried this, copying your example exactly, except for putting my own sample audio file, and it doesn't work on iPad an iPhone. No errors, and the server did serve the audio file to the application. Works fine as-is on desktop Safari and Chrome; doesn't play anything on firefox.
I refresh and pressed the screen within 3 seconds. I tried adding a button just to have something to press, and that didn't help.
Did Apple change something recently?
I put it up here so you can see for yourself:
http://side.band/audio
Sorry, something went wrong.
frixo3190 commented Dec 13, 2018
me too, nothing work on iphone, but work on mac, and pc and android
1312543912 commented Nov 21, 2019
me too.........mac safari and ios safari not work
kuboon commented Nov 24, 2021
just resume like this:
alexandrebaux commented Jun 16, 2022
Works like a charm!
alexcraviotto commented Feb 15, 2024
Did you fix that? I'm dealing with this exactly
Alex-Li2018 commented Mar 27, 2024
Kuboon commented mar 27, 2024 • edited loading.
@alexcraviotto @Alex-Li2018 Did you try my solution?
- Unlock JavaScript Web Audio in Safari and Chrome
Update: This is now necessary for Chrome, too. You might see this message in the console:
It can be tricky to deal with Web Audio because browser vendors have measures in place to protect users from undesired sound playback. In short, user interaction is required to unlock the AudioContext.
Sanity check: make sure your device is unmuted - I know at least Safari iOS will prevent Web Audio playback if the ringer is set to vibrate.
Here's some small boilerplate code to add the necessary hooks. This is written in ES6 JavaScript, and will work in Safari (iOS and macOS) and Chrome:
Call the function immediately after creating the audio context, like this:
Here's something very similar in ES5:
9 Responses Leave a Reply
Digbalay Bose
Thanks for the code Matt ! The code worked for safari from macbooks but when I tried it from safari in iphone and ipad, i could not hear any sound.
James Moore
Thanks. Finally something that worked for me. The only problem I have now is that I have to click the button twice or second click outside the button to hear the audio. After 4 times or so, it just stops working and I have to refresh the browser to get it to work again. Very frustrating!
Hello How can i add this function in an angular 8 application thank you in advance
Erik Hermansen
Great little article. It got me past the gesture-unlocking problem I had on Safari. Thanks!
To James Moore or whoever else comes along, I've read that Safari allows just 4 open AudioContext instances for a web page. Maybe that matches the "after 4 times or so, it just stops working". Reusing a single AudioContext instance seems like a good practice in any case.
The key insight that helped me was discovering that upon user interaction that AudioContext.resume() needed to be called. The comments here also helped me realize a single AudioContext could be unlocked once and reused for as many different audio streams as needed.
Thank you very much for sharing this!
I believe in the ES6 formula, "context.state" should be "audioCtx.state"
Eric : I believe in the ES6 formula, "context.state" should be "audioCtx.state"
Thanks! Fixed.
Thanks a lot! Fixed one condition!!
Sir. Dude. Bro. This totally rocks. Thank you so much. ??
Leave a Reply
Click here to cancel reply.
- BIGCITY.MID
- Unlocking the Yamaha DSR-2000
- Fixing messed up VGM tracks from Shining Force
- MEGAfm Teardown
- Hotkeys in Chip Player JS
- Chip Player JS
- Flat-Shaded Polygon 3D Games
- NES APU Note Table
- An Update on UMG Watermarks
- How to type emoji in one keystroke on a Mac
- A Phase-Aligned Oscilloscope for Web Audio
- Yamaha DX7 and MIDI in JavaScript
- Thoughts on Rdio UX
- Watermark Listening Test Results
- Enable Mac Volume Control for HDMI and DisplayPort Audio Devices
- Generate Mac App Icons Photoshop Action
- Making Sausage: Fixing a Previous Git Commit
- Shuffle Algorithms for Music
- Subpixel Letter-Spacing in Webkit
- Avoid Faux-Bold with Web Fonts
- Converting to Retina
- Google Analytics for Backbone Apps
- Chat for the Workplace
- Double-Click-Through
- Music Streaming Snapshot
- Universal's Audible Watermark
- WFS Paper Presented at AES 131
- Mac OS X Speech Synthesis Markup
- Gaze-Enhanced HDR Viewing
- OpenCV 2.1 and 2.3 with Visual Studio 2010 Quick Start
- Google Latitude is Cool
- Music Smasher: Streaming Music API Mashup
- Weird Spotify Compression Artifacts
- Exact MP3 Recompression
- Multi-Touch for Musical Applications
- Speech Gender Conversion
- Voice to NES Music Converter
- WFS Designer Preview
- Human Birdwings Hoax
- Display-Aided Head Tracking
- Wave field synthesis graphical simulation
- Wave field synthesis build progress
- Pandora and Flash Player
- Wave field synthesis first speaker module
- Wave field synthesis array plans
- What’s Wrong with the University of Miami IT Policy
- Research Topics
- PADsynth in MATLAB
- Loudspeaker Array Simulation
- A note to Digsby developers: Fix file transfers
- Wave Field Synthesis speakers
- 4D Wave Field Synthesis
- Hacking Picasa Web Album URLs
- How to Fix: DVI or VGA cable doesn't work
- How to Fix: Buttons don't work on Blackberry Curve
- Stractor Final Presentation
- Parallax Starfield HTML+CSS Effect
- Binauralization
- Sound Auralization
- PostgreSQL + PostGIS 1.5
- Location Based Services Survey
- Fill In The Blanks
- Preparing the Playstation Eye for Multitouch
- Multitouch Air Hockey in Processing
- DG Centenary Collection
- Protected: Global Warming
- Carol Montag
- Eric Humphrey
- Jeff Dlouhy
- Patrick Montag
This page requires JavaScript.
Please turn on JavaScript in your browser and refresh the page to view its content.
- Skip to main content
- Select language
- Skip to search
- AudioContext
Event handlers
The AudioContext interface represents an audio-processing graph built from audio modules linked together, each represented by an or <video> element, an OscillatorNode, etc.), the audio destination, intermediate processing module (e.g. a filter like BiquadFilterNode or ConvolverNode), or volume control (like GainNode)." href="AudioNode.html"> AudioNode . An audio context controls both the creation of the nodes it contains and the execution of the audio processing, or decoding. You need to create an AudioContext before you do anything else, as everything happens inside a context.
An AudioContext can be a target of events, therefore it implements the EventTarget interface.
Constructor
Also implements methods from the interface EventTarget .
Obsolete methods
Basic audio context declaration:
Cross browser variant:
Specifications
Browser compatibility.
- Using the Web Audio API
- OfflineAudioContext
Constructor
Specifications, browser compatibility.
The AudioContext interface represents an audio-processing graph built from audio modules linked together, each represented by an AudioNode . An audio context controls both the creation of the nodes it contains and the execution of the audio processing, or decoding. You need to create an AudioContext before you do anything else, as everything happens inside a context.
Also inherits properties from its parent interface, BaseAudioContext .
Also inherits methods from its parent interface, BaseAudioContext .
Basic audio context declaration:
Cross browser variant:
- Using the Web Audio API
- OfflineAudioContext
Document Tags and Contributors
- Web Audio API
- AudioContext()
- baseLatency
- outputLatency
- createJavaScriptNode()
- createMediaElementSource()
- createMediaStreamDestination()
- createMediaStreamSource()
- createMediaStreamTrackSource()
- createWaveTable()
- getOutputTimestamp()
- EventTarget
- AnalyserNode
- AudioBuffer
- AudioBufferSourceNode
- AudioContextOptions
- AudioDestinationNode
- AudioListener
- AudioNodeOptions
- AudioProcessingEvent
- AudioScheduledSourceNode
- BaseAudioContext
- BiquadFilterNode
- ChannelMergerNode
- ChannelSplitterNode
- ConstantSourceNode
- ConvolverNode
- DynamicsCompressorNode
- IIRFilterNode
- MediaElementAudioSourceNode
- MediaStreamAudioDestinationNode
- MediaStreamAudioSourceNode
- OfflineAudioCompletionEvent
- OscillatorNode
- PeriodicWave
- StereoPannerNode
- WaveShaperNode
Learn the best of web development
Get the latest and greatest from MDN delivered straight to your inbox.
Thanks! Please check your inbox to confirm your subscription.
If you haven’t previously confirmed a subscription to a Mozilla-related newsletter you may have to do so. Please check your inbox or your spam filter for an email from us.
IMAGES
VIDEO
COMMENTS
I'm running into an issue where calling resume on an AudioContext never resolves when attempting to play audio in Safari. I'm creating an AudioContext on page load, thus it starts in a suspended state.. According to this chromium issue, calling resume will not resolve if blocked by the browser's autoplay policy. I have a click event bound to a <button> that will resume the context if it's ...
await audiocontext.resume(); console.log(audiocontext); For some reason to have compatibility you need to not only be inside an async clicked on function but also console log the audio context after resuming it. With Safari 15.1 it seems it can be in a state where it is "running" but not really if you do not do these two things.
I have a website which starts an audiocontext. This site works with all browsers on laptops, and works on Android l. However, for IOS devices the audiocontext seems to be stuck on the "interrupted" state. Running AudioContext.resume() on user input does not seem to change the state of the context.
Returning to the app tab does not resume audio ... sometimes. It doesn't seem consistent for some reason. ... audioContext.resume();}}, 500); ... Perhaps it behaves differently than running in Safari browser. The only work-around I could figure was to of redo the unlock event handlers that Phaser 3 does initially and showing them an alert to ...
That's where Safari differed from other browsers: it looks like, in Safari, a click on a JS generated button does not resume the AudioContext, but other browsers do allow that. One workaround I've found that should work in all browser is to have a button hard-coded in your HTML, and call jsPsych.init() in the callback of that button...
The following snippet is taken from our AudioContext states demo (see it running live.)When the suspend/resume button is clicked, the AudioContext.state is queried — if it is running, suspend() is called; if it is suspended, resume() is called. In each case, the text label of the button is updated as appropriate once the promise resolves.
Fix iOS AudioContext on Safari not playing any audio. It needs to be "warmed up" from a user interaction, then you can play audio with it as normal throughout the rest of the life cycle of the page. - fixIOSAudioContext.js
It got me past the gesture-unlocking problem I had on Safari. Thanks! To James Moore or whoever else comes along, I've read that Safari allows just 4 open AudioContext instances for a web page. Maybe that matches the "after 4 times or so, it just stops working". Reusing a single AudioContext instance seems like a good practice in any case.
622 items were found. Tab back to navigate through them. WebKit JS. Class. AudioContext. Safari Desktop 10.0+ Safari Mobile 9.0+. interface AudioContext. Topics. Instance Properties.
The AudioContext interface represents an audio-processing graph built from audio modules linked together, each represented by an AudioNode. An audio context controls both the creation of the nodes it contains and the execution of the audio processing, or decoding. You need to create an AudioContext before you do anything else, as everything ...
The following snippet is taken from our AudioContext states demo (see it running live.) When the suspend/resume button is clicked, the AudioContext.state is queried — if it is running, suspend() is called; if it is suspended, resume() is called. In each case, the text label of the button is updated as appropriate once the promise resolves.
A new property on the document allows knowing whether or not an AudioContext will be "allowed to start". Details here. A proper spec with more details with cover all this, to be written. Starting an AudioScheduledSource can now resume an AudioContext . AudioContext.resume() can also resume it. I'm closing this, in light of the above.
General containers and definitions that shape audio graphs in Web Audio API usage. AudioContext. The AudioContext interface represents an audio-processing graph built from audio modules linked together, each represented by an AudioNode.An audio context controls the creation of the nodes it contains and the execution of the audio processing, or decoding.
The audioContext is muted by safari, and is only unmuted when a user gesture happens. But you must also create the audioContext when the user event happens, and try to play a sound so safari unmutes. ... The Safari issue has been resolved, but testing on the iPhone doesn't seem to work well.. Not sure if this is a localhost issue or bug in code ...
The AudioContext interface represents an audio-processing graph built from audio modules linked together, each represented by an AudioNode.An audio context controls both the creation of the nodes it contains and the execution of the audio processing, or decoding. You need to create an AudioContext before you do anything else, as everything happens inside a context.
There are two ways you can create nodes with the Web Audio API. You can use the factory method on the context itself (e.g. audioContext.createGain()) or via a constructor of the node (e.g. new GainNode()). We'll use the factory method in our code: js. const gainNode = audioContext.createGain();
The AudioContext interface represents an audio-processing graph built from audio modules linked together, each represented by an AudioNode. An audio context controls both the creation of the nodes it contains and the execution of the audio processing, or decoding. You need to create an AudioContext before you do anything else, as everything ...
If the sampleRate property is not included in the options, or the options are not specified when creating the audio context, the new context's output device's preferred sample rate is used by default. sinkId Optional Experimental. Specifies the sink ID of the audio output device to use for the AudioContext. This can take one of the following ...
1. There is indeed a bug in Safari which causes it to drop the signal if a MediaStreamAudioSourceNode is disconnected for some time. You can avoid this by just not disconnecting it as long as you might need it again. You can use a GainNode instead to mute the signal.