HTMLオーディオがネストされたdivコンテナの内部で動作しない

htmlでオーディオを再生する際に問題が発生しています。私はオーディオタグをdivコンテナの中に入れておくと音声がうまく再生されますが、別のdivの中に入れても再生されません。（ワークス）HTMLオーディオがネストされたdivコンテナの内部で動作しない

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

出典

2016-11-03 Shivam Mitra

それはあなたの質問とは何の関係もありませんが、 '

は'戦後廃止されました。 – connexo

コンソールにエラーが表示されますか？私の推測では、あなたのクリックイベントをブロックする再生ボタン上のいくつかの目に見えない要素があります。 –

@JonasGrumannいいえ、コンソールにエラーはありません。 –

第一divとオーディオタグIDである問題をより良く理解するためのコード

ケース＃1を参照してください。同じ="player"。

idがdivに変更されましたので、"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>

出典

2016-11-03 14:31:20

私はそんなに愚かな間違いを作り出していました。私はそれに2〜3時間をほとんど無駄にした。ありがとう:) –

HTMLオーディオがネストされたdivコンテナの内部で動作しない

答えて

関連する問題