Fatal编程技术网
  • javascript/
  • Javascript Web音频API的音量控制和缓冲问题

Javascript Web音频API的音量控制和缓冲问题

javascript audio

Javascript Web音频API的音量控制和缓冲问题,javascript,audio,volume,web-audio-api,buffering,Javascript,Audio,Volume,Web Audio Api,Buffering,我在使用Web音频API编写应用程序时遇到了一些问题 我正在尝试使用Web Audio API播放多个声音，每个声音都有一个单独的音量控制，可以同时播放多个不同的声音，但我不知道如何实现它 我知道如何实现通用音量控制，但希望能够增加/减少单个声音。我也有一个问题，当我播放多个声音时，我似乎无法阻止所有声音。。一个人的声音似乎总是卡在某个地方 任何关于如何更新以下代码的建议都将不胜感激 <head> <meta charset="UTF-8"> &

我在使用Web音频API编写应用程序时遇到了一些问题

我正在尝试使用Web Audio API播放多个声音，每个声音都有一个单独的音量控制，可以同时播放多个不同的声音，但我不知道如何实现它

我知道如何实现通用音量控制，但希望能够增加/减少单个声音。我也有一个问题，当我播放多个声音时，我似乎无法阻止所有声音。。一个人的声音似乎总是卡在某个地方

任何关于如何更新以下代码的建议都将不胜感激

    <head> 
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/loopy_styles.css" />
    <script>
        context = new (window.AudioContext || window.webkitAudioContext)();

        //We set up an array of buffers to store our sounds in, with an extra entry as dummy '0' entry
        var soundBuffers = [null,null,null,null,null,null];

        //We load our sounds into the buffer when the page is opened.
        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 to play sound, take in a number to represent each sound icon.
        function play_sound(num){
          if (num) {
            //Shows the paused version of button, hides the play version of the button.
            document.getElementById('playBtn'+num+'_play').style.display = 'none';
            document.getElementById('playBtn'+num+'_stop').style.display = 'block';
            //Sets the currently playing sound to the number supplied to the function.
            currentlyPlayingSoundNum = num;
            //Creates buffer for sound.
            currentlyPlayingSound = context.createBufferSource();
            //Sets the sound to loop continuously so we have seemless play-back.
            currentlyPlayingSound.looping = true;
            //Sends the sound at spot num in our buffer array to the buffer for our currently playing sound.
            currentlyPlayingSound.buffer = soundBuffers[num];
            currentlyPlayingSound.connect(context.destination);
            //Start playing the sound.
            currentlyPlayingSound.start(0);
          }
        }
        //Function to stop sound, take in a number to represent each sound icon.
        function stop_sound(num){
          if(num){
            document.getElementById('playBtn'+num+'_play').style.display = 'block';
            document.getElementById('playBtn'+num+'_stop').style.display = 'none';
          }
          if (currentlyPlayingSound) {
            //Shows the play version of button, hides the paused version of the button.
            document.getElementById('playBtn'+currentlyPlayingSoundNum+'_play').style.display = 'block';
            document.getElementById('playBtn'+currentlyPlayingSoundNum+'_stop').style.display = 'none';
            //Stops playing the currently playing sound.
            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(1);" 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(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="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(5);" 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）（）；
//我们设置了一个缓冲区数组来存储我们的声音，其中有一个额外的条目作为伪“0”条目
var soundBuffers=[null，null，null，null，null，null]；
//打开页面时，我们将声音加载到缓冲区。
window.onload=函数（）{
loadSound（“声音/火灾测试1.wav”，1）；
负载声音（“声音/风力测试波形”，2）；
loadSound（“声音/雨水测试1.wav”，3）；
loadSound（'sounds/stream.mp3'，4）；
负载声音（“声音/弹簧测试波形”，5）；
};
var currentlyPlayingSoundNum=0；
var currentlyPlayingSound=null；
//函数播放声音，输入一个数字表示每个声音图标。
功能播放声音（num）{
if（num）{
//显示按钮的暂停版本，隐藏按钮的播放版本。
document.getElementById（'playBtn'+num+'u play'）。style.display='none'；
document.getElementById（'playBtn'+num+'u-stop'）。style.display='block'；
//将当前播放的声音设置为提供给函数的数字。
currentlyPlayingSoundNum=num；
//为声音创建缓冲区。
currentlyPlayingSound=context.createBufferSource（）；
//将声音设置为连续循环，这样我们就可以进行无缝播放。
currentlyPlayingSound.looping=true；
//将缓冲区数组中spot num处的声音发送到当前播放声音的缓冲区。
currentlyPlayingSound.buffer=声音缓冲区[num]；
currentlyPlayingSound.connect（context.destination）；
//开始播放声音。
当前播放声音。开始（0）；
}
}
//函数停止声音，输入一个数字表示每个声音图标。
功能停止_声音（num）{
if（num）{
document.getElementById（'playBtn'+num+'u play'）。style.display='block'；
document.getElementById（'playBtn'+num+'u-stop'）。style.display='none'；
}
如果（当前播放声音）{
//显示按钮的播放版本，隐藏按钮的暂停版本。
document.getElementById（'playBtn'+currentlyPlayingSoundNum+''u play'）。style.display='block'；
document.getElementById（'playBtn'+currentlyPlayingSoundNum+''U stop'）。style.display='none'；
//停止播放当前播放的声音。
当前播放声音停止（0）；
currentlyPlayingSound=null；
currentlyPlayingSoundNumber=0；
}
}
函数loadSound（url、bufferNum）{
var request=new XMLHttpRequest（）；
打开（'GET'，url，true）；
request.responseType='arraybuffer'；
request.onload=函数（）{
var successCallback=函数（缓冲区）{
soundBuffers[bufferNum]=缓冲区；
}
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而不是


currentlyPlayingSound.connect(context.destination);


您只需创建另一个GainNode并将其链接到：


var gain = context.createGain();
gain.gain.value = /*insert your gain variable here */;
currentlyPlayingSound.connect(gain);
gain.connect(context.destination);


您可能希望将增益节点缓存到某个位置（以便可以使用滑块等）