addEventListener звук при нажатии

Что я хочу сделать, это функция 'addEventListener'. Когда клик нажимается, и появляется капля дождя, звучит дрожащий звук. Поэтому, независимо от того, сколько раз вы нажимаете, звук всегда будет воспроизводиться.addEventListener звук при нажатии

Я понятия не имел, как это называется, и мой профессор предложил это. Однако, когда я расчесывал google, все, что я нахожу, это щелчки на кнопках или вещи 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>

источник

2015-12-13 Jazzeh Platt

Щелчок холст или любой элемент

Чтобы добавить прослушиватель событий к полотну нужно просто элемент, вы можете получить его из DOM во многих отношениях, я использовал getElementById и его уникальный идентификатор. Затем, чтобы добавить событие click, просто присоедините слушателя и функцию, которую нужно вызвать.

Это вызовет 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, как щелчок вызывается только тогда, когда пользователь отпускает кнопку мыши, которая не может быть желаемого эффекта.

Загрузка звука

как звук должен быть загружен, и это может занять некоторое время, вам нужно иметь способ указания, что звук загружен и готов играть. Для этого простого ответа семафор сделает трюк. Просто установите свойство для указания загрузки.

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 
}

источник

2015-12-13 19:35:49 Blindman67

Я понимаю, как это код, который вы предоставили мне работы. Но у меня уже есть ручка для дождя. Нужно ли добавлять их вместе в одну большую функцию? Могут ли они работать вместе? Благодарим вас за то, что нашли время ответить на мой вопрос. –

@ Blindman67 поднял и отметил хороший ответ, но у меня есть вопрос о части 'sound.src'. Когда я устанавливаю 'src', мне нужно' sound.load() 'перед тем, как я' sound.play() '. «Sounds.push» (звук), «позаботиться о загрузке? – zer00ne

@JazzehPlatt У вас может быть функция щелчка делать столько, сколько захотите. Вы можете вызвать функцию playSound из существующей функции капли дождя, или если вам нравится добавить второй прослушиватель событий к холсту. Оба способа будут работать нормально. – Blindman67

addEventListener звук при нажатии

ответ

Смежные вопросы