Javascript HTML音频在嵌套的div容器中不起作用_Javascript_Html_Css

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

javascript html css

Javascript HTML音频在嵌套的div容器中不起作用,javascript,html,css,Javascript,Html,Css,我在html中播放音频时遇到问题。当我把音频标签放在一个div容器中时，音频播放得很好，但当我把它放在另一个div中时，它就不会播放了。请参阅代码以更好地理解这个问题案例1：（工程）上玩暂停下一个函数播放（）{ document.getElementById（'player'）.play（）； } 函数暂停（）{ document.getElementById（'player'）.pause（）； } 案例2：（不起作用）上玩暂停下一个函数播放（）{ document

我在html中播放音频时遇到问题。当我把音频标签放在一个div容器中时，音频播放得很好，但当我把它放在另一个div中时，它就不会播放了。请参阅代码以更好地理解这个问题

案例1：（工程）


上
玩
暂停
下一个
函数播放（）{
document.getElementById（'player'）.play（）；
}
函数暂停（）{
document.getElementById（'player'）.pause（）；
}

案例2：（不起作用）


上
玩
暂停
下一个
函数播放（）{
document.getElementById（'player'）.play（）；
}
函数暂停（）{
document.getElementById（'player'）.pause（）；
}

1st

div

和音频标签id相同

=“播放器”

因此，当我将第一个

div的id
更改为“playe”
时，将其更改为。
如果您希望音频标签具有id=“player”

现在这就行了


上
玩
暂停
下一个
函数播放（）{
document.getElementById（'player'）.play（）；
}
函数暂停（）{
document.getElementById（'player'）.pause（）；
}
这与您的问题无关，但自二战结束以来，已被弃用。您看到控制台中有任何错误吗？我猜在“播放”按钮上有一些不可见的元素阻止了你的点击事件。@JonasGrumann不，控制台上没有错误。你能用小提琴来显示问题吗@JonasGrumann只需在浏览器中运行这两个代码。你会看到一个有效，另一个无效。我犯了一个愚蠢的错误。我几乎在上面浪费了2-3个小时。谢谢：）
<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>

<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>