Reproduction Steps: - Create an audio object - Create AudioContext with createMediaElementSource for the audio object before it's played - Play the audio - Adjust the audio's volume programmatically Expected: The level of volume changes accordingly. Observed: The level of volume doesn't change. Demo: https://codesandbox.io/s/ecstatic-tom-8tz5em Code to reproduce the issue: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Static Template</title> </head> <body> <button id="audio-control">Play Audio</button> </body> <script type="application/javascript"> const audio = new Audio( "https://upload.wikimedia.org/wikipedia/commons/b/bb/Test_ogg_mp3_48kbps.wav" ); audio.crossOrigin = "anonymous"; audio.loop = true; audio.volume = 0.5; const audioContext = new AudioContext(); const button = document.querySelector("#audio-control"); button.addEventListener("click", () => { if (audio.paused) { button.innerText = "Change Volume Level"; const audioSource = audioContext.createMediaElementSource(audio); const audioDestination = audioContext.createMediaStreamDestination(); audioSource.connect(audioContext.destination); audioSource.connect(audioDestination); audio.play(); return; } let newVolumeLevel = audio.volume + 0.5; if (newVolumeLevel > 1) { newVolumeLevel = 0; } audio.volume = newVolumeLevel; }); </script> </html>
<rdar://problem/99697508>
A user gesture is required to change volume. Your code should should work if you move the part that changes volume inside of the `click` event handler
The volume is changed within the click event handler. It also works when there is no AudioContext. The same code also works with all other major browsers (Firefox, Chrome etc.) Therefore, I will reopen the ticket.