两个声音对立发出会相互减弱吗
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了两个声音对立发出会相互减弱吗相关的知识,希望对你有一定的参考价值。
参考技术A 可以。首先,要知道声音是一种波系一种横波而声音互相抵消系因为干涉当两个声音的波峰同波谷相撞,就发生相消干涉即是两个一样的声音相撞时,就发生声音互相抵消的现象了。科学家研究发现两个声源发出的声音可以互相抵消这是用 的方法开发的一种新的反噪声技术
谢谢你的关注
波的叠加。
当两个声波的波长、振幅都一样,而相位相反的时候,加起来振幅就是0,也就抵消掉了。比如cos x和cos(x+π)的函数图像就是波长、振幅都一样,相位相反。
addEventListener 单击时发出声音
【中文标题】addEventListener 单击时发出声音【英文标题】:addEventListener sound on click 【发布时间】:2015-12-13 18:20:19 【问题描述】:我想做的是一个“addEventListener”函数。单击画布并出现雨滴时,会发出晃动的声音。所以无论你点击多少次,声音都会一直播放。
我不知道它叫什么,是我的教授建议的。然而,当我梳理谷歌时,我发现的只是按钮点击或 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>
【问题讨论】:
【参考方案1】:单击画布或任何元素
要向画布添加事件监听器,您只需要元素,您可以通过多种方式从 DOM 中获取它,我使用了 getElementById
及其唯一 ID。然后添加一个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 添加事件侦听器,因为仅在释放鼠标按钮时才会调用 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.play()
之前设置sound.load()
。 sounds.push(sound);
负责加载吗?
@JazzehPlatt 您可以让点击功能随心所欲。您可以从现有的雨滴函数中调用 playSound 函数,或者如果您喜欢将第二个事件侦听器添加到画布单击。这两种方式都可以正常工作。
@zer00ne 您不应该使用sound.load
,因为设置 src 将开始加载。重要的是要知道,当您设置 src 时,在声音加载并准备好播放之前会有一段延迟。请参阅developer.mozilla.org/en-US/docs/Web/HTML/Element/audio 了解有关 HTML 音频元素的所有信息
刚刚意识到您在我的另一个问题上帮助了我。您好,感谢您的耐心等待。我将此代码放在一个新的画布中,但单击命令没有任何声音。我什至把它改成了击键,什么都没有。以上是关于两个声音对立发出会相互减弱吗的主要内容,如果未能解决你的问题,请参考以下文章