Handle autoplay exceptions

[karolyi]

Hey,

newer browsers need a permission to play audio automatically on site load. I've made an audio player that remembers its latest play state and resumes playing on site reload. If the site doesn't have the autoplay enabled, calling play() will result in an unhandled promise exception:

Console message: Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD

You might want to look into this and handle the exception properly so I can act on it from within my player code.

Thanks!

[eshaz]

Are you able to catch this exception when you call play()? If so, I don't think there needs to be anything done in IcecastMetadataPlayer to handle this exception since it was thrown as expected.

Handling browser autoplay is out of scope of this library. You might have some luck in solving this for your usecase by checking out this guide.

[karolyi]

Hey,

I've tried catching it but neither a try-catch, nor a .catch() on the promise helped, hence why I'm posting this issue here. It's fine with me if I can catch it, the problem is I can't.

[eshaz]

Do you have a code example of where the error happens after starting playback automatically that you could share?

[karolyi]

Yes.

The player I built (https://gitea.ksol.io/karolyi/karolyimusic-webplayer) is live on https://karolyimusic.com (although webpacked).

You can test it there.

[eshaz]

Thanks for letting me know about this one! I really thought any exception here would be thrown, but it turns out that is not the case when it's thrown inside of an event listener.

I created a new branch with a change that will send any errors from the play() call on the audio element through the onError callback. If you want to test it out, you can checkout the branch in #108. If you have the enableLogging option set, you will also see the error logged in the console:

[karolyi]

Hey,

I'm trying to test this but for the love of god I can't check out the respective pull requests with npm as the package.json for the player is in a subdirectory and npm doesn't like that with a referred pull request.

If I clone the repo into a subdirectory, change to the referred pull head and give that path to NPM to install from, it will complain that it can't find modules since they're not within node_modules.

Have you ever tried to do the same? I'm afraid I can't test your package as is now.

[eshaz]

After you've cloned the repo, and checked out the PR, you can point directly to the icecast-metadata-player folder in your package.json. Example: "icecast-metadata-player:" "file:path-to-icecast-metadata-js-clone/src/icecast-metadata-player". I use this method every time I am testing with the demo page.

[karolyi]

yeah, I managed it so far but webpack bails out hard when using it this way:

ERROR in ../../opensource/icecast-metadata-js/src/icecast-metadata-player/src/IcecastMetadataPlayer.js 20:0-59
Module not found: Error: Can't resolve 'icecast-metadata-js' in '/home/karolyi/Work/opensource/icecast-metadata-js/src/icecast-metadata-player/src'
 @ ./src/index.ts 1:0-60 77:38-59 82:29-50

ERROR in ../../opensource/icecast-metadata-js/src/icecast-metadata-player/src/PlayerFactory.js 1:0-60
Module not found: Error: Can't resolve 'icecast-metadata-js' in '/home/karolyi/Work/opensource/icecast-metadata-js/src/icecast-metadata-player/src'
 @ ../../opensource/icecast-metadata-js/src/icecast-metadata-player/src/IcecastMetadataPlayer.js 26:0-47 186:37-50
 @ ./src/index.ts 1:0-60 77:38-59 82:29-50

ERROR in ../../opensource/icecast-metadata-js/src/icecast-metadata-player/src/PlayerFactory.js 2:0-39
Module not found: Error: Can't resolve 'codec-parser' in '/home/karolyi/Work/opensource/icecast-metadata-js/src/icecast-metadata-player/src'
 @ ../../opensource/icecast-metadata-js/src/icecast-metadata-player/src/IcecastMetadataPlayer.js 26:0-47 186:37-50
 @ ./src/index.ts 1:0-60 77:38-59 82:29-50

ERROR in ../../opensource/icecast-metadata-js/src/icecast-metadata-player/src/players/MediaSourcePlayer.js 1:0-48
Module not found: Error: Can't resolve 'mse-audio-wrapper' in '/home/karolyi/Work/opensource/icecast-metadata-js/src/icecast-metadata-player/src/players'
 @ ../../opensource/icecast-metadata-js/src/icecast-metadata-player/src/IcecastMetadataPlayer.js 27:0-63 197:19-48
 @ ./src/index.ts 1:0-60 77:38-59 82:29-50

ERROR in ../../opensource/icecast-metadata-js/src/icecast-metadata-player/src/players/WebAudioPlayer.js 1:0-52
Module not found: Error: Can't resolve 'opus-decoder' in '/home/karolyi/Work/opensource/icecast-metadata-js/src/icecast-metadata-player/src/players'
 @ ../../opensource/icecast-metadata-js/src/icecast-metadata-player/src/IcecastMetadataPlayer.js 29:0-57 199:16-42
 @ ./src/index.ts 1:0-60 77:38-59 82:29-50

ERROR in ../../opensource/icecast-metadata-js/src/icecast-metadata-player/src/players/WebAudioPlayer.js 2:0-54
Module not found: Error: Can't resolve 'mpg123-decoder' in '/home/karolyi/Work/opensource/icecast-metadata-js/src/icecast-metadata-player/src/players'
 @ ../../opensource/icecast-metadata-js/src/icecast-metadata-player/src/IcecastMetadataPlayer.js 29:0-57 199:16-42
 @ ./src/index.ts 1:0-60 77:38-59 82:29-50

ERROR in /home/karolyi/Work/private/karolyimusic-webplayer/src/index.ts
./src/index.ts 15:12-18
[tsl] ERROR in /home/karolyi/Work/private/karolyimusic-webplayer/src/index.ts(15,13)
      TS2345: Argument of type 'IconDefinition' is not assignable to parameter of type 'IconDefinitionOrPack'.
  Type 'IconDefinition' is not assignable to type 'IconPack'.
    Index signature for type 'string' is missing in type 'IconDefinition'.

ERROR in /home/karolyi/Work/private/karolyimusic-webplayer/src/index.ts
./src/index.ts 202:14-205:5
[tsl] ERROR in /home/karolyi/Work/private/karolyimusic-webplayer/src/index.ts(202,15)
      TS2554: Expected 0 arguments, but got 1.

I'm clueless so far, working on it as we speak. Don't hesitate to tell me if you have an idea :)

[karolyi]

Okay, so the missing modules are now installed with going under src/icecast-metadata-player and executing npm install.

One would think that that's executed automatically upon installing, doesn't seem to be the case.

I'm gonna resolve the other issues and touch base with the results of my testing.

[karolyi]

Thanks, I managed to update it and testing it with my player.

Will continue adding remarks under the PR.

[eshaz]

@karolyi, I've released this feature in icecast-metadata-player/1.11.5. Thanks for helping to improve this library!