多个html5音频播放器播放控件 [英] multiple html5 audio players play control

问题描述

我的页面上有多个HTML5音频播放器，问题是当我同时播放两个音频播放器时，它们会同时播放彼此重叠的声音.基本上，我想做的是，一个玩家正在玩，另一人被单击以玩，而上一个玩家停止玩.

I have multiple HTML5 audio players on my page, the problem is that when I play both of them they play simultaneously overlapping each other's sound. Basically what I want to do is that one player is playing and another is clicked for play the previous one stops playing.

以下是我的html

  <div>
     <audio controls="controls">
         <source src="./public/audio/tiesto.mp3" type="audio/mpeg">
     </audio>
  </div>
  <div>
     <audio controls="controls">
          <source src="./public/audio/123.mp3" type="audio/mpeg">
     </audio>
 </div>

这是我从某个地方复制的js，但不确定如何将其应用于音频元素.

This is my js which I copied from somewhere but not sure how it applies to the audio element.

var curPlaying;
$(function () {
    $(".playback").click(function (e) {
        e.preventDefault();
        var song = $(this).next('audio')[0];
        if (song.paused) {
            if (curPlaying) {
                $("audio", "#" + curPlaying)[0].pause();
            }
            song.play();
            curPlaying = $(this).parent()[0].id;
        } else {
            song.pause();
            curPlaying = null;
        }
    });
});

伙计们正在使用自定义播放按钮，而我想使用ausio控件，它具有内置功能.有可能吗?

The guys was using a custom play button whereas I want to use the ausio control and it's built in functionality. Is it possible?

推荐答案

简单地将以下javascript添加到我的自定义js

Simply added the following javascript to my custom js

window.addEventListener("play", function(evt)
{
    if(window.$_currentlyPlaying && window.$_currentlyPlaying != evt.target)
    {
        window.$_currentlyPlaying.pause();
    } 
    window.$_currentlyPlaying = evt.target;
}, true);

这篇关于多个html5音频播放器播放控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！