代码之家 › 专栏 › 技术社区 › Sam

如何复制[Play]和[Pause]按钮在同一页上进行音频播放?

html5-audio controls duplicates html5 javascript

1

Sam · 技术社区 · 6 年前

我无法在同一页上启动音频(播放+暂停)。

我的标准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的另一个只有播放和暂停切换。如果按下其中一个,两者都应切换。(按Play时显示为暂停按钮,按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

1 回复 | 直到 6 年前

1

Kento Nishi 6 年前

所以你有以下代码…

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

逐步分解…

document.getElementsByTagname(“音频”)[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(“暂停”)[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>