Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<html>
    <head>
        <script src='https://surikov.github.io/webaudiofont/npm/dist/WebAudioFontPlayer.js'></script>
        <script src='https://surikov.github.io/webaudiofontdata/sound/0520_Chaos_sf2_file.js'></script>
        <script src='https://surikov.github.io/webaudiofontdata/sound/0530_Soul_Ahhs_sf2_file.js'></script>
        <script>
            var womanPreset=_tone_0530_Soul_Ahhs_sf2_file;
            var manPreset=_tone_0520_Chaos_sf2_file;
            var AudioContextFunc = window.AudioContext || window.webkitAudioContext;
            var audioContext = new AudioContextFunc();
            var player=new WebAudioFontPlayer();
            var manGain = audioContext.createGain();
            manGain.connect(audioContext.destination);
            var womanGain = audioContext.createGain();
            womanGain.connect(audioContext.destination);
            player.loader.decodeAfterLoading(audioContext, '_tone_0530_Soul_Ahhs_sf2_file');
            player.loader.decodeAfterLoading(audioContext, '_tone_0520_Chaos_sf2_file');
        </script>
    </head>
    <body>
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td>
                    <a href="#" onmousedown="player.queueWaveTable(audioContext, manGain, manPreset, 0, 12*4+0, 3);">
                        <img src="https://surikov.github.io/webaudiofont/img/voiceMan.jpg" width="285" height="214">
                    </a>
                </td>
                <td rowspan="2">
                    <a href="#" onmousedown="player.queueWaveTable(audioContext, womanGain, womanPreset, 0, 12*5+0, 3);">
                        <img src="https://surikov.github.io/webaudiofont/img/voiceWoman.jpg" width="375" height="456">
                    </a>
                </td>
            </tr>
            <tr>
                <td>
                    <p>Man volume</p>
                    <p>
                        <input type="range" id="maRange" value="1.0"  min="0.2" max="1" step=0.2 onchange="manGain.gain.value=this.value;">
                    </p>
                    <p>Woman volume</p>
                    <p>
                        <input type="range" id="woRange" value="1.0" min="0.2" max="1" step=0.2 onchange="womanGain.gain.value=this.value;">
                    </p>
                </td>
            </tr>
        </table>
        <hr/>
        <p><a href="https://surikov.github.io/webaudiofont/">source</a></p>
</body>
</html>
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
surikovpro
0viewers