Buffers and Web Audio API -
i'm working on building ambient sound generator college project , running slight issue.
basically have 3 different files user can pause/play in combination, , each pause/play ok. issue if play more 1 sound @ time, 1 of 2 sounds continues play after i've hit stop.
maybe can point me in direction of i'm going wrong and/or resources can learn more api.
<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 block out distractions , focus or relax</p> <p>click buttons below 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>
you need cache currently-playing sound in playsound, , stop prior starting new one.
you shouldn't create buffersourcenodes before fact; create 1 when want start playing.
also, should use start() , stop(), not noteon() , noteoff() - latter deprecated.
try this:
<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]; // entry in array 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 block out distractions , focus or relax</p> <p>click buttons below 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>
Comments
Post a Comment