audio fades in and out on mobile chrome with SpeechSynthesis and howler js - text-to-speech

Question

For our application, we're using Web Speech API to play TTS and howler.js to play music exercises. It seems like whenever TTS is active, howler volume gets reduced and gradually increases as time goes on (live demo: https://www.besteartraining.com/learn/1/3/5/course) (Note: test on mobile chrome with headphones). Any help will be greatly appreciated.
//Howler.js initialization
sound = new Howl({
src: [`/assets/audio/${getSoundData().name}.mp3`],
volume: 1.0,
onload() {
const lengthOfNote = getSoundData().length;
let timeIndex = 0;
for (let i = 24; i <= 96; i++) {
sound["_sprite"][i] = [timeIndex, lengthOfNote];
timeIndex += lengthOfNote;
}
setHasInited(true);
},
onloaderror(e: any, msg: any) {
console.log("Error", e, msg);
setHasInited(true);
},
});
//Web Speech API initialization
const speech = new SpeechSynthesisUtterance();
speech.lang = "en-US";
speech.volume = 0.35;
speech.rate = 1;
speech.pitch = 1;
speech.text = "C major" //This is just an example.
speech.onend = function () {
playMidiArray(chordMidiArray); //chordMidiArray = [36, 40, 43] = ["C1", "E1", "G1"]
};
function playMidiArray(midis: any) {
midis.forEach((noteMidiNumber: any) => {
sound.play(noteMidiNumber.toString());
});
}
window.speechSynthesis.speak(speech);
Expected result:
Says the name "C major"(volume:0.35) => plays music exercises (volume:1.0)
Actual result:
Says the name "C major"(volume:0.35) => plays music exercises (volume:0.35 -> 1.0)
List of things that I have tried:
set speech.volume to 1 when TTS is finished playing
set sound.volume to 1 before and after sound.play()
remove speechSynthesis instance (window.speechSynthesis.cancel()) before sound.play() is called