如何确定标准音频播放器是否正在播放歌曲 [英] How can I determine if standard audio player is playing a song

问题描述

我将以下内容作为html的一部分(每首歌曲中的每首歌曲都包含一次):

I have the following as part of my html (once for each of several songs):

<audio
     name="aMedia"
     id="aMedia"
     controls
     preload="auto">
<source src="audio/mysong.m4a">
</audio>

我想确定是否按下了上面的标准播放按钮来播放歌曲.如果是这样，我需要先停止所有可能正在播放的其他歌曲，例如

I wish to determine if the above standard Play button was pressed to play a song. If it was, I need to first stop all other songs that may be playing, e.g.,

function stopAllSongs()
{
    var allMedia = document.getElementsByName(theMedia), thisMedia;
    for (m=0; m < allMedia.length; m++)
    {
        thisMedia = allMedia[m];
        if (thisMedia.isPlaying())
            thisMedia.pause();
    }
}

我已经看到成功使用<input ...>来完成我想做的事情；但我想避免这种情况.

I have seen successful uses of <input ...> to do what I wish; but I would like to avoid that if possible.

有什么想法吗?

推荐答案

您可以为此使用play事件，然后遍历所有其他音频元素并在其上调用暂停.

You could use the play event for this, then iterate through all other audio elements and invoke pause on them.

您可以对所有音频元素使用通用的处理程序，this对象将表示触发事件的实际音频元素(当然可以用来设置CSS类等).

You can use a common handler for all the audio elements, the this object will represent the actual audio element triggering the event (which in turn of course can be used to set a CSS class etc.).

pause()，因此我们无需对其进行任何检查.我们只循环遍历元素数组，然后跳过触发事件的元素.

pause() can be called even if the audio is already paused so we don't need to do additional checks for it. We just loop through the array of elements and skip the element that triggered the event.

var audioElements = document.querySelectorAll("audio"), i;

// bind common handler for each audio element in page:
for(i = 0; i < audioElements.length; i++) 
  audioElements[i].addEventListener("play", playHandler);

// common handler
function playHandler() {
    // this = element triggering the event
    // pause all but ours (reusing previous audioElements NodeList collection here)
    for(var i = 0; i < audioElements.length; i++)
      if (this !== audioElements[i]) audioElements[i].pause();
}

<i>Preload time may vary, be patient... (due to links IE will not be able to play these)</i><br>Starting one will stop all others<br>
<audio preload="auto" controls src="https://github.com/epistemex/free-music-for-test-and-demo/blob/master/music/kf_feelme.mp3?raw=true"></audio><br>
<audio preload="auto" controls src="https://github.com/epistemex/free-music-for-test-and-demo/blob/master/music/kf_colibris.mp3?raw=true"></audio><br>
<audio preload="auto" controls src="https://github.com/epistemex/free-music-for-test-and-demo/blob/master/music/kf_limitless.mp3?raw=true"></audio><br>
<audio preload="auto" controls src="https://github.com/epistemex/free-music-for-test-and-demo/blob/master/music/kf_thebattle.mp3?raw=true"></audio>

这篇关于如何确定标准音频播放器是否正在播放歌曲的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！