Howler.js 2.2.0 wont play on Safari (both MacOS and iOS 14 on mobile)

[inglesuniversal]

Sample LINK provided below:

AUDIO_SAMPLE

It was working fine until apple updated Safari on both Mac and iOS 14.0.1

No errors shown inside Safari console

Best regards

[ubershmekel]

I also just noticed an issue on Safari MacOS. Some of the sounds work and some don't. They all work in Chrome.

https://dontgo.netlify.app/

Specifically the piano sound that happens after you hit the UP key to jump is missing only in Safari. Sadly, you have to wait for the monologue to finish before you can test that.

[inglesuniversal]

Let's patiently wait til all the update fuzz is done on iOS 14.

FYI: Something similar happened on iOS 13.

[Einere]

i have same issue. i figure out what cause this issue in safari. (but not chrome in mac)

in Howl.prototype.play function in howler.js

      // If the sound hasn't loaded, we must wait to get the audio's duration.
      // We also need to wait to make sure we don't run into race conditions with
      // the order of function calls.
      if (self._state !== 'loaded') {
        // Set the sprite value on this sound.
        sound._sprite = sprite;

        // Mark this sound as not ended in case another sound is played before this one loads.
        sound._ended = false;

        // Add the sound to the queue to be played on load.
        var soundId = sound._id;
        self._queue.push({
          event: 'play',
          action: function() {
            self.play(soundId);
          }
        });

in chrome, self._state is loaded.
but in safari, unloaded. so push that object to self_queue, but not call pushed item's action function.
i think this is reason that not playing audio.

but i don't know why audio source is not loaded infinitely. 😭
i think this is related with iOS 14. (maybe..)

[marisancans]

I'm having the same issue. Chrome works, iOS 13 works, but iOS 14 doesn't. @Einere Is that a workaround to fix the issue?

[Einere]

@marisancans
oh, i fixed it by add html5: true option. maybe most common solution is that.
but, my another reason that don't play audio is src option value. i using src blob url, not url. and making blob url logic was wrong.

// wrong
axios
...
.then((response) => response.data)
.then((data) => {
  const blob = new Blob([data]);
  const blobUrl = window.createObjectURL(blob);
  const sound = new Howl({
    src: [blobUrl],
    html5: true,
    ...
  })
})
...

i fixed making blob url logic, then it works.

// works
axios
...
.then((response) => response.data)
.then((data) => {
  const blobUrl = window.createObjectURL(data); // pass blob directly
  const sound = new Howl({
    src: [blobUrl],
    html5: true,
    ...
  })
})
...

if you using src by blob url, please check it.
(fixing two code, then work fine at iOS 14 devices. i checked mac safari, ipad safari, iphone safari)

[inglesuniversal]

I’ll give it a try right now. Wish me luck

[inglesuniversal]

@marisancans AWESOME!!!! That did the trick!!! You see... in my case was not a blob audio file by a WAV file that was recorded and uploaded to a remote server. I also had the idea that the issue could've been related to a cors issue.

[ubershmekel]

@inglesuniversal the fact that there is a workaround doesn't mean that the issue is resolved. Howlerjs should detect the platform and choose whether or not to use html5 audio as appropriate. I think the issue should be re-opened.

[inglesuniversal]

Totally agree with your suggestion @ubershmekel

issue has been re-opened

[goldfire]

I'm closing as I assume this is related to #1415, but if not I'll be happy to reopen. I'm not seeing any other issues in my testing on Safari 14 so far.

[bitbay]

Sorry to resurrect a closed issue, but just found out that apple has splitted it's iOS operating system into two after iOS 12 (last common OS among "mobile" devices).
As from 2019 they ship version 13 of iOS to their iPhone product line and 13 of iPadOS for the iPads.
wikipedia

This issue (not yet sure about howler.js version) is still present on iPadOS, but not on iOS.
Just to add the new term iPadOS into the conversation.

[ajfarkas]

I still have this issue on Howler v2.2.3. I have to detect iOS and change config.html5 to true or no audio plays.

[jakewhiteley]

Same here with version 2.2.3. iOS 14 wont play audio unless config.html5 is set to true - it's as though Howler never reaches the fallback (although webaudio is supported apparently on iOS 14 with a prefix).

Using webm and mp3 spritesheets

[scott-schibli]

Same here, Safari 14.1.2., IOS 15.
It is strange because it says in the docs now that these specific versions of safari/ios work, HOWEVER, I have found that it only works if you record the audio in Safari.
IF I record audio in Chrome, firefox etc.. it works flawlessly in all browsers except Safari.
BUT if I record in safari, then it works in all browsers - including safari.

Very strange, and I have been working on this bug for a couple weeks now.
Anyone else experiencing this? any help would be much appreciated !

[korg]

I just hit this too. I developed on desktop and android with v2.2.3 and my ios friends couldnt play my audio until i added:

html5=true

to my Howl() & sprite definition.

The trouble now is that i have many sprites playing at once and that seems to overload html5's audio. ;-(

[PavlosMac]

Having this kind of issue. The html audio pool gets exhausted. However, I have made a singleton which only manages the constraint on the pool but there is no sound even with html5 enabled.

[lampd-tgl]

@marisancans oh, i fixed it by add html5: true option. maybe most common solution is that. but, my another reason that don't play audio is src option value. i using src blob url, not url. and making blob url logic was wrong.

// wrong
axios
...
.then((response) => response.data)
.then((data) => {
  const blob = new Blob([data]);
  const blobUrl = window.createObjectURL(blob);
  const sound = new Howl({
    src: [blobUrl],
    html5: true,
    ...
  })
})
...

i fixed making blob url logic, then it works.

// works
axios
...
.then((response) => response.data)
.then((data) => {
  const blobUrl = window.createObjectURL(data); // pass blob directly
  const sound = new Howl({
    src: [blobUrl],
    html5: true,
    ...
  })
})
...

if you using src by blob url, please check it. (fixing two code, then work fine at iOS 14 devices. i checked mac safari, ipad safari, iphone safari)

html5=true work for me. Thank you so much!