How to synthesize audio using HTML5/Javascript on iPad

Question

Has anybody out there got working sample code that synthesizes (and plays) audio using HTML5/Javascript on Mobile Safari on the iPad? I have found some examples for javascript-based sound synthesis on the web, but they all seem to work in Firefox only.

Answer 1

Recently I came across this js-library, I think this is what you want -> https://github.com/oampo/Audiolet

Answer 2

Here is an example that works for me on an iPad:

www.cse.usf.edu/~turnerr/sound_demo.html

You can download the files from http://www.cse.usf.edu/~turnerr/Downloads/Sound_Demo.zip

This demo is on a Unix based server. But I have not been been able to get the same code to work on an IIS server. Hoping someone can provide some help with IIS.

Answer 3

You may be able to use generated data URIs of uniform length, such as 0.1 seconds. This would give you 1/10 of a second delay and you would generate that many "frames" of audio. I'm not sure entirely what formats the iPad supports, but I read it supports uncompressed WAV. Info on this file format is pretty easy to get, I remember generating WAV files a long time ago with some primitive byte manipulation methods.

Please post back with details!

Answer 4

I'm answering a very old question... but modern webkit browsers now support the Web Audio API. I wrote a very simple fiddle that generates chords using sine waves. There are only 4 built-in wave forms, but you can build your own using Fourier coefficients (array of numbers). You have to generate a new oscillator object for each note. They are single use objects. By connecting multiple oscillators to the same destination, you get polyphonic sounds.

 let audio = new(window.AudioContext || window.webkitAudioContext)();
 let s1 = audio.createOscillator();
 let g1 = audio.createGain();
 s1.type = 'sine';
 s1.frequency.value = 600;
 s1.start();
 g1.gain.value = 0.5;
 g1.connect(audio.destination);
 s1.connect(g1);