# Have trouble using Web Audio in the BabylonJS framework

**URL:** <https://forum.babylonjs.com/t/have-trouble-using-web-audio-in-the-babylonjs-framework/10068>\
**Category:** Questions\
**Created:** [April 16, 2020, 9:49pm UTC](https://forum.babylonjs.com/t/have-trouble-using-web-audio-in-the-babylonjs-framework/10068 "2020-04-16T21:49:19Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![FBa](https://avatars.discourse-cdn.com/v4/letter/f/f4b2a3/32.png) [@FBa](https://forum.babylonjs.com/u/FBa)\
**Post date:** [April 16, 2020, 9:49pm UTC](https://forum.babylonjs.com/t/have-trouble-using-web-audio-in-the-babylonjs-framework/10068/1 "2020-04-16T21:49:20Z")

</div>

I have an app here that uses WebAudioFont with the BabylonJS framework … The mobile and tablet devices won’t play sound. Desktop / Laptop plays fine. I remember this is an issue with Web Audio and SpeechSynthesis API in general.

What line of code would I need to add (perhaps a simple tap) to make the other devices play sound? It has to be a user-generated interaction which I already have in my BabylonJS app.

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [April 16, 2020, 9:58pm UTC](https://forum.babylonjs.com/t/have-trouble-using-web-audio-in-the-babylonjs-framework/10068/2 "2020-04-16T21:58:44Z")

</div>

It looks like the problem is in WebAudioFont and not Babylon here ? You could try to check with them as I am not sure a lot of ppl here are familiar with this framework.

In general you need to call resume on the audioContext from a user interaction like a click for instance.

---

<div class="post-metadata">

**Author:** ![JCPalmer](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jcpalmer/32/42_2.png) [@JCPalmer](https://forum.babylonjs.com/u/JCPalmer)\
**Post date:** [April 17, 2020, 1:56pm UTC](https://forum.babylonjs.com/t/have-trouble-using-web-audio-in-the-babylonjs-framework/10068/3 "2020-04-17T13:56:45Z")

</div>

I tried this from my iPad. I got the usual little Icon to un-mute. This just the way it is for mobile.

---

<div class="post-metadata">

**Author:** ![FBa](https://avatars.discourse-cdn.com/v4/letter/f/f4b2a3/32.png) [@FBa](https://forum.babylonjs.com/u/FBa)\
**Post date:** [April 17, 2020, 3:56pm UTC](https://forum.babylonjs.com/t/have-trouble-using-web-audio-in-the-babylonjs-framework/10068/4 "2020-04-17T15:56:02Z")

</div>

I got the little icon to un-mute too, that’s for BabylonJS Sound. However, when you click Drop/Stop the Needle, can you hear any music (through WebAudioFont?)

I’m using hybrid here…So only BabylonJS Sound comes through, not WebAudio (through Drop/Stop the Needle Button)

---

<div class="post-metadata">

**Author:** ![FBa](https://avatars.discourse-cdn.com/v4/letter/f/f4b2a3/32.png) [@FBa](https://forum.babylonjs.com/u/FBa)\
**Post date:** [April 17, 2020, 3:56pm UTC](https://forum.babylonjs.com/t/have-trouble-using-web-audio-in-the-babylonjs-framework/10068/5 "2020-04-17T15:56:29Z")

</div>

well, I’m sticking with all BabylonJS Sound at the moment, and it seems to work! [www.findbach.com/4d](http://www.findbach.com/4d)

---

<div class="post-metadata">

**Author:** ![JCPalmer](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jcpalmer/32/42_2.png) [@JCPalmer](https://forum.babylonjs.com/u/JCPalmer)\
**Post date:** [April 17, 2020, 4:02pm UTC](https://forum.babylonjs.com/t/have-trouble-using-web-audio-in-the-babylonjs-framework/10068/6 "2020-04-17T16:02:09Z")

</div>

I only did the individual keys, but if as @sebavan said, that button works on a context basis. You can just use BJS’s context, instead of instancing your own.

```javascript
let audioContext = BABYLON.Engine.audioEngine.audioContext;

```

---

<div class="post-metadata">

**Author:** ![FBa](https://avatars.discourse-cdn.com/v4/letter/f/f4b2a3/32.png) [@FBa](https://forum.babylonjs.com/u/FBa)\
**Post date:** [April 17, 2020, 8:57pm UTC](https://forum.babylonjs.com/t/have-trouble-using-web-audio-in-the-babylonjs-framework/10068/7 "2020-04-17T20:57:32Z")

</div>

I think that did the trick. Thanks!

---

<div class="post-metadata">

**Author:** ![FBa](https://avatars.discourse-cdn.com/v4/letter/f/f4b2a3/32.png) [@FBa](https://forum.babylonjs.com/u/FBa)\
**Post date:** [April 18, 2020, 12:32am UTC](https://forum.babylonjs.com/t/have-trouble-using-web-audio-in-the-babylonjs-framework/10068/8 "2020-04-18T00:32:22Z")

</div>

Thanks for everyone who helped out. The verdict is in: I’m keeping BabylonJS to handle all the sounds for now. The quality of the WebAudioFont is just too far away from the sounds I’m intending to use. And it did manage to stop the sounds here. The trick was to make an array of timeout, and then clear each timeout upon stop.

> **[4D Piano | Findbach](https://www.findbach.com/4d)**
>
> Play 4D Piano Today!

---

<div class="post-metadata">

**Author:** ![surikov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/surikov/32/8463_2.png) [@surikov](https://forum.babylonjs.com/u/surikov)\
**Post date:** [May 14, 2020, 4:33pm UTC](https://forum.babylonjs.com/t/have-trouble-using-web-audio-in-the-babylonjs-framework/10068/9 "2020-05-14T16:33:32Z")

</div>

See this

> <https://github.com/surikov/webaudiofont/issues/50>
>
> \*\*Describe the bug\*\*
> I'm using webaudiofont on my website to generate audio as …a "pitch pipe". When a user presses the "pitch pipe" button, it plays four notes consecutively: The first note of the bass, tenor, alto, and soprano parts of a song. This works on Safari, Chrome, and Firefox on macOS, but doesn't work on Safari on iOS.
> 
> \*\*To Reproduce\*\*
> Steps to reproduce the behavior:
> 1. On an iOS device, go to a page with a pitch pipe button: https://singpraises.net/collections/en/hymns/the-morning-breaks/presentation-lyrics?audiotype=pp
> 2. Tap where it says "Pitch pipe ▶".
> 
> \*\*Expected behavior\*\*
> Audio should play four consecutive notes.
> 
> \*\*Smartphone (please complete the following information):\*\*
> - Device: iPhone 11 Pro
> - OS: iOS 13.3
> - Browser: Safari
> - Version: (13.3)
> 
> \*\*Additional context\*\*
> This is my first time using webaudiofont, so it's possible I'm doing something wrong – however, my setup is simple and it seems to work on other platforms (just not on iOS).
> 
> The pitch pipe button has an \`onclick\` attribute, which calls \`playPitchPipe(\['C3', 'C4', 'E4', 'G4'\]);\`:
> \`\`\`
> \<button id="options-button" class="icon-button" onclick="playPitchPipe(\['C3', 'C4', 'E4', 'G4'\]);"\>Pitch pipe \<i class="fa fa-play-circle"\>\</i\>\</button\>
> \`\`\`
> 
> I'm loading webaudiofont and a sound font like this:
> \`\`\`
> \<script src="https://surikov.github.io/webaudiofont/npm/dist/WebAudioFontPlayer.js"\>\</script\>
> \<script src="https://surikov.github.io/webaudiofontdata/sound/0000\_Chaos\_sf2\_file.js"\>\</script\>
> \`\`\`
> 
> And this is my JavaScript:
> \`\`\`
> var AudioContextFunc = window.AudioContext || window.webkitAudioContext;
> var audioContext = new AudioContextFunc();
> var player = new WebAudioFontPlayer();
> player.loader.decodeAfterLoading(audioContext, '\_tone\_0000\_Chaos\_sf2\_file');
> function playPitchPipe(pitches) {
> for (var p = 0; p \< pitches.length; p++) {
> player.queueWaveTable(audioContext, audioContext.destination, \_tone\_0000\_Chaos\_sf2\_file, audioContext.currentTime + (0.75 \* p), convertToMidi(pitches\[p\]), 2);
> }
> }
> \`\`\`

> iPhone has trigger at the side. Try to switch it. This trigger mutes speaker for Web Audio API sounds but other sounds (audio from Youtube for example) works despite the trigger state. Also Web Audio still plays via earphones.

This is very strange behaviour of iPhone.