Chrome requires user gesture to start audio context about karaoke-rs

[Keavon]

Detecting the problem when it does show up and dealing with it, instead of leaving a black screen and having to check the console, would definitely be the best user experience!

[tarkah]

I think I like this message better :P

[tarkah]

Good call, thanks for the help!

[tarkah]

Yeah I'm aware of this one... There really is no way around it that isn't ridiculously hacky that I could find. You'll just have to load the index page first, then click on the player link in the header. Loading the player page directly doesn't give you time to interact with the page, preventing the audio from automatically playing.

[tarkah]

If you do load the player page directly, you can click on the background very fast and it'll register as an interaction and everything will work fine.

[tarkah]

Firefox doesn't have this restriction

[Keavon]

It's not pretty but I would suggest adding a graceful handling of this that adds a button to "load" the player when necessary.

[tarkah]

Hmmm, I'll have to think about this. It'd be easy to add, but navigating to the page by clicking the link in the header already circumvents this problem. And for browsers like Firefox where this isn't an issue, the extra button would be pointless.

At the same time though, it's undefined behavior that may trip people up even if it's documented somewhere to always navigate through the link.

[tarkah]

I guess I can only create the button in scenarios where this is an issue (check if AudioContext is in a suspended state after being created). So I'll definitely add this and make it only appear when applicable.

[tarkah]

Agreed! I'll look into this over the next few days. Thanks for opening this!

[tarkah]

@Keavon, see #23.

It creates the following modal, only if AudioContext is suspended due to the above problem. Once closed, song playback will resume appropriately. Any recommendations on what the message should say, or if it should be displayed / styled differently would be appreciated.

[Keavon]

Here's a couple options for text and [button] names.

• "Ready to load player. [Begin]"
• "Get ready for some karaoke! [Load Player]"

For styling, maybe keep it centered at 50% horizontally and vertically, give it some rounded corners, a single line of text with the button to the right or maybe below the text, and a color theme that fits the beautiful background imagery/logo (perhaps a border or box-shadow that fits with the look of the neon tubes).

[tarkah]

Awesome suggestions, thanks!

[tarkah]

How's this?

[Keavon]

The second iteration looks much nicer! I'd still suggest a thicker outline (like the thickness of the neon tubes) and maybe a more rounded outer border. And see if it's possible to add the glow (pink shadow) on the inside too with https://css-tricks.com/snippets/css/css-box-shadow/

[tarkah]

Ahh, I see what you're going for :)

[tarkah]

Getting closer...

[Keavon]

Nice! Maybe shrink the width of the shadow and make it more transparent so emphasize the solid border but just give it a subtle glow.

[tarkah]

Think I finally landed on something I like

[Keavon]

Lovely! Final small suggestion, make the button text larger and maybe see also if bolding the button text looks nicer.