Generazione del suono al volo con javascript / html5


Answers

Ora puoi utilizzare l' API Web Audio nella maggior parte dei browser ( ad eccezione di IE e Opera Mini ).

Prova questo codice:

// one context per document
var context = new (window.AudioContext || window.webkitAudioContext)();
var osc = context.createOscillator(); // instantiate an oscillator
osc.type = 'sine'; // this is the default - also square, sawtooth, triangle
osc.frequency.value = 440; // Hz
osc.connect(context.destination); // connect it to the destination
osc.start(); // start the oscillator
osc.stop(context.currentTime + 2); // stop 2 seconds after the current time

Se vuoi ridurre il volume, puoi fare qualcosa del genere:

var context = new webkitAudioContext();
var osc = context.createOscillator();
var vol = context.createGain();

vol.gain.value = 0.1; // from 0 to 1, 1 full volume, 0 is muted
osc.connect(vol); // connect osc to vol
vol.connect(context.destination); // connect vol to context destination
osc.start(context.currentTime + 3); // start it three seconds from now

Ho avuto la maggior parte di questo da sperimentare in cromo mentre leggevo il Draft di lavoro API Web Audio , che ho trovato dal link di @brainjam.

Spero che aiuti. Infine, è molto utile ispezionare i vari oggetti nella finestra di ispezione di Chrome (ctrl-shift-i).

Question

È possibile generare un flusso audio costante con javascript / html? Ad esempio, per generare un'onda sinusoidale perpetua, avrei una funzione di callback, che verrebbe chiamata ogni volta che il buffer di output sta per diventare vuoto:

function getSampleAt(timestep)
{
    return Math.sin(timestep);
}

(L'idea è di usare questo per creare un synth interattivo. Non so in anticipo per quanto tempo verrà premuto un tasto, quindi non posso usare un buffer di lunghezza fissa)




Questo è quello che ho cercato per sempre e alla fine riesco a farlo da solo come volevo. Forse ti piacerà anche a te. Semplice scorrimento con frequenza e push on / off HTML

<pre>
<p class="texts">Frekvence [Hz]</p>
<input type="range" id="fIn" min="20" max="20000" step="100" value="1234" oninput="show()" />
<span id="fOut"></span><br>
<input class="off" type="button" id="btn1" value="Start / Stop" />
</div>
</pre>`enter code here

`

JAVASCRIPT


    buttonClickResult = function (){
        var button = document.getElementById('btn1');

        button.onclick = function buttonClicked()  {

            if(button.className=="off")  {
                button.className="on";
                oscOn ();
            }

            else if(button.className=="on")  {
                button.className="off";
                oscillator.disconnect();
            }
        }
    };

    buttonClickResult();

    var oscOn = function(){


        window.AudioContext = window.AudioContext || window.webkitAudioContext;
        var context = new AudioContext();
        var gainNode = context.createGain ? context.createGain() : context.createGainNode();

        //context = new window.AudioContext();
        oscillator = context.createOscillator(),
                oscillator.type ='sine';

        oscillator.frequency.value = document.getElementById("fIn").value;
        //gainNode = createGainNode();
        oscillator.connect(gainNode);
        gainNode.connect(context.destination);
        gainNode.gain.value = 1;
        oscillator.start(0);


    };








Sicuro! Potresti usare il sintetizzatore di toni in questa demo:

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

show();

function show() {
  frequency = document.getElementById("fIn").value;
  document.getElementById("fOut").innerHTML = frequency + ' Hz';

  switch (document.getElementById("tIn").value * 1) {
    case 0: type = 'sine'; break;
    case 1: type = 'square'; break;
    case 2: type = 'sawtooth'; break;
    case 3: type = 'triangle'; break;
  }
  document.getElementById("tOut").innerHTML = type;

  volume = document.getElementById("vIn").value / 100;
  document.getElementById("vOut").innerHTML = volume;

  duration = document.getElementById("dIn").value;
  document.getElementById("dOut").innerHTML = duration + ' ms';
}

function beep() {
  var oscillator = audioCtx.createOscillator();
  var gainNode = audioCtx.createGain();

  oscillator.connect(gainNode);
  gainNode.connect(audioCtx.destination);

  gainNode.gain.value = volume;
  oscillator.frequency.value = frequency;
  oscillator.type = type;

  oscillator.start();

  setTimeout(
    function() {
      oscillator.stop();
    },
    duration
  );
};
frequency
<input type="range" id="fIn" min="40" max="6000" oninput="show()" />
<span id="fOut"></span><br>
type
<input type="range" id="tIn" min="0" max="3" oninput="show()" />
<span id="tOut"></span><br>
volume
<input type="range" id="vIn" min="0" max="100" oninput="show()" />
<span id="vOut"></span><br>
duration
<input type="range" id="dIn" min="1" max="5000" oninput="show()" />
<span id="dOut"></span>
<br>
<button onclick='beep();'>Play</button>

Divertiti!

Ho trovato la soluzione di Houshalter qui: Come faccio a fare il beep Javascript?

È possibile clonare e modificare il codice qui: demo del sintetizzatore di toni su JS Bin

Browser compatibili:

  • Chrome mobile e desktop
  • Firefox mobile e desktop Opera mobile, mini e desktop
  • Browser Android
  • Browser Microsoft Edge
  • Safari su iPhone o iPad

Non compatibile

  • Internet Explorer versione 11 (ma funziona con il browser Edge)