Bug 244667

Summary: Volume of an Audio object cannot be changed when AudioContext is created
Product: WebKit Reporter: aerdogan07
Component: Web AudioAssignee: Nobody <webkit-unassigned>
Status: REOPENED ---    
Severity: Major CC: cdumez, eric.carlson, jer.noble, juraj.masiar, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: Safari 15   
Hardware: Mac (Apple Silicon)   
OS: macOS 12   

Description aerdogan07 2022-09-01 07:36:19 PDT 
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>
Comment 1 Radar WebKit Bug Importer 2022-09-08 07:37:15 PDT 
<rdar://problem/99697508>
Comment 2 Eric Carlson 2022-09-16 09:40:21 PDT 
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
Comment 3 aerdogan07 2022-09-19 00:41:30 PDT 
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.