Html 单击时添加EventListener声音
我想做的是一个“addEventListener”函数。单击画布并显示雨滴时，会发出晃动的声音。所以无论你点击多少次，声音都会一直播放 我不知道它叫什么，我的教授建议了它。然而，当我浏览谷歌时，我发现的只是点击按钮或Jquery之类的东西。我不需要按钮，也不允许使用Jquery 和往常一样，我只想朝正确的方向努力 谢谢你们到目前为止给我的帮助Html 单击时添加EventListener声音,html,audio,canvas,html5-audio,Html,Audio,Canvas,Html5 Audio,我想做的是一个“addEventListener”函数。单击画布并显示雨滴时，会发出晃动的声音。所以无论你点击多少次，声音都会一直播放 我不知道它叫什么，我的教授建议了它。然而，当我浏览谷歌时，我发现的只是点击按钮或Jquery之类的东西。我不需要按钮，也不允许使用Jquery 和往常一样，我只想朝正确的方向努力 谢谢你们到目前为止给我的帮助 var canvas; var context; var drops = []; var squares = []; function Drop(x,
var canvas;
var context;
var drops = [];
var squares = [];
function Drop(x,y,color){
this.x = x;
this.y = y;
this.color = color;
this.dy = Math.random();
}
function Square(x,y,w,color){
this.sx = x;
this.sy = y;
this.sw = w;
this.color = color;
this.qy = Math.random();
}
function init(){
canvas = document.getElementById('canvas');
context = canvas.getContext('2d');
alert("Hello!\nClick on the screen for rain drops!");
window.addEventListener('resize', resizeCanvas, false);
window.addEventListener('orientationchange', resizeCanvas, false);
resizeCanvas();
canvas.onclick = function(event){
handleClick(event.clientX, event.clientY);
};
setInterval(handleClick,5);
}
function handleClick(x,y,w){
var found = false;
for(var i = 0; i<drops.length; i++){
d = Math.sqrt((drops[i].x-x)*(drops[i].x-x) + (drops[i].y-y)*(drops[i].y-y));
if(d<=5){
drops.splice(i,1);
found = true;
}
}
fillBackgroundColor();
if(!found){
var colors = ["#000080", "#add8e6", "blue"];
var color = colors[Math.floor(Math.random()*colors.length)];
drops.push(new Drop(x,y,color));
squares.push(new Square(x,y,w,color));
}
for(var i = 0; i<drops.length; i++){
drawDrop(drops[i]);
}
for(var i = 0; i<squares.length; i++){
drawSquare(squares[i]);
}
}
function drawDrop(drop){
context.beginPath();
context.arc(drop.x, drop.y, 5, 0, Math.PI);
context.fillStyle = drop.color;
context.moveTo(drop.x - 5, drop.y);
context.lineTo(drop.x, drop.y - 7);
context.lineTo(drop.x + 5, drop.y);
context.closePath();
context.fill();
if (drop.y + drop.dy > canvas.height || drop.y + drop.dy < 0)
drop.dy != -drop.dy;
drop.y += drop.dy;
};
function drawSquare(square){
var sw = Math.floor(4);
var sx = Math.floor(Math.random() * canvas.width);
var sy = Math.floor(Math.random() * canvas.height);
context.beginPath();
context.rect(sx, sy, sw, sw);
context.fillStyle = '#add8e6';
context.fill();
};
function fillBackgroundColor(){
context.fillStyle = 'gray';
context.fillRect(0,0,canvas.width,canvas.height);
}
function resizeCanvas(){
canvas.width = window.innerWidth - 20;
canvas.height = window.innerHeight - 20;
fillBackgroundColor();
for(var i = 0; i<drops.length; i++){
drawDrop(drops[i]);
}
for(var i = 0; i<squares.length; i++){
drawSquare(squares[i]);
}
}
function degreesToRadians(degrees) {
return (degrees * Math.PI)/180;
}
window.onload = init;
</script>
</head>
<body>
<canvas id='canvas' width=500 height=500></canvas>
</body>
var画布；
var语境；
var下降=[]；
var平方=[]；
功能下降（x、y、颜色）{
这个.x=x；
这个。y=y；
这个颜色=颜色；
this.dy=Math.random（）；
}
功能方块（x、y、w、颜色）{
这个.sx=x；
this.sy=y；
这个.sw=w；
这个颜色=颜色；
this.qy=Math.random（）；
}
函数init（）{
canvas=document.getElementById（'canvas'）；
context=canvas.getContext（'2d'）；
警报（“你好！\n单击屏幕查看雨滴！”）；
addEventListener（'resize'，resizeCanvas，false）；
window.addEventListener（'orientationchange'，resizeCanvas，false）；
调整画布的大小（）；
canvas.onclick=函数（事件）{
handleClick（event.clientX，event.clientY）；
};
设置间隔（handleClick，5）；
}
功能手柄点击（x，y，w）{
var=false；
对于（var i=0；i单击画布或任何元素
要将事件侦听器添加到画布，您只需要元素，您可以通过多种方式从DOM获得它，我使用了getElementById
及其唯一id。然后要添加单击事件，只需附加一个侦听器和要调用的函数
这将在每次单击画布时调用playSound
var canvas = document.getElementById("canvasID"); // get the canvas
canvas.addEventListener("click",playSound); // call playSound when clicked
// See below for the function playSound
您还可以为mousedown和mouseup添加事件侦听器，因为只有在释放鼠标按钮时才会调用click，这可能不是理想的效果
加载声音
由于声音需要加载，这可能需要一些时间，因此您需要有一种方法来指示声音已加载并且已准备好播放。对于这个简单的答案，信号量将起作用。只需设置一个属性来指示加载
var sound = new Audio(); // create the audio
sound.src = "SoundFileURL.mp3"; // set the resource location
sound.oncanplaythrough = function(){ // When the sound has completely loaded
sound.readyToRock = true; // flag sound is ready to play
// I just made it up and can be anything
};
sound.onerror = function(){ // not required but if there are problems this will help debug the problem
console.log("Sound file SoundFileURL.mp3 failed to load.")
};
重复播放声音
playSound
功能。一个音频资源只能作为一个声音播放。您不能在其顶部播放。重复单击时，需要重置声音播放位置，使其再次启动。为此，只需将currentTime
设置为0（声音的开始）并调用方法play
。这样，每次单击都将启动声音或回放并重新开始，无需检查声音是否播放。如果希望声音重叠，则需要加载多个副本，并循环播放每次单击的声音
// assuming sound is in scope from above code
function playSound(){
if(sound && sound.readyToRock){ // check for the sound and if it has loaded
sound.currentTime = 0; // seek to the start
sound.play(); // play it till it ends
}
}
重叠声音
从阵列播放相同的声音，使其重叠。将相同的声音加载到阵列中数次。保留一个变量，该变量将指向用户调用函数（通过单击事件）时要播放的阵列中的下一个声音，然后查找开始并播放声音。增加下一个声音指针，为下一次单击做好准备
这将使声音自动播放。加载声音的次数将取决于用户单击的频率和声音的持续时间。不要过火，因为在某一点上，您无法判断是否启动了新声音或是否重新启动了播放的声音
多次加载相同的声音
var sounds = []; // array to hold the sound
for(var i = 0; i < 4; i++){
var sound = new Audio(); // create the audio
sound.src = "SoundFileURL.mp3"; // set the resource location
sounds.push(sound); // put the sound on the array
}
// assuming that the array sounds has the sounds you want to overlap
// and that they have been loaded so there is no need to check their status
var soundToPlay = 0; // the next sound to play
// the click event function.
function playSound(){
var sound = sounds[soundToPlay % sounds.length]; // get the next sound
// making sure that it
// does not go past the
// of the array
sound.currentTime = 0; // seek to start
sound.play(); // play it
soundToPlay += 1; // point to the next sound to play
}
我理解你提供给我的这个代码是如何工作的。但是我已经有了一个雨滴的点击手柄。我需要将它们添加到一个大的函数中吗？它们能够像那样一起工作吗？谢谢你也花时间回答我的问题。@Blindman67提高并标记了很好的答案，但是我有一个关于sound.src的问题部分。当我设置src
时，我需要sound.load（）
在我sound.play（）
之前。是否sounds.push（sound）
注意加载？@JazzehPlatt您可以让click函数执行任意操作。您可以从现有的rain drop函数调用playSound函数，或者如果您愿意，在画布上添加第二个事件侦听器，则单击。这两种方法都可以。@zer00ne您不必在设置src时使用sound.load
在加载过程中。重要的是要知道，当你设置src时，在声音加载并准备播放之前会有一个延迟。有关HTML音频元素的所有需要了解的信息，请参阅刚才意识到你在我的另一个问题上帮了我。您好，感谢您的耐心。我将此代码放置在新画布中，但我没有听到任何声音点击命令。我甚至把它改成了按键笔划，什么都没有。