[SOLVED] Mp3s uploading to Moralis stopped working

Moralis General
#1

I haven’t updated my app code repo for a few months, but something changed on your end that has stopped mp3 files from loading/playing in the last few weeks. I did update the server to v0.0.392 which seems like it was around the same time I noticed the audio files stopped working.

This is what pops out on the browser when trying to play an mp3 from Moralis

DOMException: Failed to load because no supported source was found.

NOT WORKING (MORALIS): Here’s an example of a file hosted on Moralis that is not playing anymore. When saving the the computer, it still plays, but it doesn’t play in the browser when opening directly.
https://fmcb23u78jkw.usemoralis.com:2053/server/files/RjsA1wzCX95s4hxXUuVA3lJDJlCLtmbLqYX727OB/58e29157dd0990a921db8c3364ad84dd_377-reveal-FRENCH-un-aroport-uhn-nah-ay-ro-pohr.mp3

WORKING (GOOGLE): This is an example of audio hosted on Google storage that plays using the same app code (which shows that the app code isn’t the issue)

Here is an example of a page that should have audio loaded
https://www.quarkstars.com/c/GNC22

Edit: FYI The above Google link generated a player in this forum, but originally I just put in the mp3 link.

Older server v0.0.386 audio files also don’t work.

I also tried directly uploading the file via Moralis database dashboard, but it still hangs up when I open the link (as shown above) even with the exact same file that works in Google Storage.

Same issues trying Edge rather than Chrome.

#2

it looks like these are the headers for that file:

HTTP/1.1 200 OK
Date: Sun, 13 Nov 2022 14:21:18 GMT
Content-Type: audio/mpeg
Content-Length: 49318
Connection: keep-alive
X-Powered-By: Express
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET,PUT,POST,DELETE,OPTIONS
Access-Control-Allow-Headers: X-Parse-Master-Key, X-Parse-REST-API-Key, X-Parse-Javascript-Key, X-Parse-Application-Id, X-Parse-Client-Version, X-Parse-Session-Token, X-Requested-With, X-Parse-Revocable-Session, X-Parse-Request-Id, Content-Type, Pragma, Cache-Control, X-Parse-Installation-Id, X-moralis-platform, X-moralis-platform-version, X-moralis-build-target
Access-Control-Expose-Headers: X-Parse-Job-Status-Id, X-Parse-Push-Status-Id
CF-Cache-Status: DYNAMIC
Server: cloudflare
CF-RAY: 7698272f3b470549-OTP

it looks like the content type is set to Content-Type: audio/mpeg

what is the url from google that works?

#3

This is what works

https://storage.googleapis.com/global-files/QUARKSTARS-correct.mp3

I’m not sure what the implications of the header you showed. I know cloudflare was mentioned before as an issue, but I didn’t see any thread that has a clear solution.

#4

these are the headers in this case:

HTTP/1.1 200 OK
X-GUploader-UploadID: ADPycdt-V_L6UL1A2zdepn2__Gu8Qvn52frPjYhEutEk6XT0q8Q3WSmPAXJMod14hoin3mWQ1yH9RZuIjDoD2pVGvLE-ug
Expires: Sun, 13 Nov 2022 20:21:45 GMT
Date: Sun, 13 Nov 2022 19:21:45 GMT
Cache-Control: public, max-age=3600
Last-Modified: Wed, 22 Jun 2022 04:06:23 GMT
ETag: "7ec7afb6bb73e8bfd2962dd2b7258c35"
x-goog-generation: 1655870783832534
x-goog-metageneration: 2
x-goog-stored-content-encoding: identity
x-goog-stored-content-length: 6671
Content-Type: audio/mpeg
x-goog-hash: crc32c=vT4gNw==
x-goog-hash: md5=fsevtrtz6L/Sli3StyWMNQ==
x-goog-storage-class: STANDARD
Accept-Ranges: bytes
Content-Length: 6671
Server: UploadServer
Alt-Svc: h3=":443"; ma=2592000,h3-29=":443"; ma=2592000,h3-Q050=":443"; ma=2592000,h3-Q046=":443"; ma=2592000,h3-Q043=":443"; ma=2592000,quic=":443"; ma=2592000; v="46,43"

it has the same content type

Content-Type: audio/mpeg

it looks like are different files, one has

Content-Length: 49318

and the other one has Content-Length: 6671

#5

I could try putting the exact same mp3 file on Google, but I doubt that’s the issue.

I’m looking at the cloudflare as the most likely culprit. Did anything change recently with that?

This thread applyings to mp4, but I guess it could be the same: https://community.cloudflare.com/t/mp4-wont-load-in-safari-using-cloudflare/10587/56
But I don’t think I have access to implement the solution suggested

#6

with mp4 files there is a known issue sometimes with Parse Server with not saving the expected content

you could try to upload a file and then download it and check if it has the same content that was uploaded (you can compute a hash)

#7

Just to be clear, all the mp3s worked fine after being uploaded. At some point, they all stopped working.

I can try your checks, but first I’m going to save a secondary file to Google Cloud because I can trust it will keep working.

#8

ok, I don’t know exactly what is the issue, we could test with the same file to narrow it down

#9

Okay I was able to solve this by converting it to a base64 and playing the mp3.

Before the flow was
Upload mp3 > convert to blob > convert to base64 > create parse file > store > retrieve url > play

But now I do
Upload mp3 > convert to blob > convert to base64 > create parse file > store > retrieve url > convert to blob > convert to base64 > play

The issue wasn’t the file being messed up by parse, but something seems to have changed with the retrieve url stage (possibly with the browser or a new version of parse) that stopped the first flow from playing the mp3 in the browser. But downloading the mp3 seems to be the same…at least I could create the exact same base64.

But ultimatly I guess we’ll never know exactly why the first flow stopped working.