如何在同一页面上复制 [播放] 和 [暂停] 按钮以进行音频播放？

Question

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

我的标准 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>

---

现在假设您希望在同一页面的其他地方有一个简化的替代播放/暂停控件。好主意对吧？现在我的问题是，如果我在页面的其他位置添加一个单独的更简约的播放/暂停控件，那么第一个播放/暂停按钮将完全消失！

<play>&#9654;</play>
<pause>&#10074;&#10074;</pause>

我想要的只是复制第一次播放/暂停的功能并将它们放置在页面的其他位置，允许移动用户在页面的另一个位置播放/暂停以方便使用。

---

总而言之，我希望允许用户同时控制两个不同位置的播放。主要的布局更漂亮，而位置 2 中的替代布局只有播放和暂停切换。如果按下任何一个，两者都应该切换。 （按下播放时显示为暂停按钮，按下暂停时显示为播放按钮）。

我必须在 html 和/或 javascript 中进行哪些更改才能实现此目的？提前致谢！

---

javascript 看起来像这样：

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";
});

}

---

DEMO

Answer 1

所以你有以下代码...

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

分步分解...

document.getElementsByTagName('audio')[0]

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

document.getElementsByTagName('play')[0]

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

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

document.getElementsByTagName('pause')[0]

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

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

所以解决办法是：

var audio;
window.onload=function(){
  audio=document.getElementsByTagName("audio")[0];
  //YOU MUST REGISTER AN EVENT LISTENER FOR EVERY PLAY AND PAUSE BUTTON.
  document.getElementsByClassName("playpause")[0].addEventListener("click",playpause);
  document.getElementsByClassName("playpause")[1].addEventListener("click",playpause);
}
function playpause(){
  var state;
  if(audio.paused){
    audio.play();
    state="Pause";
  }else{
    audio.pause();
    state="Play";
  }
  for(var i=0;i<document.getElementsByClassName("playpause").length;i++){
    document.getElementsByClassName("playpause")[i].innerHTML=state;
  }
}

<audio>
  <source src="http://www.kozco.com/tech/32.mp3" type="audio/mpeg">
</audio>
<button class="playpause">Play</button>
<button class="playpause">Play</button>