Not able to load base64 sound assets on production

[talhaozdemir]

sound.add method works without any problem on localhost, but after I build the project I encounter with XMLHTTPREQUEST r.open is not a function error. I develop playable ads, I have to use base64 assets to produce single HTML files.

Is it possible to bypass XMLHTTPREQUEST when using base64 assets? maybe we can decode base64 data to arraybuffer manually.

[bigtimebuddy]

Why is your build replacing new XMLHttpRequest with new Object?

[talhaozdemir]

Because Facebook doesn't like the "XMLHttpRequest" string, so we replace it like that.

[bigtimebuddy]

In order to convert base64 string to an arraybuffer, you can do that without XMLHttpRequest. For instance: https://stackoverflow.com/a/21797381

The hacky solution is to override _loadUrl to have it just work.

A better option is to just pass the ArrayBuffer to the sound library:

import { sound } from '@pixi/sound';
import url from './mysound.mp3';

const arrayBuffer = base64toArrayBuffer(url);
sound.add('mysound', arrayBuffer);

[talhaozdemir]

Thanks for the example. I tried like the code above, asset is loaded but when I try to play sound I get error like

Here is my load function;

  loadSound(key, src, json, callback) {
    var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
    var lookup = typeof Uint8Array === 'undefined' ? [] : new Uint8Array(256);
    for (var i = 0; i < chars.length; i++) {
      lookup[chars.charCodeAt(i)] = i;
    }

    var decode = function (base64) {
      var bufferLength = base64.length * 0.75, len = base64.length, i, p = 0, encoded1, encoded2, encoded3, encoded4;
      if (base64[base64.length - 1] === '=') {
        bufferLength--;
        if (base64[base64.length - 2] === '=') {
          bufferLength--;
        }
      }
      var arraybuffer = new ArrayBuffer(bufferLength), bytes = new Uint8Array(arraybuffer);
      for (i = 0; i < len; i += 4) {
        encoded1 = lookup[base64.charCodeAt(i)];
        encoded2 = lookup[base64.charCodeAt(i + 1)];
        encoded3 = lookup[base64.charCodeAt(i + 2)];
        encoded4 = lookup[base64.charCodeAt(i + 3)];
        bytes[p++] = (encoded1 << 2) | (encoded2 >> 4);
        bytes[p++] = ((encoded2 & 15) << 4) | (encoded3 >> 2);
        bytes[p++] = ((encoded3 & 3) << 6) | (encoded4 & 63);
      }
      return arraybuffer;
    };

    const arrayBuffer = decode(src);
    sound.add(key, arrayBuffer);
    console.log(arrayBuffer);
    sound._sounds[key].addSprites(json.spritemap);
    console.log(sound._sounds[key]);
    callback();
  }

[talhaozdemir]

I don't know that it is important or not but when I console the arrayBuffer with delay, the byteLength of it is 0.

[bigtimebuddy]

This worked for me: https://codesandbox.io/s/pixijs-sound-base64-example-vj6xcj?file=/src/index.ts

[talhaozdemir]

After adding the line

const data = str.split(",").slice(1).join(",");

It is working for me too. Thank you so much.

[bigtimebuddy]

Yeah you need to chop off the mime type and just interpret the data. Glad it works!