react-webaudio, 使用ReactJS创建和更新 html5 WebAudio"audio graph"

分享于 

5分钟阅读

GitHub

  繁體 雙語
Create and update an html5 webaudio "audio graph" using ReactJS.
  • 源代码名称:react-webaudio
  • 源代码网址:http://www.github.com/Izzimach/react-webaudio
  • react-webaudio源代码文档
  • react-webaudio源代码下载
  • Git URL:
    git://www.github.com/Izzimach/react-webaudio.git
    Git Clone代码到本地:
    git clone http://www.github.com/Izzimach/react-webaudio
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/Izzimach/react-webaudio
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    响应 WebAudio

    创建和更新一个 html5 WebAudio 使用React。

    响应组件树中的每个组件代表一个 AudioNode。 音频传播到树分支,直到到达呈现 root,声音数据被输入 AudioDestinationNode,然后播放音频输出。

    安装和构建

    响应WebAudio使用响应 0.14.

    用作软件包

    要将它用作npm包,只需安装它

    
    npm install react-webaudio
    
    
    
    

    你需要做一些事情

    
    var ReactWebAudio = require('react-webaudio')
    
    
    
    

    然后你可以创建和渲染音频图形。

    作为独立构建

    从git中签出并运行

     
    npm run build
    
    
    
     

    这将打包响应WebAudio组件以及响应并将结果放入生成/响应 WebAudio。js。 如果你通过脚本标记将它的包含到你的网页中:

    
    <script src="react-webaudio.js"></script>
    
    
    
    

    然后 React 将出现在全局名称空间中,并且新的响应网络音频组件可以作为 ReactWebAudio

    示例

    构建一个简单的源代码源,它可以源于它的父 AudioContext。 一旦音频到达 AudioContext node,它就会呈现给扬声器。

    
    ReactWebAudio.render(
    
    
     React.createElement(ReactWebAudio.AudioContext,
    
    
     {},
    
    
     React.createElement(ReactWebAudio.OscillatorNode,
    
    
     {frequency:this.props.beepfreq, playing:this.props.playbeep})),
    
    
     mountelement
    
    
    );
    
    
    
    
    

    每个 node 将音频输入父 node,因此一个愚蠢的过滤器链看起来像这样:

    
     React.createElement(ReactWebAudio.DynamicsCompressorNode,
    
    
     {threshold:-50, knee:40, ratio:12, reduction:-20, attack:0.1, release:0.1},
    
    
     React.createElement(ReactWebAudio.BiquadFilterNode,
    
    
     {frequency: this.props.filterFrequency, type: this.props.filterType},
    
    
     React.createElement(ReactWebAudio.GainNode,
    
    
     {gain: this.props.gain},
    
    
     React.createElement(ReactWebAudio.ConvolverNode,
    
    
     {bufferAsArray: this.props.reverbImpulseResponse},
    
    
     React.createElement(ReactWebAudio.DelayNode,
    
    
     {delayTime: this.props.delayTime},
    
    
     React.createElement(ReactWebAudio.WaveShaperNode,
    
    
     {curve: this.props.distortionCurve},
    
    
     React.createElement(ReactWebAudio.MediaElementAudioSourceNode,
    
    
     {audioSourceElement: this.props.audioElement}
    
    
     )
    
    
     )
    
    
     )
    
    
     )
    
    
     )
    
    
     )
    
    
     )
    
    
    
    

    在这种情况下,你可能希望利用诸如的 flowRight之类的一些东西来组成函数。

    有关更完整的图片,请查看示例/目录。 试用你可以运行的示例

     
    npm run dev
    
    
    
     

    并浏览 localhost:8080/

    警告

    尚不支持所有节点。 有些难以测试,而其他一些则不能很好地适应React数据流程。 还有一些仍在网络音频规范中定义或者重新定义。 特别是:

    • 不支持将输出输出到k 速率参数。 可能会涉及一些定制的节点或者属性,
    • 不支持通道节点( ChannelSplitterNode和 ChannelMergerNode )。
    • periodicwave不是音频 node ;如果你需要用于 OscillatorNode,可以手动创建它并将它的传递为'periodicwave'属性。 确保将振荡器类型设置为'custom'
    • 不支持AnalyzerNode和 MediaStreamAudioDestinationNode。
    • 不支持AudioListener和 PannerNode。
    • 不支持ScriptProcessorNode或者它的后续 AudioWorkerNode

    WEB  react  Html5  Reactjs  
    相关文章