Unity WebGL project, how to set the pitch value using the Web Audio API?

Unity Engine
, , ,
1

Our WebGL project has many timelines, each with several audio clips that support double speed playback.

1 weggl question project
1 weggl question project769×501 36.8 KB

When playing at double speed, the tone becomes strange.

In the editor, set mixer and setting pitch successfully solved the problem.

aud.outputAudioMixerGroup.audioMixer.SetFloat("PitchShifter_Pitch", fValue);

However, WebGL does not support this command:

3 webgl audio not support
3 webgl audio not support801×239 26.6 KB

Then I turn to Web Audio API for help.

Web Audio API is new for me, after researching it for a few days, but still haven’t solved the problem.

Web Audio API mentioned that audio can be obtained from HTML tags, but WebGL does not have such tags. How can I obtain the playing audio and set pitch?

const track = audioContext.createMediaElementSource(audioElement);

4 weggl no audio tag
4 weggl no audio tag1399×865 167 KB

What I expect is something like this (execute in unity jslib plugin):

audioCtx= new AudioContext();

audioSource= unityInstance.currentPlayingAudio;

processNode= soundEffectNode;

processNode.pitch=0.5f;

processNode.connect(audiotex.destination);

This is sample unity project showing the problem:
WebAudioQuestion.zip (4.6 MB)

2

I’ve uploaded a video, showing what’s working in Editor, but not working in webGL build:

3

Hi!

Like the document states changing the pitch is unfortunately not supported on the Web Platform.
If you want to use the WebAudio API directly you could do it if you write a JavaScript plugin. But that means you can’t use any of the Unity audio features and would need to build your own Audio System and handle sound files manually(e.g. store them in StreamingAssets).

4

Thank you.

I was trying JavaScript plugin

Since we have hundreds of audio clips, I wonder if there is an approach by which, I can handle a general sound output once and for all,

Like:

audioContext = new AudioContext();

audioSource= getPlayingAudioFromMemory();//pseudo code //this line is my question

gainNode= audioContext.createGain();

audioSource.connect(gainNode).connect(audioContext.destination);

I just don’t know how to get audio from Unity WebGL instance.

5

There is no easy way to access the sound clips from the JavaScript side. You could use Unity - Scripting API: AudioClip.GetData to read the data from C# and pass it to your JS plugin. This might be slightly inefficient but you can use the existing handling of audio assets.

The alternative would be to move all your sound files into a StreamingAssets folder in your project and use them like this:

function createAudioNodeForStreamingAsset(fileName, pitch) {
   let mediaElement = new Audio();
   mediaElement.preload = "metadata";
   mediaElement.src = "/StreamingAssets/" + fileName;

   let source = audioContext.createMediaElementSource(mediaElement);

   // Change pitch
   mediaElement.playbackRate = pitch;
   
  return source;
}

let audioContext = new AudioContext();
let audioSource = createAudioNodeForStreamingAsset(fileName, pitch);
let gainNode= audioContext.createGain();
audioSource.connect(gainNode).connect(audioContext.destination);

// This will return a promise and might fail if there was no user interaction with the website
// You might want to retry on the next "click" event
audioSource.mediaElement.play()
6

Thank you for your help.
The two approaches are very clear and reasonable, I will try them out

7

Switch to streaming assets, automatically solved the problem.
In webGL build timeline, when timescale = 2, streaming wav files won’t be affected, simply set playback rate = 2, get a natural result (no tone change)

–for any one who have similar problem