Javascript 如何复制[播放]&；在同一页面上播放音频的[暂停]按钮？

我无法在同一页上启动音频（播放+暂停）

我的标准HTML5音频播放器工作完美，具有如下标准控件：

<play title="Play spoken audio for the visually impaired">&#9654;</play>
<pause title="Pause audio, and press again to resume play">&#10074;&#10074;</pause>

window.onload = function(){

var myAudio = document.getElementsByTagName('audio')[0];
var play = document.getElementsByTagName('play')[0];
var pause = document.getElementsByTagName('pause')[0];

function displayControls() {
    play.style.display = "block";
}

// check that the media is ready before displaying the controls
if (myAudio.paused) {
    displayControls();
} else {
    // not ready yet - wait for canplay event
    myAudio.addEventListener('canplay', function() {
    displayControls();
    });
} 

play.addEventListener('click', function() {
    myAudio.play();
    play.style.display = "none";
    pause.style.display = "block";
});

pause.addEventListener('click', function() {
    myAudio.pause();
    pause.style.display = "none";
    play.style.display = "block";
});

}

---

---

所以你有下面的代码

var myAudio = document.getElementsByTagName('audio')[0];
var play = document.getElementsByTagName('play')[0];
var pause = document.getElementsByTagName('pause')[0];

逐步分解

document.getElementsByTagName（'audio'）[0]

document.getElementsByTagName（'play'）[0]

• 问题1。您只注册代码的第一个播放按钮。您必须为第二个播放按钮添加代码

document.getElementsByTagName（'pause'）[0]

• 问题2。与#1相同的问题

因此，解决方案是：

var音频；
window.onload=function（）{
audio=document.getElementsByTagName（“音频”）[0]；
//必须为每个播放和暂停按钮注册事件侦听器。
document.getElementsByClassName（“播放暂停”）[0]。addEventListener（“单击”，播放暂停）；
document.getElementsByClassName（“播放暂停”）[1]。addEventListener（“单击”，播放暂停）；
}
函数playpause（）{
var状态；
如果（音频暂停）{
音频播放（）；
state=“暂停”；
}否则{
audio.pause（）；
state=“Play”；
}
for（var i=0；idocument.getElementsByTagName（'play'）[0]仅绑定第一个播放按钮。相反，为每个按钮添加onclick处理程序。为文档添加事件侦听器。getElementsByTagName（'play'）[1]。谢谢@Kento Nishi我不明白，伙计。请将你的建议纳入答案。添加/更改/借用你的意思，并采用和修改当前的代码片段，以便清楚新情况应该是什么样子。这样，我就可以测试新情况，并在解决问题后接受你的答案。谢谢！好的，我会尝试…然后k you！PS我不介意这两个变体都有自己的html元素，比如默认的
和替代控件的
。这会让它变得更容易吗？否则，让这两个
都留在CSS中，我用CSS中的选择器瞄准它们，布局没有问题，所以如果它们能保持不变，我现在也很高兴。T谢谢你的通知，我以后可能会再看新的一期！棒极了，很优雅！非常感谢！
var myAudio = document.getElementsByTagName('audio')[0];
var play = document.getElementsByTagName('play')[0];
var pause = document.getElementsByTagName('pause')[0];

Get the 0th (1st) element in the document that has the tag name audio.

Get the 0th (1st) element in the document that has the tag name play.

Get the 0th (1st) element in the document that has the tag name pause.