{"size": 2521, "ext": "js", "max_stars_repo_path": "src/components/ConvolverCodeExample.js", "max_stars_repo_name": "meslater1030/web-audio-api-sample", "max_stars_repo_stars_event_min_datetime": "2018-03-18T19:53:49.000Z", "max_stars_repo_stars_event_max_datetime": "2018-04-23T23:28:37.000Z", "max_issues_repo_path": "src/components/ConvolverCodeExample.js", "max_issues_repo_name": "meslater1030/web-audio-api-sample", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/ConvolverCodeExample.js", "max_forks_repo_name": "meslater1030/web-audio-api-sample", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 3, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 44.2280701754, "max_line_length": 113, "alphanum_fraction": 0.6251487505}
import React from 'react';
import FullPageDialog from './FullPageDialog';
import SyntaxHighlighter from 'react-syntax-highlighter/prism';
import { light } from 'react-syntax-highlighter/styles/prism';
import AudioNode from './AudioNode';
import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
import Typography from '@material-ui/core/Typography';

export default function ConvolverCodeExample() {
    const codeString = `
        // Part One: Get Buffer
        const audioContext = new AudioContext();
        const bufferPromise = new Promise((resolve, reject) => {
            const ajaxRequest = new XMLHttpRequest();
            ajaxRequest.open('GET', 'https://some_audio_file.mp3', true);
            ajaxRequest.responseType = 'arraybuffer';
            ajaxRequest.onload = () => audioContext.decodeAudioData(ajaxRequest.response, resolve, reject);
            ajaxRequest.send();
          });
        
        // Part Two: setup audio graph
        bufferPromise.then((buffer) => {
            const videoElement = document.querySelector('video');
            const sourceNode = audioContext.createMediaElementSource(videoElement);
            const convolverNode = audioContext.createConvolver();
            convolverNode.buffer = buffer;
            const gainNode = qudioContext.createGain();
            sourceNode.connect(convolverNode);
            convolverNode.connect(gainNode);
            gainNode.connect(audioContext.destination);
        })

    `;
    return <FullPageDialog dialogTitle="Convolver Code Example" dialogContent={ 
        <React.Fragment>
            <SyntaxHighlighter language='javascript' style={light}>{codeString}</SyntaxHighlighter>
            <Typography variant="title">
                Audio Graph
            </Typography>
            <AudioNode>
                <Typography color="inherit" variant="body2">Source: Video Element</Typography>
            </AudioNode>
            <ArrowForwardIcon />
            <AudioNode>
                <Typography color="inherit" variant="body2">Effect: Convolver Node</Typography>
            </AudioNode>
            <ArrowForwardIcon />
            <AudioNode>
                <Typography color="inherit" variant="body2">Effect: Gain Node (Volume)</Typography>
            </AudioNode>
            <ArrowForwardIcon />
            <AudioNode>
                <Typography color="inherit" variant="body2">Destination: Default (computer speakers)</Typography>
            </AudioNode>
        </React.Fragment>
    }/>
}