Question

我想一次只播放一个音频以响应某些鼠标事件。在不同的HTML元素播放音频的情况下，情况正在上升。当用户将鼠标从一个元素快速移动到另一个元素并且该元素都播放音频时，它变得嘈杂。我想在播放新音频之前检查是否正在播放任何音频。我使用了以下代码：

var $audioAnno=0;
function audioAnnotation(y){
    var audio; 
    if ($audioAnno==0){
        $audioAnno=1;
        audio = new Audio(y);
        audio.play();
        $audioAnno=0;
    }
}

它不会停止播放第二个音频。

Answer 1

这是如何，我会这样做，维护一个标志canPlay和鼠标事件，如果是，则播放

canPlay = true;
var es = document.getElementsByTagName('audio'), audios=[];
for(var i=0;i<es.length;i++)    audios.push(es[i]);
audios.forEach(function(e){
    e.addEventListener('play', function(){
        canPlay= false;
    });

    e.addEventListener('ended', function(){
        canPlay= true;
    });
});

// later on some mouseEvent based on some condition

function onMouseEvent(audioElement){
    if(canPlay){
        audioElement.play();
    }
};

修改：fiddle demo.

编辑2：

仅与音频对象相同：

 var audio = new Audio(), canPlay = true;
audio.src = 'http://upload.wikimedia.org/wikipedia/en/f/f9/Beatles_eleanor_rigby.ogg';
audio.addEventListener('play', function(){
    console.log('playing');
    canPlay = false;
});
audio.addEventListener('ended', function(){
    console.log('stopped');
    canPlay = true;
});
audio.play();


//similar mouse event listener changes to 
function onMouseEvent(){
    if(canPlay){
        //audio.src ='...'; // providing new source
        audio.play();
    }
};

Answer 2

谢谢大家。

我可以解决问题。我使用了以下代码：

var $audioAnno=0;
function audioAnnotation(x, y){
    var audio = new Audio(y);
    if ($audioAnno==0){
        $audioAnno = 1;
        audio.play();
        audio.addEventListener("ended", function(){ $audioAnno = 0; });
    }
}

停止播放新音频

2 个答案: