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>

我想要做的就是复制第一个播放/暂停功能并将其放置在页面上的其他位置，从而使移动设备上的用户可以将播放/暂停功能放在页面的另一个位置，以便于使用。

因此，总而言之，我想允许用户同时从两个不同的位置控制播放。最主要的一个布局更高级，而第二个中的另一个仅具有播放和暂停切换。如果任何一个被按下，两者都应该切换。（按下播放键时，它会显示为暂停按钮；按下暂停键时，它会变成播放按钮）。

要实现此目的，必须在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>

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

DEMO

1 个答案: