Page crashes on mobile (android, iOS) when loading long audio file

[estafaa]

Nature of issue?

• [x] Found a bug

Most appropriate sub-area of p5.js?

• [x] Sound

Which platform were you using when you encountered this?

• [x] Mobile/Tablet (touch devices)

Details about the bug:

• p5.js version: 0.10.2
• Web browser and version: chrome mobile 79.0.3945.93 (official built) (32-bit),
• Operating System: Android 10
• Steps to reproduce this:

var song;
var songUrl = "https://aquapsy.s3.ca-central-1.amazonaws.com/store/c12f652ea5855acf0c1f5d9302f17f26.mp3"; 
 // it is about 37 minutes long song

function preload(){
    song = loadSound(songUrl, playsound,'', whileLoading);
    };

function playsound(e){
};

function whileLoading(e){
};

someButton.addEventListener("click", function(){
  song.play();
});

Everything works fine on a laptop on different browsers (songs can be long). And everything works well on laptop and mobile/tablet if a song is short (I noticed that important not the size of the file, but duration). 10 minutes song is okay, but that 37 minutes song on mobile/tablet after the sound is loaded the page crashes and reloads. On android, it says: "Aw, Snap! Something went wrong while displaying this webpage.." Seems after loadSound() is finished, it crashes, I do not start play or anything like that.

What is the problem?

Thank you very much!

[welcome[bot]]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[harry-isaac]

@estafaa Yes! I have the same problem but haven't seen anyone else mentioning it. I don't know of a solution yet. Did you ever figure anything out?

[estafaa]

Hi @isaac-computer, I was searching a lot about this issue and I think someone mentioned even in some P5 discussion. Seems the problem is with the RAM of the device. When you have a long file, it loads the file, then decodes it. Even if you have 1 hour of .mp3 file, it will decode into .wav and that will be like 500mb or something really big, so most smartphones will just crash due to not enough memory. There is one library that tries to solve it https://github.com/Rich-Harris/phonograph But it did not help me..., was still crashing with long files. I even tried to break manually long file into small ones, play them one after another, but for some reason buffer was still overfilling and I could not remove already played fragments from the buffer, so it was crashing. As I understand P5 Sound and other similar libraries build on top of Web Audio API and there is a fundamental issue there.

So, for now, for long files, I just use HTML5 Audio elements, it works well on many browsers and smartphones. It buffers a bit and then start playing it. But I could not build any visualization with

Also, it may be useful for someone who works with audio and Ruby on Rails, I found this cool gem to create .wav files from just an array (or work with .wav in general, I have not explored all functionality yet) https://wavefilegem.com

If you find any other solutions, please let me know) Thank you!

[DeveloperChallenge]

@estafaa, as you said every .mp3 file will be converted into .wav. right? Actually I'm facing the same issue. my question is what if load the wave file instead of .mp3. Will it solve the issue?

[estafaa]

@DeveloperChallenge if you convert .mp3 to .wav you will have a big size file (depends on a length and quality/resolution), so it should be the same load on the memory. But you can try it and test on different devices.