HTML 音频在嵌套的 div 容器中不起作用答案

【问题标题】：HTML audio not working inside nested div containersHTML 音频在嵌套的 div 容器中不起作用
【发布时间】：2016-11-03 13:43:28
【问题描述】：

我在 html 中播放音频时遇到问题。当我将音频标签保存在 div 容器中时，音频播放良好，但当我将其放在另一个 div 中时，它不会播放。查看代码以更好地理解问题

案例#1：（工程）

<html>
<body>
<div id = "buttons">
<audio src="http://www.stephaniequinn.com/Music/Allegro%20from%20Duet%20in%20C%20Major.mp3" id="player"></audio>  
<button id = "prev">PREV</button>
<button id = "play" onclick = "play()">PLAY</button>
<button id = "pause" onclick = "pause()">PAUSE</button>
<button id = "next">NEXT</button>
</div>
<script>
function play() {
    document.getElementById('player').play();
}
function pause() {
    document.getElementById('player').pause();
}
</script>
</body>
</html>

案例#2：（不起作用）

<html>
<body>
<div id = "player">
<div id = "buttons">
<audio src="http://www.stephaniequinn.com/Music/Allegro%20from%20Duet%20in%20C%20Major.mp3" id="player"></audio>  
<button id = "prev">PREV</button>
<button id = "play" onclick = "play()">PLAY</button>
<button id = "pause" onclick = "pause()">PAUSE</button>
<button id = "next">NEXT</button>
</div>
</div>
<script>
function play() {
    document.getElementById('player').play();
}
function pause() {
    document.getElementById('player').pause();
}
</script>
</body>
</html>

【问题讨论】：

这与你的问题无关，但 <center> 自二战结束以来已被弃用。
您在控制台中看到任何错误吗？我的猜测是播放按钮上有一些不可见的元素会阻止您的点击事件。
@JonasGrumann 不，控制台上没有错误。
你能设置一个显示问题的小提琴吗？ jsfiddle.net
@JonasGrumann 只需在浏览器中运行这两个代码。您会看到一个有效，另一个无效。

标签： javascript html css

【解决方案1】：

第一个div 和音频标签ID 相同="player"。

因此，将第一个 div 的 id 更改为 "playe"。如果你想让你的音频标签有id="player"。

现在这将起作用。

<!doctype html>
<html>

<body>
  <div id="playe">
    <div id="buttons">
      <audio src="test.mp3" id="player"></audio>
      <button id="prev">PREV</button>
      <button id="play" onclick="play()">PLAY</button>
      <button id="pause" onclick="pause()">PAUSE</button>
      <button id="next">NEXT</button>
    </div>
  </div>
  <script>
    function play() {
      document.getElementById('player').play();
    }

    function pause() {
      document.getElementById('player').pause();
    }
  </script>
</body>

</html>

【讨论】：

我犯了一个愚蠢的错误。我几乎浪费了2-3个小时。谢谢:)