PIXI.sound not working in IE11 via webpack

[charlie-says]

I know in the past I've had PIXI.sound working in IE11, but on my new project which is ES6 it fails just by importing as per the demo:

import 'pixi-sound'

will get this: : Object doesn't support property or method 'addEventListener'

relating to this line: e.addEventListener("canplaythrough",i,!1)

[bigtimebuddy]

Please provide more information or an example that reproduces the problem.

Specifically versions of PixiJS, Webpack, pixi-sound?

[charlie-says]

apologies. "pixi-sound": "^3.0.3", "pixi.js-legacy": "^5.1.3", "webpack": "^3.11.0",

I thought I would try to investigate, and I have now isolated the issue.

Essentially, the problem with IE11 is trying to pass files to the loader like this: { name: 'sfx', url: this.assetPath + 'audio/sfx.{mp3,ogg,m4a,ac3}', preload: true },

with IE you can only import MP3, I basically get around this by using this:

let audio_suffix = isIE11 ? '.mp3' : '.{mp3,ogg,m4a,ac3}';

[bigtimebuddy]

That makes me think IE11 has a problem with identifying different types. Maybe it's getting hung up on ac3 which is not in the list of extensions I'm checking for. You could try to remove and see if that does anything.

Here's the reference source code: https://github.com/pixijs/pixi-sound/blob/master/src/utils/supported.ts

Could . you try to do something simple like and make sure this returns something?

document.createElement("audio").canPlayType('audio/ogg')

[bigtimebuddy]

Also, please refer to this boilerplate Webpack project: https://github.com/bigtimebuddy/pixi-sound-webpack-example/

You should not be importing pixi-sound like this: import 'pixi-sound'; anymore.

[charlie-says]

I tried stripping out the file types, getting down to .{mp3} and they all create the initial error.

trying this in IE11: console.log(document.createElement("audio").canPlayType('audio/ogg')) console.log(document.createElement("audio").canPlayType('audio/mp3')) console.log(document.createElement("audio").canPlayType('audio/ac3')) console.log(document.createElement("audio").canPlayType('audio/m4a'))

gets a 'maybe' for mp3, all the others are blank.

(I had noted about the imports, and changed it back, but not updated the post.)

[bigtimebuddy]

What's what I'd expect.

Could you maybe try to debug this code in your project? This is the functionality that parses the {format,format2,format3} business from your load path.

https://github.com/pixijs/pixi-sound/blob/master/src/utils/resolveUrl.ts

Particularly interested to see what the supported object reports.

[charlie-says]

Interestingly resolveUrl correctly returns the mp3.

[charlie-says]

Ok, I've spent a bit of time looking into this, and I'm not at all clear why it isn't working. On IE11 the url is correctly evaluated, but for some reason if you use the filetypes the resource.data (in SoundLoader use) is not an HTMLAudioElement, I think it must be reference to the sound file itself. Debugging in IE is an absolute pig.

[bigtimebuddy]

Hmm I wonder if this is a loader issue. What is the data type instead of an Audio element?

[charlie-says]

If you just pass the mp3 to the loader the data is an audio tag in the page, if you pass the filetypes, it seems to be passing back the mp3. It's not very clear because the console shows a lot of gibberish (which it won't let me copy!!), but includes the text LAME3.99r. I'm sorry if all this is a little vague.