<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/loopy_styles.css" />
<script>
context = new (window.AudioContext || window.webkitAudioContext)();
var soundBuffers = [null,null,null,null,null,null,null];
window.onload = function() {
loadSound('sounds/fire_test1.wav', 1);
loadSound('sounds/wind_test.wav', 2);
loadSound('sounds/rain_test.wav', 3);
loadSound('sounds/stream.mp3', 4);
loadSound('sounds/spring_test.wav', 5);
loadSound('sounds/thunder.mp3', 6);
};
var currentlyPlayingSoundNum = 0;
var currentlyPlayingSound = null;
function play_sound(num){
if (num) {
document.getElementById('playBtn'+num+'_play').style.display = 'none';
document.getElementById('playBtn'+num+'_stop').style.display = 'block';
currentlyPlayingSoundNum = num;
currentlyPlayingSound = context.createBufferSource();
currentlyPlayingSound.looping = true;
currentlyPlayingSound.buffer = soundBuffers[num];
currentlyPlayingSound.connect(context.destination);
currentlyPlayingSound.start(0);
}
}
function stop_sound(num){
if(num){
document.getElementById('playBtn'+num+'_play').style.display = 'block';
document.getElementById('playBtn'+num+'_stop').style.display = 'none';
}
if (currentlyPlayingSound) {document.getElementById('playBtn'+currentlyPlayingSoundNum+'_play').style.display = 'block';
document.getElementById('playBtn'+currentlyPlayingSoundNum+'_stop').style.display = 'none';
currentlyPlayingSound.stop(0);
currentlyPlayingSound = null;
currentlyPlayingSoundNumber = 0;
}
}
function loadSound(url, bufferNum) {
var request = new XMLHttpRequest();
request.open('GET', url, true);
request.responseType = 'arraybuffer';
request.onload = function() {
var successCallback = function(buffer) {
soundBuffers[bufferNum] = buffer;
}
var errorCallback = function(e) {
console.log(e);
}
context.decodeAudioData(request.response, successCallback, errorCallback);
}
request.send();
}
</script>
<script type="text/javascript">
var whiteNoise = context.createWhiteNoise();
var whiteGain = context.createGainNode();
whiteGain.gain.value = 70;
whiteNoise.connect(whiteGain);
whiteGain.connect(audioContext.destination);
var pinkNoise = context.createPinkNoise();
var pinkGain = context.createGainNode();
pinkGain.gain.value = 70;
pinkNoise.connect(pinkGain);
pinkGain.connect(audioContext.destination);
var brownNoise = context.createBrownNoise();
var brownGain = context.createGainNode();
brownGain.gain.value = 70;
brownNoise.connect(brownGain);
brownGain.connect(context.destination);
var toggleDemo = function(colour, gain) {
var handler = function(e) {
if (gain.gain.value == 0.0) {
document.getElementById('playBtn'+colour+'_play').style.display = 'none';
document.getElementById('playBtn'+colour+'_stop').style.display = 'block';
gain.gain.value = 0.7;
} else {
document.getElementById('playBtn'+colour+'_play').style.display = 'block';
document.getElementById('playBtn'+colour+'_stop').style.display = 'none';
gain.gain.value = 0.0;
}
};
return handler;
};
</script>
<script>
(function(AudioContext) {
AudioContext.prototype.createWhiteNoise = function(bufferSize) {
bufferSize = bufferSize || 4096;
var node = this.createScriptProcessor(bufferSize, 1, 1);
node.onaudioprocess = function(e) {
var output = e.outputBuffer.getChannelData(0);
for (var i = 0; i < bufferSize; i++) {
output[i] = Math.random() * 2 - 1;
}
}
return node;
};
AudioContext.prototype.createPinkNoise = function(bufferSize) {
bufferSize = bufferSize || 4096;
var b0, b1, b2, b3, b4, b5, b6;
b0 = b1 = b2 = b3 = b4 = b5 = b6 = 0.0;
var node = this.createScriptProcessor(bufferSize, 1, 1);
node.onaudioprocess = function(e) {
var output = e.outputBuffer.getChannelData(0);
for (var i = 0; i < bufferSize; i++) {
var white = Math.random() * 2 - 1;
b0 = 0.99886 * b0 + white * 0.0555179;
b1 = 0.99332 * b1 + white * 0.0750759;
b2 = 0.96900 * b2 + white * 0.1538520;
b3 = 0.86650 * b3 + white * 0.3104856;
b4 = 0.55000 * b4 + white * 0.5329522;
b5 = -0.7616 * b5 - white * 0.0168980;
output[i] = b0 + b1 + b2 + b3 + b4 + b5 + b6 + white * 0.5362;
output[i] *= 0.11; // (roughly) compensate for gain
b6 = white * 0.115926;
}
}
return node;
};
AudioContext.prototype.createBrownNoise = function(bufferSize) {
bufferSize = bufferSize || 4096;
var lastOut = 0.0;
var node = this.createScriptProcessor(bufferSize, 1, 1);
node.onaudioprocess = function(e) {
var output = e.outputBuffer.getChannelData(0);
for (var i = 0; i < bufferSize; i++) {
var white = Math.random() * 2 - 1;
output[i] = (lastOut + (0.02 * white)) / 1.02;
lastOut = output[i];
output[i] *= 3.5; // (roughly) compensate for gain
}
}
return node;
};
})(window.AudioContext || window.webkitAudioContext);
</script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<title>Ambient Sound Generator</title>
</head>
<body>
<div class="background">
<div id="intro-text">
<!--This code give us our sharing buttons-->
<div id="share-buttons">
<span class='st_facebook_large' displayText='Facebook'></span>
<span class='st_twitter_large' displayText='Tweet'></span>
<span class='st_tumblr_large' displayText='Tumblr'></span>
<span class='st_stumbleupon_large' displayText='StumbleUpon'></span>
<span class='st_linkedin_large' displayText='LinkedIn'></span>
</div>
<h1 id="site-title">Ambient Sound Generator</h1>
<p>Mix ambient sounds together to block out distractions and help you focus or relax</p>
<p>Click the buttons below to begin</p>
</div>
<div id="button-container">
<div id="vol_main">
<input type="range" min="0" max="100" value="70" onchange="sample.changeVolume();">
<p>Volume</p>
</div>
<div id="btn1">
<input type="image" class="pp_img" src="img/fire-pause.png" name="Fire" id="playBtn1_play" onclick="play_sound(1);"/>
<input type="image" class="pp_img" src="img/fire-play.png" name="Fire" id="playBtn1_stop" onclick="stop_sound(1);" style="display:none"/>
</div>
<div id="btn2">
<input type="image" class="pp_img" src="img/wind-pause.png" name="Wind" id="playBtn2_play" onclick="play_sound(2);" />
<input type="image" class="pp_img" src="img/wind-play.png" name="Wind" id="playBtn2_stop" onclick="stop_sound(2);" style="display:none"/>
<!--<p><input type="range" min="0" max="100" value="100" onchange="sample.changeVolume();">Volume</p>-->
</div>
<div id="btn3">
<input type="image" class="pp_img" src="img/rain-pause.png" name="Rain" id="playBtn3_play" onclick="play_sound(3);"/>
<input type="image" class="pp_img" src="img/rain-play.png" name="Rain" id="playBtn3_stop" onclick="stop_sound(3);" style="display:none"/>
<!--<p><input type="range" min="0" max="100" value="100" onchange="sample.changeVolume();">Volume</p>-->
</div>
<div id="btn4">
<input type="image" class="pp_img" src="img/stream-pause.png" name="Stream" id="playBtn4_play" onclick="play_sound(4);"/>
<input type="image" class="pp_img" src="img/stream-play.png" name="Stream" id="playBtn4_stop" onclick="stop_sound(4);" style="display:none"/>
<!--<p><input type="range" min="0" max="100" value="100" onchange="sample.changeVolume();">Volume</p>-->
</div>
<div id="btn6">
<input type="image" class="pp_img" src="img/thunder-pause.png" name="Thunder" id="playBtn6_play" onclick="play_sound(6);"/>
<input type="image" class="pp_img" src="img/thunder-play.png" name="Thunder" id="playBtn6_stop" onclick="stop_sound(6);" style="display:none"/> <!--<p><input type="range" min="0" max="100" value="100" onchange="sample.changeVolume();">Volume</p>-->
</div>
<div id="btn5">
<input type="image" class="pp_img" src="img/forest-pause.png" name="Spring" id="playBtn5_play" onclick="play_sound(5);"/>
<input type="image" class="pp_img" src="img/forest-play.png" name="Spring" id="playBtn5_stop" onclick="stop_sound(5);" style="display:none"/>
<!--<p><input type="range" min="0" max="100" value="100" onchange="sample.changeVolume();">Volume</p>-->
</div>
<div id="btn7">
<input type="image" class="pp_img" src="img/whitenoise-pause.png" name="White" id="playBtnWhite_play" onclick="toggleDemo(white, whiteGain)"/>
<input type="image" class="pp_img" src="img/whitenoise-play.png" name="White" id="playBtnWhite_stop" onclick="toggleDemo(white, whiteGain);" style="display:none"/>
<!--<p><input type="range" min="0" max="100" value="100" onchange="sample.changeVolume();">Volume</p>-->
</div>
<div id="btn8">
<input type="image" class="pp_img" src="img/pinknoise-pause.png" name="Pink" id="playBtnPink_play" onclick="toggleDemo(pink, pinkGain);"/>
<input type="image" class="pp_img" src="img/pinknoise-play.png" name="Pink" id="playBtn8Pink_stop" onclick="toggleDemo(pink, pinkGain);" style="display:none"/>
<!--<p><input type="range" min="0" max="100" value="100" onchange="sample.changeVolume();">Volume</p>-->
</div>
<div id="btn9">
<input type="image" class="pp_img" src="img/brownnoise-pause.png" name="Brown" id="playBtnBrown_play" onclick="toggleDemo(brown, brownGain);"/>
<input type="image" class="pp_img" src="img/brownnoise-play.png" name="Brown" id="playBtnBrown_stop" onclick="toggleDemo(brown, brownGain);" style="display:none"/>
<!--<p><input type="range" min="0" max="100" value="100" onchange="sample.changeVolume();">Volume</p>-->
</div>
</div>
</div>
</body>
<!--Code for changing background colour, using the time settings-->
<script>
function refreshData(){
x = 1;
var d = new Date()
var h = d.getHours();
var m = d.getMinutes();
var s = d.getSeconds();
if (h<=9) {h = '0'+h};
if (m<=9) {m = '0'+m};
if (s<=9) {s = '0'+s};
var color = '#'+h+m+s;
$("div.background").css("background-color", color);
$("p#hex").text(color);
setTimeout(refreshData, x*100);
}
refreshData();
</script>
如果有人可以提供帮助，我会提出一些疑问：
答案 0 :(得分：1)
1＆amp; 2）createGainNode - ＆gt; createGain。