mdn / webaudio-examples

Code examples that accompany the MDN Web Docs pages relating to Web Audio.
https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API
Creative Commons Zero v1.0 Universal
1.25k stars 433 forks source link

panner-node: Script doesn't load as the DOM is not ready #120

Closed shuizhongyueming closed 9 months ago

shuizhongyueming commented 9 months ago

Description

The main.js should load after the DOM structure to make querySelector work correctly

Motivation

The online demo runs failed

Additional details

None

Related issues and pull requests

None

github-actions[bot] commented 9 months ago

It looks like this is your first pull request. 🎉 Thank you for your contribution! One of the project maintainers will triage and assign the pull request for review. We appreciate your patience. To safeguard the health of the project, please take a moment to read our code of conduct.

teoli2003 commented 9 months ago

Good catch! Thank you!

Unfortunately, your fix is not the correct one. You used the pre-2013 non-standard hack. Since 2008, there has been the defer attribute for this in the spec. Since 2013 all current major browsers have supported it.

Although browsers tolerate it, adding <script> in the <body> invalidates your markup.

I've updated the PR and tested it in Chrome and Firefox. Let's use the 2023 way of doing this!

github-actions[bot] commented 9 months ago

Congratulations on your first merged pull request. 🎉 Thank you for your contribution!

shuizhongyueming commented 9 months ago

After taking a deep dive into the defer attribute, I totally get why it's a better way to go.

Thanks for making that change and for giving me a chance to learn something new. 🙂

teoli2003 commented 9 months ago

You are very welcome. There are likely other occurrences of this, so don't hesitate to open more PRs.

(IE was the browser holding this feature for a decade, but now it is a thing of the past)