# Providing a shader's iChannel0 from microphone input

**URL:** <https://phaser.discourse.group/t/providing-a-shaders-ichannel0-from-microphone-input/12230>\
**Category:** Phaser 3\
**Created:** [August 29, 2022, 2:58am UTC](https://phaser.discourse.group/t/providing-a-shaders-ichannel0-from-microphone-input/12230 "2022-08-29T02:58:41Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![rikas](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/rikas/32/6896_2.png) [@rikas](https://phaser.discourse.group/u/rikas)\
**Post date:** [August 29, 2022, 2:58am UTC](https://phaser.discourse.group/t/providing-a-shaders-ichannel0-from-microphone-input/12230/1 "2022-08-29T02:58:41Z")

</div>

Hi everyone,

I want to do an audio input visualizer with Phaser 3, I’m trying to get the mic input to a shader but I can’t find a way to make it work.

I have a basic understanding on shaders and I can work with textures that are images but I really don’t understand how to provide a sound. I checked a working example made in three.js: [three.js webaudio - visualizer](https://threejs.org/examples/webaudio_visualizer) and I already managed to get the sound input from the microphone (it’s an Uint8Array of 1024 numbers).

Here’s the shader I’m using:

```javascript
// simplesound.gsl.js
#ifdef GL_ES
precision highp float;
#endif

precision mediump float;
uniform vec2 resolution;
uniform sampler2D iChannel0;

varying vec2 fragCoord;

void main() {
  vec2 uv = fragCoord.xy / resolution.xy;
  vec2 mu = texture2D(iChannel0, uv).rg;

  float y = uv.y - mu.x;
  y = smoothstep(0., 0.02, abs(y - 0.1));

  gl_FragColor = vec4(y);
}

```

and here’s the code I have:

```javascript
import Phaser from 'phaser';
// This will provide the array mentioned above with code that will use `navigator.getUserMedia`.
import { setupAudioContext } from '../audiostream';

export default class MainScene2 extends Phaser.Scene {
  constructor() {
    super({ key: 'MainScene2' });
  }

  preload() {
    this.load.glsl('simplesound', '/static/simplesound.glsl.js');
  }

  create() {
    this.shader = this.add.shader('simplesound', 400, 300, 800, 600);

    // When the user presses the 'g' key we will start listening for mic input
    const GKey = this.input.keyboard.addKey('G');

    GKey.on('down', () => {
      setupAudioContext((array) => {
        // this array is the array mentioned above, in the three.js example they do something like creating
        // a texture from this input and providing that texture to the shader uniform. I tried different things but
        // nothing worked :(
        //
        // I tried using this.shader.setChannel0 and this.shader.setUniform but nothing seems to work as well.
      });
    });
  }
}

```

---

<div class="post-metadata">

**Author:** ![akumagamo](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/akumagamo/32/6031_2.png) [@akumagamo](https://phaser.discourse.group/u/akumagamo)\
**Post date:** [October 31, 2022, 11:12am UTC](https://phaser.discourse.group/t/providing-a-shaders-ichannel0-from-microphone-input/12230/2 "2022-10-31T11:12:58Z")

</div>

For anybody looking for an answer to this question, I answered it on StackOverflow. Here is [the Link](https://stackoverflow.com/a/74262364/1679286)