实施例

Question

我有以下内容作为我的html的一部分（每首歌曲一次）：

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

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

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

我已经看到成功使用<input ...>来做我想做的事情;但我想尽可能避免这种情况。

有什么想法吗？

Answer 1

您可以使用play事件，然后遍历所有其他音频元素并调用它们上的暂停。

您可以对所有音频元素使用公共处理程序，this对象将表示触发事件的实际音频元素（当然，它可以用于设置CSS类等）。 / p> 即使音频已暂停，也可以调用

pause()，因此我们不需要对其进行额外检查。我们只是循环遍历元素数组并跳过触发事件的元素。

实施例

＆＃13;

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

＆＃13;

<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>

＆＃13;

如何确定标准音频播放器是否正在播放歌曲

1 个答案:

实施例