I’ve uploaded audio, image, and video files to Google Cloud Storage (GCS). While I can successfully download and view images and videos on my device, I’m encountering issues with playing audio files.

The audio files are stored with an MP3 file type. I’ve found that I can work around this problem by changing the file extension to webm for audio files. However, this solution is not ideal as it requires the browser to open every time I want to replay the audio, which disrupts the user experience.

CODE:

const storage = getStorage();
                    let file = post.fileUrl;
                    getDownloadURL(ref(storage, file))
                        .then((url) => {
                            const xhr = new XMLHttpRequest();
                            xhr.responseType = 'blob';
                            xhr.onload = (event) => {
                                const blob = xhr.response;
                                //create a file from the returned blob
                                var file = new File(
                                    [blob],
                                    'file'
                                    ,
                                    {
                                        type: blob.type,
                                    },
                                );
                                //create anchor tag
                                var link = document.createElement('a');
                                //set the download attribute of the a tag to the name stored in the file
                                link.download = file.name;
                                //generate a temp url to host the file for download
                                link.href = URL.createObjectURL(file);
                                link.click();
                            };

                            
                            xhr.open('GET', url);
                            xhr.send();
                        })
                        .catch((err) => {
                            console.log(err);})

I tried setting the file to mp3 since for audios it would download a xml file instead.

var file = new File(
                                    [blob],
                                    `${dataHandle}_GoodbyeApp
                                    ${
                                        post.fileType === 'audio'
                                            ? '.mp3'
                                            : ''
                                    }`,
                                    {
                                        type: blob.type,
                                    },
                                );

And now it always downloads an mp3 file which doesnt play.
Any ideas how I can use MP3?