开发HTML+JS音频播放器时<audio>元素不显示问题咨询

现象 #

跟随教程操作到5分钟节点，预期class为audioPlayer的div容器内，会正常渲染JS动态插入的audio元素，与示例效果一致；实际容器未撑开，audio标签未嵌入，页面伴随报错。

现有代码 #

index.html #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Javascript Audio Player</title>
</head>
<body>
    <div class="audioPlayer"></div>
    <script src="../static/common-js/player.js"></script>
</body>
</html>

player.js #

import AudioPlayer from './audioPlayer';

const audioPlayer = new AudioPlayer('./audioPlayer', [
    {url: '../music/rainfall.mp3', name: 'Alleviating Rainfall'},
]);

AudioPlayer.js #

export default class AudioPlayer {
    constructor(selector = '.audioPlayer', audio = []) {
        this.playerElem = document.querySelector(selector);
        this.audio = audio;
        this.currentAudio = null;
        this.createPlayerElements();
    }
}

错误定位（按触发顺序排序） #

• ES模块引入方式错误：player.js使用import语法，属于ES模块，但index.html中的<script>标签未添加type="module"属性，浏览器会将其识别为传统脚本，直接抛出Cannot use import statement outside a module语法错误，后续所有JS逻辑无法执行。
• 实例化传参错误：AudioPlayer构造函数的第一个参数是DOM查询用的CSS选择器，player.js中实例化时错误传入路径字符串'./audioPlayer'，会导致document.querySelector匹配不到目标容器，playerElem为null。
• 类方法缺失：AudioPlayer构造函数中调用this.createPlayerElements()，但当前类代码未实现该方法，修复前两个问题后，运行构造函数时会抛出createPlayerElements is not defined运行时错误。
• 导入路径大小写不匹配：本地文件名为AudioPlayer.js（首字母大写A），但player.js中导入路径写为'./audioPlayer'（首字母小写a），在大小写敏感的运行环境（如线上服务器）下，会出现模块找不到的问题。

修复方案 #

1. 为index.html中的script标签添加模块属性：

   <script type="module" src="../static/common-js/player.js"></script>
   

2. 修正player.js中实例化的选择器参数，替换为正确的CSS选择器：

   const audioPlayer = new AudioPlayer('.audioPlayer', [
       {url: '../music/rainfall.mp3', name: 'Alleviating Rainfall'},
   ]);
   

3. 修正player.js中的导入路径大小写，与实际文件名保持一致；补全AudioPlayer类的createPlayerElements方法，实现动态创建audio标签、插入到目标容器的逻辑。

内容的提问来源于stack exchange，提问作者ioalft