Error when using `AudioBufferSourceNode` type

[w3geekery]

I'm not certain what exactly this problem is specifically, but hoping you can tell me either a bug that needs tweaking or is it something I'm doing wrong?

What I'm trying to do is have a 'theme song' running in an 'audio-control.component', and expose a volume slider and suspend/resume switch to the user in a config menu.

I am currently 'saving' the bufferSrc I create with the mp3 I decode as a public class attribute this.themeBufferSrc. I'm unable to define the type for my class variable, because when I do, my linter says the following:
the Property 'detune' is missing in type 'IAudioBufferSourceNode<IAudioContext>' but required in type 'AudioBufferSourceNode'

code truncated from audio-control.component:

`...

// inside audio-control.component

import { AudioContext } from 'angular-audio-context';

...

@input() public disabled:boolean = true;
@input() public label:string = null;
@input() public filenames:string[] = null;

@output() public valueChanged = new EventEmitter();

public volumeControl = new FormControl();

public themeBufferSrc:AudioBufferSourceNode; //. <------ if I add the type here, I get the error message above ^^

// for reference, the error is:

// the Property 'detune' is missing in type 'IAudioBufferSourceNode'
// but required in type 'AudioBufferSourceNode'

// NOTE: if I just use ':any' instead of ':AudioBufferSourceNode', I can still use it effectively,
// it's just that my editor (VS Code) doesn't know anything about the AudioBufferSourceNode methods,
// so I have to fish around a bit to find the methods I want to use...

constructor(
private audioContext: AudioContext,
private rndSvc: RandomNumberService
) { }

...

public initAudioBuffer() {
if (this.filenames.length === 0) {
  return;
}

const filename = this.filenames[this.rndSvc.generateRandomNumber(1,this.filenames.length) - 1];

const volVal:number = this.init * .01;

const gainNode = this.audioContext.createGain();
gainNode.gain.value = 0;

fetch(`assets/audio/${filename}`)
  // Read it into memory as an arrayBuffer
  .then((response) => response.arrayBuffer())
  // Turn it from mp3/aac/whatever into raw audio data
  .then((arrayBuffer) => this.audioContext.decodeAudioData(arrayBuffer))
  .then((audioBuffer) => {
    // Now we're ready to play!
    // Create a source:
    // This represents a playback head.

    const bufferSrc = this.audioContext.createBufferSource();
    // Give it the audio data we loaded:
    bufferSrc.buffer = audioBuffer;
    // Plug it into the output:
    gainNode.gain.linearRampToValueAtTime(volVal,2);
    bufferSrc.connect(gainNode).connect(this.audioContext.destination);

    // And off we go!

    bufferSrc.loop = true;
    bufferSrc.start(0);

    this.themeBufferSrc = bufferSrc;
    //  ^^  here I am trying to 'save' the themeBuffer 
    // so I can refer to it later on other events and 're-use' it  <<---------
    // i.e. to control the volume and suspend/resume the context

    console.log('typeof this.themeBufferSrc: ',typeof this.themeBufferSrc, this.themeBufferSrc);

// typeof this.themeBufferSrc output in console:

// AudioBufferSourceNode {_nativeEventTarget: AudioBufferSourceNode, _listeners: WeakMap, _context: AudioContext, _nativeAudioNode: AudioBufferSourceNode

...`

I hope this makes sense. I'm not sure if it's just something I need to do or what is a better way to accomplish what I want.

[chrisguttandin]

Hi @w3geekery,

I think the errors originate from the tiny differences in TypeScript's default type definitions of the Web Audio API and those that come with standardized-audio-context. TypeScript just compiles the type definitions based on the spec and has no idea if they match with the implementation in the browser. standardized-audio-context on the other hand double checks the runtime implementation and only exposes type definitions for the functions and methods that are supported and do actually exist.

The error should be gone if you use the types exported by standardized-audio-context.

import type { IAudioContext, IAudioBufferSourceNode } from 'standardized-audio-context';

// ...

    public themeBufferSrc: IAudioBufferSourceNode<IAudioContext>;

// ...

[chrisguttandin]

I'm closing this issue assuming it's fixed. Please feel free to re-open it or to open another one if you run into problems again.