MP3 Audio to WebGL?

Target Platforms Web
1

My webapp should be hosted on a website and it should receive an MP3 audio in runtime to then reproduce through the AudioSource.

Due to webgl limitation I cannot pass directly the mp3 audio to the unity app so the backend of the webstite converts the generated audio first into an array of bytes and then into a string to be able to be attached to a SendMessage call.

The problem is when I get this data and reverse the process, string to array of byte is fine but I haven’t found any way to convert that [ ]byte back to an mp3/audioclip.

Is somebody able to help?

2

Where and how exactly does it fail?
I would assume that there isn’t a runtime importer for MP3. There are a number of posts about this though:

3

Keep in mind that WebGL has significanrt limitation especially in the area of saving/writing files locally so most of the solutions I found online are not working.

 public void Test()
    {
        ReceiveAudioString(testString);
       // ReceiveAudioString_Old(testString);
    }

    private void ReceiveAudioString(string audioString)
    {
        if (string.IsNullOrEmpty(audioString))
        {
            Debug.Log("String is NULL or EMPTY");
            return;
        }

        byte[] byteArray = System.Convert.FromBase64String(audioString);

        StartCoroutine(LoadAudioClip(byteArray));
    }

    private IEnumerator LoadAudioClip(byte[] audioBytes)
    {
        string tempFile = Application.persistentDataPath + "/bytes.mp3";
        System.IO.File.WriteAllBytes(tempFile, audioBytes);


        string path = "";

#if UNITY_EDITOR
        Debug.Log("EDITOR");

        path = "file://";
#endif

#if  UNITY_WEBGL && !UNITY_EDITOR
        Debug.Log("WEBGL");

        path = "http";
#endif

        UnityWebRequest audioRequest = UnityWebRequestMultimedia.GetAudioClip(path + tempFile, AudioType.MPEG);


        yield return audioRequest.SendWebRequest();

        if (audioRequest.result != UnityWebRequest.Result.Success)
        {
            Debug.LogError(audioRequest.error);
            yield break;
        }

        AudioClip newClip = DownloadHandlerAudioClip.GetContent(audioRequest);
        newClip.name = "TextToSpeech";

        voiceTest.audioSource.clip = newClip;
        voiceTest.audioSource.Play();
    }

These are all the methods I use to get the MP3 from the website backend, first I get a string (which in this case is the same so I can test it locally on editor), then I turn it into an array of bytes and then I should get an AudioClip.

This system works like a charm on editor but it fails on WebGL probably where I do insert the path for UnityWebRequestMultimedia but I’m not sure since documentation about this topic seems pretty rare.

4

Hmmm how big is that MP3? You are extremely limited in how much you can save with the File API in WebGL. 10 MB is the maximum (all files, not single file).

After writing the file, try reading it back in again and compare the two byte arrays. You can use the built-in MD5 checksum API but I’m not sure if Cryptography is available on WebGL:
https://stackoverflow.com/questions/11454004/calculate-a-md5-hash-from-a-string

5

File size shouldn’t be an issue since I’ve tried to save the generated MP3 on editor and its weight its 82,4 KB.
Consider that everytime a new audio gets generated I can dispose or overwrite the old one to save storage.

I don’t know any of the APIs you mentioned tho, can you explain how they works or link to a documentation?

6

I meant System.IO.File :wink: