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

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/pause 控件。好主意吧？现在我的问题是，如果我在页面的其他地方添加一个单独的更简约的播放/暂停控件，那么第一个 play/pause 按钮将完全消失！

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

我想要的只是复制第一个 play/pause 的功能并将它们放在页面的其他位置，让移动用户可以轻松地将 play/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>

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

How to DUPLICATE the [Play] & [Pause] button for audio playback on the very same page?

html

javascript

controls

duplicates

html5-audio

DEMO