Cannot play audio from Google Cloud Storage - vue.js

Question

Please help. I can not play my audio file. It is hosted in Google Cloud Storage, it works if I just rin it in a localhost server but when I use the uploaded one. I often get (failed)net::ERR_CONTENT_DECODING_FAILED
Below is how I use my audio file in my VueJS
<template>
<v-btn #click="triggerSound">Trigger Sound</v-btn>
<audio id="notif" src="adn.wxt.com/zhuanchu.wav" />
</template>
<script>
mounted() {
this.notifyAudio = document.getElementById('notif')
},
methods: {
async triggerSound() {
this.notifyAudio.play()
}
},
</script>
UPDATE
It works well in Firefox

Answer 1

there are many reasons why you might get this error.
This error occurs when HTTP request’s headers claim that content is gzip encoded while it's not (see content bellow for further explanation). This error can be fixed by turning off gzip encoding in the browser you use.
if that didn't solve your problem, try adding this flag -> gcloud alpha storage cp gs://bucket/file.gz . --no-gzip-encoding.
my last solution would be Passing gsutil -h --header-download "Accept-Encoding: gzip"
Deeper explanation regarding the error
Redundant Behaviour
You should not set your metadata to redundantly report the compression of the object:
gsutil setmeta -h "Content-Type:application/gzip" \
-h "Content-Encoding:gzip"
This implies you are uploading a gzip-compressed object that has been gzip-compressed a second time when that is not usually the case. When decompressive transcoding occurs on such an incorrectly reported object, the object is served identity encoded, but requesters think that they have received an object which still has a layer of compression associated with it. Attempts to decompress the object will fail.
a file that is not gzip-compressed should not be uploaded with the Content-Encoding: gzip. Doing so makes the object appear to be eligible for transcoding, but when requests for the object are made, attempts at transcoding fail.
Double compression
Some objects, such as many video, audio, and image files, not to mention gzip files themselves, are already compressed. Using gzip on such objects offers virtually no benefit: in almost all cases, doing so makes the object larger due to gzip overhead. For this reason, using gzip on compressed content is generally discouraged and may cause undesired behaviors.
For example, while Cloud Storage allows "doubly compressed" objects (that is, objects that are gzip-compressed but also have an underlying Content-Type that is itself compressed) to be uploaded and stored, it does not allow objects to be served in a doubly compressed state unless their Cache-Control metadata includes no-transform. Instead, it removes the outer, gzip, level of compression, drops the Content-Encoding response header, and serves the resulting object. This occurs even for requests with Accept-Encoding: gzip. The file that is received by the client thus does not have the same checksum as what was uploaded and stored in Cloud Storage, so any integrity checks fail.