2015-02-09 189 views
0

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

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

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

回答

0

这是怎么了,我会做到这一点,保持一个标志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.

EDIT2:

相同只有音频对象的东西:

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

感谢modi为您的快速回复。我是偶尔的JavaScript开发人员。所以不是很熟悉所有功能。我正在使用JavaScript Audio对象。我没有使用HTML音频标签。如何在这种情况下应用你的概念。 – Asif 2015-02-09 06:48:22

+0

@Asif更新了答案。现在检查。 – mido 2015-02-09 07:01:47

0

谢谢大家。

我可以解决这个问题。我使用以下代码:

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; }); 
    } 
} 
相关问题