Générer du son à la volée avec javascript / html5

Question

Est-il possible de générer un flux de son constant avec javascript / html? Par exemple, pour générer une onde sinusoïdale perpétuelle, j'aurais une fonction de rappel, qui serait appelée chaque fois que le tampon de sortie est sur le point de devenir vide:

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

(L'idée est de l'utiliser pour créer un synthétiseur interactif. Je ne sais pas à l'avance combien de temps une touche sera enfoncée, je ne peux donc pas utiliser de tampon de longueur fixe)

Answer 1

Vous pouvez le faire dans la plus récente de Chrome (je n'ai pas testé d'autres navigateurs encore).

Essayer ce code:

var context = new webkitAudioContext(); // one context per document
var osc = context.createOscillator(); // instantiate an oscillator
                                      // (defaults to sin 440Hz)
osc.connect(context.destination); // connect it to the destination
osc.start(0); // start the oscillator

Si vous souhaitez que le volume plus faible, vous pouvez faire quelque chose comme ceci:

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

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 distination
osc.start(context.currentTime + 3); // start it three seconds from now

J'ai obtenu la plupart de cette de l'expérimentation en chrome lors de la lecture de l' API Web Audio, document de Travail, que j'ai trouvé à partir de @brainjam s 'lien.

J'espère que ça aide. Enfin, il est très utile d'inspecter les divers objets dans l'inspecteur de chrome (ctrl-maj-i).

Answer 2

À l'aide de l'élément audio HTML5

Croix-navigateur générative soutenue audio à l'aide de JavaScript et de l' audio élément n'est pas possible à l'heure actuelle, comme Steven Wittens notes dans un billet de blog sur la création d'un JavaScript synthé:

"...il n'y a aucun moyen de faire la queue des morceaux de la synthèse audio pour une lecture fluide".

À l'aide de l'API Web Audio

L' API Web Audio a été conçu pour faciliter le JavaScript de synthèse audio. Le Mozilla Developer Network a un Basé sur le Web Générateur de Tonalité qui fonctionne dans Firefox 4+ [demo 1]. Ajoutez ces deux lignes de code et vous avez un travail de synth avec générative soutenue audio sur la touche [demo 2 - fonctionne dans Firefox 4 uniquement, cliquez sur les "Résultats" d'abord, puis appuyez sur la touche]:

window.onkeydown = start;  
window.onkeyup = stop;

La BBC sur la page Web Audio API vaut la peine d'examiner de trop. Malheureusement, le support de l'API Web Audio ne s'étend pas à d'autres navigateurs encore.

Solutions de contournement possibles

Pour créer un cross-browser synthé à l'heure actuelle, vous aurez probablement à tomber en arrière sur audio préenregistrée par:

1. À l'aide de longues préenregistrés ogg/mp3 échantillon tons, l'intégration dans distinct audio d'éléments et de démarrage et arrêt sur une frappe de touche.
2. L'intégration d'un fichier swf contenant les éléments audio et de contrôle de la lecture via JavaScript. (Cela semble être la méthode la Google Les Paul Doodle emploie.)

Answer 3

J'ai trouvé belle lib: http://codebase.es/riffwave/

Cela fonctionne dans Chrome, Firefox et Opera.

Answer 4

L'API Web Audio arrive sur Chrome. Voir http://chromium.googlecode.com/svn/trunk/samples/audio/index.html

Suivez les instructions de la section "Mise en route", puis découvrez les démonstrations très impressionnantes.