HTML结合JS设置音频src后无法正常播放问题求助

现有代码核心问题 #

• 缺少音频DOM元素：HTML中没有声明id为aud的<audio>标签，JS获取到的是空对象，即使你反馈可以设置src，实际也是操作不存在的元素，逻辑不成立
• JS变量赋值逻辑错误：var play1 = document.getElementById("aud").src="eyobmknn/trk1.mp3" 这行代码的赋值顺序是先给音频元素的src赋值，再把src的字符串值返回给play1，因此play1是字符串类型，不是音频DOM对象，后续设置loop、调用play方法都会报错
• 变量拼写错误：调用play方法时写的是pley1.play()，变量名和前面定义的play1不一致
• loop属性赋值错误：loop是布尔类型属性，应该赋值为true而非字符串"true"
• HTML标签未闭合、ID重复：<div id="container">和class为eyob1的div都没有闭合标签，同时有两个元素使用了相同的ideyob，id在文档中必须唯一
• 资源路径风险：如果eyobmknn/trk1.mp3的相对路径和当前HTML文件的层级不匹配，会导致音频资源加载失败

修正后的代码 #

HTML代码 #

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="launch.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <!-- 修正重复id，改为eyob-btn -->
    <div onclick="openeyob();" class="eyob" id="eyob-btn">Eyob Mekonnen</div>
    <div id="container">
        <!-- 修正重复id，改为track1-btn，闭合div标签 -->
        <div onclick="eyob1();" class="eyob1" id="track1-btn">01 track 01</div>
    </div>
    <!-- 新增音频元素，设置id为aud，不需要显示控件可以加hidden属性 -->
    <audio id="aud"></audio>
    <script src="lunch.js"></script>
</body>
</html>

JS代码 #

function eyob1() {   
    // 先获取音频DOM元素
    var audioEle = document.getElementById("aud");
    // 再设置src属性
    audioEle.src = "eyobmknn/trk1.mp3";
    // 设置循环为布尔值true
    audioEle.loop = true;
    // 调用play方法，添加catch捕获加载错误
    audioEle.play().catch(err => {
        console.log("音频播放失败：", err);
        // 可在这里添加路径错误、资源加载失败的提示逻辑
    });
}

额外验证项 #

• 确认eyobmknn/trk1.mp3路径正确：可以直接在浏览器地址栏输入当前页面地址/eyobmknn/trk1.mp3，看是否能正常加载音频
• 确认浏览器控制台没有报错：按F12打开开发者工具，查看Console面板的报错信息可以快速定位剩余问题

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