Search code examples
javascriptvisual-studiotypescripthtml5-audioweb-audio-api

Typescript web audio API missing definitions


I'm interested in beginning to use Typescript for some of my projects. Right now I would like to use the Web Audio API for some real time audio processing using a microphone as the input stream source. I'm working inside Visual Studio 2015 as I'll be working with ASP.NET 5.

I'm defining my audio context like this: var audioCtx: AudioContext;

It works as the AudioContext definition is present in the lib.d.ts file located at A:\Program\Microsoft Visual Studio 14.0\Common7\IDE\CommonExtensions\Microsoft\TypeScript

Though when I'm later trying to use audioCtx.createMediaStreamSource(stream)I get an error when trying to transpile the TS-code that tells me Property "createMediaStreamSource" does not exist on type 'AudioContext'.

This error seems to be correct, as this is the content from the lib.d.ts file that's used:

interface AudioContext extends EventTarget {
    currentTime: number;
    destination: AudioDestinationNode;
    listener: AudioListener;
    sampleRate: number;
    createAnalyser(): AnalyserNode;
    createBiquadFilter(): BiquadFilterNode;
    createBuffer(numberOfChannels: number, length: number, sampleRate: number): AudioBuffer;
    createBufferSource(): AudioBufferSourceNode;
    createChannelMerger(numberOfInputs?: number): ChannelMergerNode;
    createChannelSplitter(numberOfOutputs?: number): ChannelSplitterNode;
    createConvolver(): ConvolverNode;
    createDelay(maxDelayTime?: number): DelayNode;
    createDynamicsCompressor(): DynamicsCompressorNode;
    createGain(): GainNode;
    createMediaElementSource(mediaElement: HTMLMediaElement): MediaElementAudioSourceNode;
    createOscillator(): OscillatorNode;
    createPanner(): PannerNode;
    createPeriodicWave(real: any, imag: any): PeriodicWave;
    createScriptProcessor(bufferSize?: number, numberOfInputChannels?: number, numberOfOutputChannels?: number): ScriptProcessorNode;
    createStereoPanner(): StereoPannerNode;
    createWaveShaper(): WaveShaperNode;
    decodeAudioData(audioData: ArrayBuffer, successCallback: DecodeSuccessCallback, errorCallback?: DecodeErrorCallback): void;
}

So what I'm wondering is basically if there's away to get more "complete" definitions for the audio API? So that I can at least use the majority of the available functions and objects.

I don't feel like adding the definitions myself, then I rather use standard ES5. But I think it would be rather strange if there are not more complete TS definitions for the Web Audio API as it has existed for a couple of years now (although it's still changing a little bit now and then).


Solution

  • The lib.d.ts definition tends to follow the current Microsoft implementation of the standard and grows as Microsoft add support for the new aspects. Sometimes this means it is ahead of other browsers, other times it is behind. Where Mozilla are introducing new ideas, they will of course be ahead of everyone else with the implementation and device APIs are their favourite subject as they are highly related to Firefox OS.

    There isn't a great deal missing, you can use the following to insert the missing parts. The compiler will tell you when you need to delete any of the below by giving you a "duplicate identifier" error:

    interface MediaStream {
        id: string;
        active: boolean;
    }
    
    interface MediaStreamAudioSourceNode extends AudioNode {
        
    }
    
    interface MediaStreamAudioDestinationNode extends AudioNode {
        stream: MediaStream;
    }
    
    interface AudioContext {
        state: string;
        close: () => void;
        createMediaStreamSource: () => MediaStreamAudioSourceNode;
        createMediaStreamDestination: () => any;
        resume: () => void;
        suspend: () => void;
    }
    

    The MediaStream is as complete as the MDN documentation - beware of this aspect as there seems to be minimal browser support for the members of this object.