Bug 244667
| Summary: | Volume of an Audio object cannot be changed when AudioContext is created | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | aerdogan07 |
| Component: | Web Audio | Assignee: | 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 | ||
aerdogan07
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>
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Radar WebKit Bug Importer
<rdar://problem/99697508>
Eric Carlson
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
aerdogan07
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.