个人中心
gpt4 book ai didi

html - 单击 addEventListener 声音

转载 作者：太空宇宙 更新时间：2023-11-04 16:12:27 24 4
gpt4 key购买 nike

我想要做的是一个“addEventListener”函数。单击 Canvas 并出现雨滴时，会发出晃动声。所以无论你点击多少次，声音都会一直播放。

我不知道它叫什么，是我的教授建议的。然而，当我梳理谷歌时，我发现的只是按钮点击或 Jquery 的东西。我不想要按钮，也不允许我使用 Jquery。

一如既往，我只寻求正确方向的插入。

感谢你们迄今为止给予我的所有帮助。 

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>

最佳答案

点击 Canvas 或任何元素

要向 Canvas 添加事件监听器，您只需要元素，您可以通过多种方式从 DOM 中获取它，我使用了 getElementById 及其唯一 ID。然后添加一个 click 事件，只需附加一个监听器和要调用的函数。

每次单击 Canvas 时都会调用 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
}

关于html - 单击 addEventListener 声音，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34254616/

24 4 0
文章推荐： javascript - 如何从纯 javascript 文件调用 struts 操作
文章推荐： C++ 与 '*foo 中的 'operator=' 不匹配
文章推荐： html - 是什么影响了 和 元素的宽度？
文章推荐： javascript - 使用 Angular ng-class 更改 uiview 时，如何将容器类更改为 container-fluid？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com