Search code examples
javascriptiosiphonehtmlsafari

Play two audio files simultaneously in iOS Safari

In Javascript, I have come across a situation where I need to play two audios simultaneously in iOS Safari. One audio is the Voice script whereas other one is the Background sound(playing in loop). I've used the following code to achieve this.

var audio = new Audio();  
audio.src = "voice.mp3";  
audio.type = "audio/mp3";  
audio.play();  

var bg_audio = new Audio();  
bg_audio.src = "background.mp3";  
bg_audio.type = "audio/mp3";  
bg_audio.loop = true;  
bg_audio.play();

However, this is creating an issue In iOS Control Center (Lock Screen). Because sometimes it shows progress bar of voice player and sometimes it shows the controls for background player. I want to show controls for voice player only. Is there any workaround?

P.S. I've being searching for answer everywhere even posted on Apple's Developer Forum but didn't get any response.

Thanks!

Solution

  • In iOS Safari only 1 channel of audio can play at a time, so no layering or overlapping of sounds.

    You need to use web Audio API instead.

    This article may be helpful - web audio on iOS