0

I am making a website with Angular and Firebase and I need to play an m4a audio file from my Firebase storage bucket. I am using a Javascript Audio object to do this and while it works perfectly on Chrome gives this error on Safari:

Cancelled load to [Link] because it violates the resource's Cross-Origin-Resource-Policy response header.

Here is the code that plays the audio.

teacher = new Audio("https://storage.cloud.google.com/bucket-name.appspot.com/audiotest.m4a");

play() {
  let that = this;

  this.teacher.play();

  this.teacher.addEventListener("ended", function() {
    that.end = true;
  });
}

And the button to play the audio

<div *ngIf="!end" style="background-color: red;" class="btn" (click)="play()">
  <p class="box-text">Play</p>
</div>

I have tried adding COOR headers to my storage bucket but nothing changed.

I also tried making a video tag that played video from the same storage bucket and had the same effect. It worked on Chrome but not on Safari.

Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
Deep Thought42
  • 117
  • 3
  • You need to enable CORS on your storage bucket. You mention you have attempted this, but your configuration must be invalid, otherwise it would have worked. I would suggest you start a new question giving details of what you've tried regarding this issue. Also note that the reason it works in Chrome but not Safari is because Chrome (incorrectly) does not check for CORS headers when making cross-domain requests on Audio objects. – Rory McCrossan Jun 23 '23 at 18:52
  • 1
    @RoryMcCrossan There was a better dup for this; I added it. – Doug Stevenson Jun 23 '23 at 18:53

0 Answers0