2015-01-23 5 views
0

버퍼에로드 된 특정 사운드를 재생하려면 다음 코드가 필요합니다. 나는 볼륨 게인을 사용하여 작업을 얻기 위해 시도하기 전에웹 오디오 사운드가 재생되지 않습니다.

function changeVolume = function(element,soundNo){ 
     var volume = element.value; 
     var fraction = parseInt(element.value)/parseInt(element.max); 
     // Using an x^2 progression as it gives a better sound than linear. 
     soundNo.gainNode.gain.value = fraction * fraction; 
    }; 

, 그것은 연주했다 : 여기

<input type="range" min="0" max="100" value="70" id="playBtn1_vol" onchange="changeVolume(this,sound1Gain)" style="display:none"> 

이 변경 볼륨 방법입니다 : 여기

sound1.gainNode = context.createGain(); 
sound1.source = context.createBufferSource(); 
sound1.source.buffer = soundBuffers[num]; 
sound1.source.connect(sound1.gainNode); 
sound1.gainNode.connect(context.destination); 
sound1.source.looping = true; 
sound1.source.start(0); 

내가 변화 볼륨 메소드를 호출 방법 그냥 괜찮아요,하지만 지금은 망가졌고, 내가 잘못한 것을 발견 할 수 없습니다. 누구든지 올바른 방향으로 나를 가리킬 수 있다면 매우 감사 할 것입니다.

+0

onchange = "changeVolume (this, sound1Gain)"이 (가) onchange = "changeVolume (this, sound1gainNode)"입니까? –

+0

그 변화를 시도했지만, 주된 관심사는 내가 게인을 추가하기 전에 연주하고 있던 소리가 연주되지 않는다는 것입니다. – JellyTots

답변

0

다음은 도움이 될 샘플 코드 (js)입니다. Reference

var VolumeSample = { 
}; 

// Gain node needs to be mutated by volume control. 
VolumeSample.gainNode = null; 

VolumeSample.play = function() { 
    if (!context.createGain) 
    context.createGain = context.createGainNode; 
    this.gainNode = context.createGain(); 
    var source = context.createBufferSource(); 
    source.buffer = BUFFERS.techno; 

    // Connect source to a gain node 
    source.connect(this.gainNode); 
    // Connect gain node to destination 
    this.gainNode.connect(context.destination); 
    // Start playback in a loop 
    source.loop = true; 
    if (!source.start) 
    source.start = source.noteOn; 
    source.start(0); 
    this.source = source; 
}; 

VolumeSample.changeVolume = function(element) { 
    var volume = element.value; 
    var fraction = parseInt(element.value)/parseInt(element.max); 
    // Let's use an x*x curve (x-squared) since simple linear (x) does not 
    // sound as good. 
    this.gainNode.gain.value = fraction * fraction; 
}; 

VolumeSample.stop = function() { 
    if (!this.source.stop) 
    this.source.stop = source.noteOff; 
    this.source.stop(0); 
}; 

VolumeSample.toggle = function() { 
    this.playing ? this.stop() : this.play(); 
    this.playing = !this.playing; 
}; 
+0

위의 내용은 범위를 사용하여 볼륨을 조절하기위한 것입니다. –

0

이 볼륨 위젯을 사용하여 웹 오디오를 렌더링 - 그냥 실제 파일의 경로와 MP3를 업데이트하거나 일부 URL 내가이 문제를 해결 등

<html> 
<head> 
    <title>render audio with volume control</title> 
</head> 

<body> 

    <p>Volume</p> 
    <input id="volume" type="range" min="0" max="1" step="0.1" value="0.5"/> 

    <script> 

    var audio_context = null; 
    var gain_node = null; 

    window.AudioContext = window.AudioContext || window.webkitAudioContext; 
    audio_context = new AudioContext(); 

    gain_node = audio_context.createGain(); // Declare gain node 
    gain_node.connect(audio_context.destination); // Connect gain node to speakers 

    function render_audio() { 

     var request = new XMLHttpRequest(); 

     var audio_url = "put_your_music_file_here.mp3"; 

     request.open('GET', audio_url, true); // loading local file for now 
     request.responseType = 'arraybuffer'; 

     // Decode asynchronously 
     request.onload = function() { 

      audio_context.decodeAudioData(request.response, function(buffer) { 

       stored_buffer = buffer; // store buffer for replay later 

       var source = audio_context.createBufferSource(); // creates a sound source 
       source.buffer = buffer;     // tell the source which sound to play 
       source.connect(gain_node);  // connect source to speakers 
       source.start(0);       // play the source now 
      }); 
     }; 
     request.send(); 
    } 

    // --- enable volume control for output speakers 

    document.getElementById('volume').addEventListener('change', function() { 

     var curr_volume = this.value; 
     gain_node.gain.value = curr_volume; 

     console.log("curr_volume ", curr_volume); 
    }); 


    // init 
    render_audio(); 

    </script> 

     <body onkeypress="render_audio()"> 

    <button onclick="render_audio()">play_again</button> 

</body> 
</html> 
0

을 가리키는, 나는 그것이 어떻게 생각 라인이나 라벨 등의 주문과 함께. 나는이에 업데이트

sound1.gainNode = context.createGain(); 
sound1.source = context.createBufferSource(); 
sound1.source.buffer = soundBuffers[num]; 
sound1.source.connect(sound1.gainNode); 
sound1.gainNode.connect(context.destination); 
sound1.source.looping = true; 
sound1.source.start(0); 

: 나는이 있었다

 source1 = context.createBufferSource(); 
     gain1 = context.createGain(); 
      gain1.gain.value=parseFloat(document.getElementById('playBtn'+num+'_vol').value);our currently playing sound. 
     source1.buffer = soundBuffers[num]; 
     source1.connect(gain1); 
     gain1.connect(context.destination); 
     source1.looping = true; 
     source1[source1.start ? 'start' : 'noteOn'](0); 

을 그리고 지금은 작동합니다. 신참 실수 였을 지 모르지만, 이것이 Web Audio로 시작하는 다른 사람들을 도울 수 있기를 바랍니다.

관련 문제