网络音频声音不播放答案

【问题标题】：Web Audio sound not playing网络音频声音不播放
【发布时间】：2015-01-24 19:09:53
【问题描述】：

我有下面的代码来播放加载到缓冲区中的特定声音。

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);

以下是我如何调用更改音量方法：

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

这是改变音量的方法：

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;
    };

在我尝试使用增益使音量正常工作之前，它播放得很好，但现在它坏了，我找不到它有什么问题。如果有人能指出我正确的方向，将不胜感激。

【问题讨论】：

你的 onchange="changeVolume(this,sound1Gain)" 应该是 onchange="changeVolume(this,sound1gainNode)" 吗？
我已尝试进行此更改，但我主要担心的是在我添加增益之前播放的声音现在无法播放？

标签： audio web-applications safari volume web-audio-api

【解决方案1】：

这里的示例代码 (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;
};

【讨论】：

以上仅用于使用范围控制音量

【解决方案2】：

这会使用音量小部件呈现网络音频 - 只需使用指向实际文件的路径或指向此类文件的某些 URL 更新 mp3

<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>

【讨论】：

【解决方案3】：

我解决了这个问题，我认为这与线条或标签的顺序有关。我有这个：

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);

现在它可以工作了。可能是新手的错误，但希望这会帮助其他人开始使用网络音频。

【讨论】：