プレーヤーの再生/一時停止ボタンを切り替える2つの異なる方法を試しましたが、いずれも最初のクリックでは機能しません。何らかの理由で。
これは、おそらくオーディオのステータスをチェックして、一時停止または終了したかどうかを確認します。
function togglePlayPause() {
var audioPlayer = document.getElementsByTagName('audio')[0];
var playpause = document.getElementById("playpause");
if (audioPlayer.paused || audioPlayer.ended) {
playpause.title = "pause";
playpause.innerHTML = "pause";
}
else {
playpause.title = "play";
playpause.innerHTML = "play";
}
}
または、onClickを介して切り替えるだけのこれを試しましたtoggle(this)
:
function toggle(obj) {
if (obj.className== 'playButton') {
obj.className = 'pauseButton';
obj.title = "PAUSE";
obj.innerHTML = "PAUSE";
} else {
obj.className = 'playButton';
obj.title = "PLAY";
obj.innerHTML = "PLAY";
}
}
ボタンが最初にクリックされたときにどちらも切り替えませんが、最初の方法はデフォルトの内部の「PLAY」から「play」に変更されるので、それは何かだと思います。
<a href="#" id="start" onclick="playPause();togglePlayPause();"><div title="play" class="playButton" id="playpause">PLAY</div></a>
どちらの方法でも、後続のクリックは正常に機能します。なぜこれが起こっているのか考えていますか?audioPlayer変数が呼び出される方法と関係がありますか?配列は0から始まります(ストローをつかんでいます)。
いつもありがとう!