Audio 缓冲区和Web音频API
我目前正在为一个大学项目建造一个环境声音发生器，遇到了一个小问题 基本上，我目前有3个不同的文件，用户可以暂停/播放组合，每个暂停/播放ok。唯一的问题是，如果我一次播放多个声音，我的两个声音中的一个会在我点击停止后继续播放 也许有人能指出我的错误方向和/或我可以了解更多API的资源Audio 缓冲区和Web音频API,audio,web-audio-api,Audio,Web Audio Api,我目前正在为一个大学项目建造一个环境声音发生器，遇到了一个小问题 基本上，我目前有3个不同的文件，用户可以暂停/播放组合，每个暂停/播放ok。唯一的问题是，如果我一次播放多个声音，我的两个声音中的一个会在我点击停止后继续播放 也许有人能指出我的错误方向和/或我可以了解更多API的资源 <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/loopy_styles.css" /&
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/loopy_styles.css" />
<!--<script type="text/javascript" src="js/loop_functions.js"></script>-->
<script>
context = new (window.AudioContext || window.webkitAudioContext)();
var soundBuffer1 = null;
var soundBuffer2 = null;
var soundBuffer3 = null;
var soundBuffer4 = null;
var soundBuffer5 = null;
window.onload = function() {
create_buffers();
};
function create_buffers(){
soundBufferSourceNode1 = context.createBufferSource();
soundBufferSourceNode1.looping = true;
soundBufferSourceNode2 = context.createBufferSource();
soundBufferSourceNode2.looping = true;
soundBufferSourceNode3 = context.createBufferSource();
soundBufferSourceNode3.looping = true;
soundBufferSourceNode4 = context.createBufferSource();
soundBufferSourceNode4.looping = true;
soundBufferSourceNode5 = context.createBufferSource();
soundBufferSourceNode5.looping = true;
};
loadSound('sounds/fire_test1.wav', 1);
loadSound('sounds/wind_test.wav', 2);
loadSound('sounds/rain_test1.wav', 3);
loadSound('sounds/stream.mp3', 4);
loadSound('sounds/spring_test.wav', 5);
function play_sound1(){
document.getElementById('playBtn1_play').style.display = 'none';
document.getElementById('playBtn1_stop').style.display = 'block';
playSound(soundBuffer1, soundBufferSourceNode1);
}
function stop_sound1(){
document.getElementById('playBtn1_play').style.display = 'block';
document.getElementById('playBtn1_stop').style.display = 'none';
stopSound(soundBufferSourceNode1);
create_buffers();
}
function play_sound2(){
document.getElementById('playBtn2_play').style.display = 'none';
document.getElementById('playBtn2_stop').style.display = 'block';
playSound(soundBuffer2, soundBufferSourceNode2);
p2=true;
};
function stop_sound2(){
document.getElementById('playBtn2_play').style.display = 'block';
document.getElementById('playBtn2_stop').style.display = 'none';
p2=false;
stopSound(soundBufferSourceNode2);
create_buffers();
};
function play_sound3(){
document.getElementById('playBtn3_play').style.display = 'none';
document.getElementById('playBtn3_stop').style.display = 'block';
p3=true;
playSound(soundBuffer3, soundBufferSourceNode3);
}
function stop_sound3(){
document.getElementById('playBtn3_play').style.display = 'block';
document.getElementById('playBtn3_stop').style.display = 'none';
p3=false;
stopSound(soundBufferSourceNode3);
create_buffers();
}
function playSound(buffer, bufferSourceNode) {
bufferSourceNode.buffer = buffer;
bufferSourceNode.connect(context.destination);
bufferSourceNode.noteOn(0);
};
function stopSound(bufferSourceNode) {
bufferSourceNode.noteOff(0);
};
function loadSound(url, bufferNum) {
var request = new XMLHttpRequest();
request.open('GET', url, true);
request.responseType = 'arraybuffer';
request.onload = function() {
var successCallback = function(buffer) {
switch(bufferNum) {
case 1:
soundBuffer1 = buffer;
break;
case 2:
soundBuffer2 = buffer;
break;
case 3:
soundBuffer3 = buffer;
break;
case 4:
soundBuffer4 = buffer;
break;
case 5:
soundBuffer5 = buffer;
break;
}
}
var errorCallback = function(e) {
console.log(e);
}
context.decodeAudioData(request.response, successCallback, errorCallback);
}
request.send();
}
</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">
<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="btn1">
<input type="image" class="pp_img" src="img/fire-pause.png" name="Fire" id="playBtn1_play" onclick="play_sound1();" />
<input type="image" class="pp_img" src="img/fire-play.png" name="Fire" id="playBtn1_stop" onclick="stop_sound1();" style="display:none" />
<p><input type="range" min="0" max="100" value="100" onchange="sample.changeVolume();"> Volume</p>
</div>
<div id="btn2">
<input type="image" class="pp_img" src="img/wind-pause.png" name="Wind" id="playBtn2_play" onclick="play_sound2();" />
<input type="image" class="pp_img" src="img/wind-play.png" name="Wind" id="playBtn2_stop" onclick="stop_sound2();" 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_sound3();"/>
<input type="image" class="pp_img" src="img/rain-play.png" name="Rain" id="playBtn3_stop" onclick="stop_sound3();" 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_sound4();"/>
<input type="image" class="pp_img" src="img/stream-play.png" name="Stream" id="playBtn4_stop" onclick="stop_sound4();" 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="Rain" id="playBtn5_play" onclick="play_sound5();"/>
<input type="image" class="pp_img" src="img/forest-play.png" name="Rain" id="playBtn5_stop" onclick="stop_sound5();" style="display:none" />
<p><input type="range" min="0" max="100" value="100" onchange="sample.changeVolume();"> Volume</p>
</div>
</div>
</div>
</body>
<script>
function refreshData(){
x = 1; // x = seconds
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*1000);
}
refreshData(); // execute function
</script>
context=new（window.AudioContext | | window.webkitadiocontext）（）；
var soundBuffer1=null；
var soundBuffer2=null；
var soundBuffer3=null；
var soundBuffer4=null；
var soundBuffer5=null；
window.onload=函数（）{
创建缓冲区（）；
};
函数create_buffers（）{
soundBufferSourceNode1=context.createBufferSource（）；
soundBufferSourceNode1.looping=true；
soundBufferSourceNode2=context.createBufferSource（）；
soundBufferSourceNode2.looping=true；
soundBufferSourceNode3=context.createBufferSource（）；
soundBufferSourceNode3.looping=true；
soundBufferSourceNode4=context.createBufferSource（）；
soundBufferSourceNode4.looping=true；
soundBufferSourceNode5=context.createBufferSource（）；
soundBufferSourceNode5.looping=true；
};
loadSound（“声音/火灾测试1.wav”，1）；
负载声音（“声音/风力测试波形”，2）；
loadSound（“声音/雨水测试1.wav”，3）；
loadSound（'sounds/stream.mp3'，4）；
负载声音（“声音/弹簧测试波形”，5）；
功能播放_sound1（）{
document.getElementById（'playBtn1_play'）。style.display='none'；
document.getElementById（'playBtn1_-stop'）。style.display='block'；
播放声音（soundBuffer1、soundBufferSourceNode1）；
}
功能停止_sound1（）{
document.getElementById（'playBtn1_play'）。style.display='block'；
document.getElementById（'playBtn1_-stop'）。style.display='none'；
停止声音（soundBufferSourceNode1）；
创建缓冲区（）；
}
功能播放_sound2（）{
document.getElementById（'playBtn2_play'）。style.display='none'；
document.getElementById（'playBtn2_-stop'）。style.display='block'；
播放声音（soundBuffer2，soundBufferSourceNode2）；
p2=真；
};
功能停止_sound2（）{
document.getElementById（'playBtn2_play'）。style.display='block'；
document.getElementById（'playBtn2_-stop'）。style.display='none'；
p2=假；
停止声音（soundBufferSourceNode2）；
创建缓冲区（）；
};
功能播放_sound3（）{
document.getElementById（'playBtn3_play'）.style.display='none'；
document.getElementById（'playBtn3_-stop'）。style.display='block'；
p3=真；
播放声音（soundBuffer3、soundBufferSourceNode3）；
}
功能停止_sound3（）{
document.getElementById（'playBtn3_play'）.style.display='block'；
document.getElementById（'playBtn3_-stop'）。style.display='none'；
p3=假；
停止声音（soundBufferSourceNode3）；
创建缓冲区（）；
}
播放声音功能（缓冲区、缓冲源节点）{
bufferSourceNode.buffer=缓冲区；
连接（context.destination）；
bufferSourceNode.noteOn（0）；
};
功能停止声音（bufferSourceNode）{
bufferSourceNode.noteOff（0）；
};
函数loadSound（url、bufferNum）{
var request=new XMLHttpRequest（）；
打开（'GET'，url，true）；
request.responseType='arraybuffer'；
request.onload=函数（）{
var successCallback=函数（缓冲区）{
开关（bufferNum）{
案例1：
soundBuffer1=缓冲区；
打破
案例2：
soundBuffer2=缓冲区；
打破
案例3：
soundBuffer3=缓冲区；
打破
案例4：
soundBuffer4=缓冲区；
打破
案例5：
soundBuffer5=缓冲区；
打破
}
}
var errorCallback=函数（e）{
控制台日志（e）；
}
解码音频数据（request.response、successCallback、errorCallback）；
}
request.send（）；
}
环境声音发生器
环境声音发生器
将周围的声音混合在一起，以排除干扰，帮助你集中注意力或放松
单击下面的按钮开始
卷
卷
卷
卷
卷
函数refreshData（）{
x=1；//x=s
var d=新日期（）
var h=d.getHours（）；
var m=d.getMinutes（）；
var s=d.getSeconds（）；
如果（h您需要在playSound中缓存当前播放的任何声音，并在启动新声音之前停止播放
您不应该在事实发生之前创建所有这些buffersourcenodes；只要在您想要开始播放时创建一个即可
此外，您应该使用start（）和stop（），而不是noteOn（）和noteOff（）——后者不推荐使用
试试这个：
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/loopy_styles.css" />
<!--<script type="text/javascript" src="js/loop_functions.js"></script>-->
<script>
context = new (window.AudioContext || window.webkitAudioContext)();
var soundBuffers = [null,null,null,null,null,null]; // extra entry in array as dummy '0' entry
window.onload = function() {
loadSound('sounds/fire_test1.wav', 1);
loadSound('sounds/wind_test.wav', 2);
loadSound('sounds/rain_test1.wav', 3);
loadSound('sounds/stream.mp3', 4);
loadSound('sounds/spring_test.wav', 5);
};
var currentlyPlayingSoundNum = 0;
var currentlyPlayingSound = null;
function play_sound(num){
stop_any_currently_playing_sound();
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(){
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 src="http://code.jquery.com/jquery-latest.js"></script>
<title>Ambient Sound Generator</title>
</head>
<body>
<div class="background">
<div id="intro-text">
<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="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();" style="display:none" />
<p><input type="range" min="0" max="100" value="100" onchange="sample.changeVolume();"> Volume</p>
</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();" 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();" 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();" 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="Rain" id="playBtn5_play" onclick="play_sound(5);"/>
<input type="image" class="pp_img" src="img/forest-play.png" name="Rain" id="playBtn5_stop" onclick="stop_sound();" style="display:none" />
<p><input type="range" min="0" max="100" value="100" onchange="sample.changeVolume();"> Volume</p>
</div>
</div>
</div>
</body>
<script>
function refreshData(){
x = 1; // x = seconds
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*1000);
}
refreshData(); // execute function
</script>
context=new（window.AudioContext | | window.webkitadiocontext）（）；
var soundBuffers=[null，null，null，null，null]；//数组中作为伪“0”项的额外项
window.onload=函数（）{
loadSound（“声音/火灾测试1.wav”，1）；
负载声音（“声音/风力测试波形”，2）；