页面刷新随机展示图片音频功能 多音频同时播放问题求助

问题根因 #

音频同时播放和ID选择逻辑无关，是因为你给所有<audio>标签都加了autoplay属性：该属性的触发和父元素的display状态无关，只要元素被浏览器解析到就会自动播放音频，哪怕父容器设为隐藏也不会停止。

修复方案 #

步骤1：修改HTML代码 #

• 修正DOCTYPE的闭合错误
• 删除所有<audio>标签的autoplay属性
• 给所有内容div加统一的初始样式，默认隐藏，减少重复JS代码

修改后的HTML代码：

<!DOCTYPE html>
<html>
<head>
    <title>johannes</title>
    <script language="javascript" type="text/javascript" src="random.js"></script>
    <style>
        /* 所有内容块默认隐藏 */
        .content-item {
            display: none;
        }
    </style>
</head>
<body>
    <div id="spaghetti" class="content-item">
        <img src="/Users/henrigimm/Documents/Johannes test/Illu Johannes/spaghetti.png">
        <audio>
          <source src="/Users/henrigimm/Documents/Johannes test/spaghetti.mp3" type="audio/mpeg">
          Your browser does not support the audio element.
        </audio>
    </div>
    <div id="bier" class="content-item">
        <img src="/Users/henrigimm/Documents/Johannes test/Illu Johannes/bier.png">
        <audio>
          <source src="/Users/henrigimm/Documents/Johannes test/bier.mp3" type="audio/mpeg">
          Your browser does not support the audio element.
        </audio>
    </div>
    <div id="zelt" class="content-item">
        <img src="/Users/henrigimm/Documents/Johannes test/Illu Johannes/zelt.png">
        <audio>
          <source src="/Users/henrigimm/Documents/Johannes test/zelt.mp3" type="audio/mpeg">
          Your browser does not support the audio element.
        </audio>
    </div>
</body>
</html>

步骤2：修改JS代码 #

随机选中对应内容块显示后，主动调用该块内音频的播放方法即可。修改后的JS代码：

window.onload = function() {
    // 生成1-3的随机数
    const randomNumber = Math.floor(Math.random()*3 + 1);
    let targetId;
    // 匹配对应的内容块ID
    if (randomNumber === 1) {
        targetId = 'spaghetti';
    } else if (randomNumber === 2) {
        targetId = 'zelt';
    } else {
        targetId = 'bier';
    }
    // 显示目标内容块
    const targetEl = document.getElementById(targetId);
    targetEl.style.display = 'inline';
    // 播放目标块内的对应音频
    const audioEl = targetEl.querySelector('audio');
    audioEl.play();
}

额外注意 #

现在大部分浏览器默认禁止自动播放音频，需要用户和页面有过至少一次交互（比如点击页面任意位置）后才允许调用play()方法，如果遇到播放失败的情况，可以加个点击页面触发播放的兼容逻辑即可。

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