Q:

A script broken when linked with dynamic import instead of plain 

I have a homemade audio player that works perfectly on my website when linked to the page via regular script tag:
<head>
  …
  <script type="application/javascript" src="/static/js/player.js"></script>
</head>

The script itself is written in plain JS without any libraries, frameworks, etc. Here is the demo of how it works: you press the triangle, the player starts to play; there’s nothing special here. (It may not work in some old browsers, but this doesn’t matter now.)
However, the player got broken if I link it with dynamic import (in browsers that support this kind of import). In HTML, another script index.js is linked instead of player.js, and this index.js imports player.js:
// index.js
console.log('index.js is running…');
import('/static/js/player.js');

Here is the second demo of this version, tested in Chrome on Windows and Safari on macOS, all browsers and OS’s being of latest versions at the moment of this post.
player.js seems to be loading and executing. When I include console.log()s into it, it outputs them exactly where I expect; I also didn’t find any runtime difference from the previous version with the debugger in Dev Tools.
But the audio player is not working in this case. If you press the triangle, then, instead of launching the player, you get only a direct link to the MP3 file. Initially, it was the intended behavior when the script wasn’t loaded or was broken; but I cannot figure out what exactly breaks in this case.
The script player.js is exactly the same in both cases; the only difference is adding dynamic import in the second case. Please help me find what is wrong with it.

A:

You put your js files on the headers, that's where magic happen.
If you read your player.js file, you see your player replies on DOMContentLoaded
new Effect({  // container
behavior: `
  $window
    DOMContentLoaded
      _.init
`,
prop
....

On your first example, Your website basically stops loading until player.js loaded because you put it on header, player.js able to bind event to DOMContentLoaded. Then, after all initial HTML document has been completely loaded and parsed, event DOMContentLoaded fired, and your Player able to start
On your second example, http://dev.chebykin.ru/player/02/. The event DOMContentLoaded will be fired after script on file player.js because you loaded file though import command. Even Though your script still able to bind event DOMContentLoaded, but it already fired, so it got no effect
You may simple try to manual trigger event again on Chrome console, and will see your player working fine by using this script
window.dispatchEvent(new Event('DOMContentLoaded'))

