Trouble getting web audio to work

Help & Support
1

I am trying to load some audio into Playcanvas from an mp3 file on Hygraph CMS. I have the URL for the file, so I have been trying a function like this:

ContentLoader.prototype.loadAudioFromURL = async function(slot) {
    this.app.assets.loadFromUrl("https://media.graphassets.com/hUKbpBVTvCfhWOXi3eRC", 'audio', function (error, asset) {
        if (error) {
            console.log(error);
            return;
        }
        slot.audio = asset.resource;
    }.bind(slot));
};

However, I get the following error:

Error loading audio url: hUKbpBVTvCfhWOXi3eRC: Audio format for hUKbpBVTvCfhWOXi3eRC not supported

Even though it is an mp3, I’m guessing that maybe because it doesn’t have ‘/mp3’ on the end it might be causing this issue?

So instead, I am trying to load it in using the Web Audio API, and I’m not getting errors with the following code, it’s just not actually playing so I don’t know if I’m missing something obvious here…

ContentLoader.prototype.loadAudio = async function() {
    this.context = this.app.systems.sound.context;
    this.audio = this.context.createGain();
    const resp = await fetch("https://media.graphassets.com/hUKbpBVTvCfhWOXi3eRC");
    const arrayBuffer = await resp.arrayBuffer();
    const audioBuffer = await this.context.decodeAudioData(arrayBuffer);
    const source = this.context.createBufferSource();

    source.loop = false;

    source.buffer = audioBuffer;
    source.connect(this.audio);
    source.start();
};

What am I doing wrong?

2

Our engine uses the extension of the filename to know if it’s supported or not

You would either need to add the extension of where you are hosting it or patch the engine to ignore https://playcanvas.com/project/995343/overview/f-web-audio

However, there is still an issue as the browser audio context can’t decode the response.

This could be related to it having no extension or how it’s being served by your server. Not sure yet.

3

Had a closer look at this and our HTTP loader in the engine guesses the response type based on the file extension.

Can’t think of a nice way to get around this without patch the engine more

4

I’ve made a patch to the engine that does this specific for URLs that come from https://media.graphassets.com/ here

https://playcanvas.com/project/995343/overview/f-web-audio

Unfortunately, I don’t have a better idea in the short term besides adding the MP3 extension to the URL/file on the server