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)




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)



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


    };








Related