Fix multi-track sync on Chrome (autoplay?)

[michaelbartnett]

I was helping somebody troubleshoot an audio problem with their Twine game, so I looked up the web audio API examples on MDN and the one they were interested in looking at for a solution didn't work on Chrome.

My guess was it's the autoplay thing. I don't know enough about browser dev to say that's the real answer, but this fix does make it work in Chrome again.

[chrisdavidmills]

Hi @michaelbartnett, and thanks for your improvements here! Yes, this is due to autoplay policy; I fixed most of these demos, but this was one I hadn't got around to yet.

This is mostly good to go; I did have a couple of comments:

1. The button text would be better if it sounded more relevant to the app, maybe "Press to load tracks"?

2. I thought it'd be nice to add some CSS to make the button's look a bit more in-keeping with the appp; how about this:

#startbutton {
  width: 10vw;
  line-height: 3;
  background-color: var(--boxMain);
  border: var(--border); border-radius: var(--borderRad);
  position: absolute;
  top: 1px;
  left: 1px;
}

#startbutton:hover {
  background-color: var(--boxSecond);
}

3. We tend to discourage inline event handler attributes on MDN, as it's often seen as a outdated practice. Can you update the onclick="initDemo()", and do it all in the JS instead, using say addEventListener()?

[michaelbartnett]

Hello @chrisdavidmills,

Apologies it took a while, but I've the changes you requested. Thank you for reviewing!

[chrisdavidmills]

Tested it, and this works just fine. Thanks @michaelbartnett !