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
  • …
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <title>W3C Tutorial</title>
</head>
​
<body class="c8">
    <p class="c11 title" id="h.gimz8p93j4uh">
        <span class="c18">WebAudio : audio effects and musical instruments in the browser</span>
    </p>
    <p class="c16 subtitle" id="h.ay0b99xgtuo0">
        <span class="c14">From JavaScript to WebAssembly, from simple examples to complete reproductions of commercial synthesizers and production
            quality effects</span>
    </p>
    <p class="c0">
        <span class="c2"></span>
    </p>
    <ul class="c1 lst-kix_kspsy5a55gf-0 start">
        <li class="c6">
            <span class="c4">Title</span>
            <span>&nbsp;&ndash; </span>
            <span>WebAudio : audio effects and musical instruments in the browser</span>
        </li>
        <li class="c6">
            <span class="c4 c13">Example of Demos/Videos we can show: </span>
        </li>
    </ul>
    <ul class="c1 lst-kix_kspsy5a55gf-1 start">
        <li class="c3">
            <span class="c9 c10">
                <a class="c15" href="https://www.google.com/url?q=https://www.youtube.com/watch?v%3Delbjh6tBK6U%26feature%3Dyoutu.be&amp;sa=D&amp;ust=1523041888324000">Vid&eacute;o of a host + audio plugins written in JS, C/C++or DSP code written in the FAUST language and
                    &nbsp;trans-compiled into WebAssembly</a>
            </span>
            <span>, shows a Yamaha DX7, an Oberheim OBX synthesizers, real time audio effects, and a guitar amp simulator, packaged
                as WebComponents.</span>
            <span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 321.19px; height: 254.50px;">
                <img alt="" src="https://s9.postimg.org/awf7kvl8v/img1.png" style="width: 321.19px; height: 254.50px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);"
                    title="">
            </span>
            <span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 323.50px; height: 147.78px;">
                <img alt="" src="https://s9.postimg.org/essjgwo8v/img2.png" style="width: 323.50px; height: 147.78px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);"
                    title="">
            </span>
        </li>
        <li class="c3">
            <span class="c2">Videos of a guitar tube amplifier re-creation: look for &ldquo;WebAudio guitar&rdquo; on YouTube.</span>
        </li>
    </ul>
    <p class="c0 c17">
        <span class="c2"></span>
    </p>
    <ul class="c1 lst-kix_kspsy5a55gf-0">
        <li class="c5">
            <span class="c4">Organizers</span>
            <span>&nbsp;&ndash; </span>
            <span class="c9">Michel Buffa</span>
            <span class="c2">&nbsp;is a professor/researcher at Universit&eacute; Cote d&rsquo;Azur, member of the WIMMICS research group
                that belongs to INRIA/CNRS. He&rsquo;s responsible of the WASABI ANR research project (Web Audio Semantics
                Aggregated in the Browser for Integration), and member of the W3C WebAudio working group. He developed many
                WebAudio applications including a real time tube guitar amplifier simulation presented at the last international
                WebAudio conference (best paper presentation), many real time guitar effects, a multitrack player/DAW. He
                wrote a whole module about WebAudio in the MOOC HTML5 Apps and Games he created for W3C on the EDx platform
                at MIT/Harvard. He published research papers in many international conferences about the Web and the Semantic
                Web.</span>
        </li>
    </ul>
    <p class="c0">
        <span class="c2"></span>
    </p>
    <p class="c7">
        <span class="c9">Yann Orlarey</span>
        <span class="c2">&nbsp;is a french composer and computer music researcher. He is currently scientific director at GRAME. His research
            work focuses on real-time architectures of music systems, and programming languages for music composition and
            audio processing. He authored or co-authored more than 60 scientific papers and several music-oriented softwares.
            He is the designer and co-developer of FAUST (Functional Audio Stream), a functional programming language specifically
            designed for real-time signal processing and synthesis. His current research interests include efficient compilation
            and parallelization of signal processing programs, end-user programming, and preservation of signal processing
            programs using formal mathematical techniques.</span>
    </p>
    <p class="c7">
        <span>
            <br>
        </span>
        <span class="c9">St&eacute;phane Letz</span>
        <span>, from GRAME National Center for Musical Creation is a research engineer graduated from INSA Lyon engineering school.
            </span>
        <span class="c12">&nbsp;</span>
        <span>His research interests are related mainly to Formal Languages for the Musical Composition and Architecture for Musical
            Systems. He is the joint author of various systems and musical software like MidiShare or Elody. He developed
            the multiprocessor aware version of JACK low-latency audio server on OSX, Linux, Windows and Solaris. </span>
        <span
            class="c2">He is a co-author of the FAUST functional programing language for sound synthesis and audio processing. He received
            the best demo presentation award for his work &ldquo;Compiling Faust audio DSP code to WebAssemby&rdquo; at the
            last 2017 WebAudio conference.</span>
    </p>
    <p class="c0">
        <span class="c2"></span>
    </p>
    <ul class="c1 lst-kix_kspsy5a55gf-0">
        <li class="c5">
            <span class="c4">Abstract</span>
            <span class="c2">&nbsp;&ndash; The W3C WebAudio API is now a recommendation candidate, and proposes a set of high level nodes
                for building an &ldquo;audio processing graph&rdquo;. The native implementation of these nodes in the browser
                allows for developing a whole range of applications by assembling them (gain, filters, waveshapers, delay,
                stereo panner etc) and developers managed to write some impressive applications (Digital Audio Workstations,
                real time audio effects, tube guitar amp simulation, synthesizers, real time 3D sound spatialization etc.),
                but there was no good way to make low level processing (the now obsolete scriptProcessor node was designed
                for this purpose and had many flaws) until the recent addition of the AudioWorklet node, that is the last
                inclusion in the WebAudio API version 1.
                <br>The tutorial will last half a day, with the first half about a presentation of the high level nodes and the
                way they can be used for synthesizing music and for real time audio processing. We&rsquo;ll also show proposals
                for a &ldquo;audio plugin&rdquo; design (&ldquo;VSTs/VSTis plugins for WebAudio&rdquo; in other words) that
                could be used for WebAudio version 2. There is a crucial need for such a plugin architecture.
                <br>The second half tutorial will present the new AudioWorklet node and how low level processing can be achieved,
                using for example the FAUST language (a Domain Specific Language for sound synthesis and processing) to inject
                low level WebAssembly code in it. Several working examples will be designed (sound synthesis, physical modeling,
                and audio processing&hellip;). Benchmarks and comparisons on the different available browsers will be presented.
                <br>At the end of both sessions, we&rsquo;ll present a summary of good practices and will sum up the current
                state (achievements, limitations) of WebAudio and the plans for its future (audio plugins, breaking the low
                latency barrier on some configurations and operating systems, etc.)</span>
        </li>
    </ul>
    <p class="c0">
        <span class="c2"></span>
    </p>
    <ul class="c1 lst-kix_kspsy5a55gf-0">
        <li class="c5">
            <span class="c4">Topic and Relevance</span>
            <span class="c2">&nbsp;&ndash; WebAudio v1 is in last state before becoming a frozen standard, and the recent addition of a mean
                to do some low level processing makes it a valuable alternative to native frameworks (VST, Juce, Audio Units,
                LV2, etc.). Authors of this tutorial have been involved in the WebAudio standard since the very beginning
                (they published at the first 3 WebAudio conference, some are in the W3C WebAudio working group), and developed
                applications that &ldquo;pushed the limits&rdquo; of what WebAudio can achieve, gave feedbacks and measures
                to the implementers, etc. They are involved in large scale projects (WASABI ANR project with IRCAM, DEEZER,
                Radio France, INRIA/CNRS, FAUST authors belong to a top lab in France about audio/acoustic - GRAME).
                <br>The tutorial will present WebAudio v1 evolution from its creation to its current state (standardization),
                and show examples of what could be included in the future in the v2.</span>
        </li>
        <li class="c6">
            <span class="c4">Duration and Sessions</span>
            <span class="c2">&nbsp;&ndash; Half day. </span>
        </li>
        <li class="c6">
            <span class="c4">Audience</span>
            <span class="c2">&nbsp;&ndash; Anybody interested in Web development.</span>
        </li>
        <li class="c6">
            <span class="c4">Previous Editions</span>
            <span class="c2">&nbsp;&ndash; No previous edition. Michel Buffa wrote a module in the MOOC HTML5 Apps and Games that had several
                thousands of registered users since 2015.</span>
        </li>
        <li class="c6">
            <span class="c4">Tutorial Material</span>
            <span class="c2"><a href="https://docs.google.com/presentation/d/16UbjX2P0uRtaej9FnH0ByjB5yyxW64bvJGCWkOpCQuA/edit?usp=sharing" target="_blank">Slides here. Click on pictures on the slides to run examples and see source code.</a></span>
        </li>
        <li class="c6">
            <span class="c4">Equipment</span>
            <span class="c2">&nbsp;&ndash; Good speakers ! Good wifi connexion.</span>
        </li>
    </ul>
    <p class="c0">
        <span class="c2"></span>
    </p>
</body>
​
</html>
 
.lst-kix_kspsy5a55gf-8>li:before {
            content: "\0025a0  "
        }
​
        .lst-kix_kspsy5a55gf-7>li:before {
            content: "\0025cb  "
        }
​
        .lst-kix_kspsy5a55gf-5>li:before {
            content: "\0025a0  "
        }
​
        .lst-kix_kspsy5a55gf-6>li:before {
            content: "\0025cf  "
        }
​
        .lst-kix_kspsy5a55gf-0>li:before {
            content: "\0025cf  "
        }
​
        ul.lst-kix_kspsy5a55gf-6 {
            list-style-type: none
        }
​
        ul.lst-kix_kspsy5a55gf-7 {
            list-style-type: none
        }
​
        .lst-kix_kspsy5a55gf-1>li:before {
            content: "\0025cb  "
        }
​
        ul.lst-kix_kspsy5a55gf-4 {
            list-style-type: none
        }
​
        ul.lst-kix_kspsy5a55gf-5 {
            list-style-type: none
        }
​
        ul.lst-kix_kspsy5a55gf-2 {
            list-style-type: none
        }
​
        ul.lst-kix_kspsy5a55gf-3 {
            list-style-type: none
        }
​
        ul.lst-kix_kspsy5a55gf-0 {
            list-style-type: none
        }
​
        ul.lst-kix_kspsy5a55gf-1 {
            list-style-type: none
        }
​
        .lst-kix_kspsy5a55gf-4>li:before {
            content: "\0025cb  "
        }
​
        .lst-kix_kspsy5a55gf-3>li:before {
            content: "\0025cf  "
        }
​
        .lst-kix_kspsy5a55gf-2>li:before {
            content: "\0025a0  "
        }
​
        ul.lst-kix_kspsy5a55gf-8 {
            list-style-type: none
        }
​
        ol {
            margin: 0;
            padding: 0
        }
​
        table td,
        table th {
            padding: 0
        }
​
        .c3 {
            margin-left: 72pt;
            padding-top: 0pt;
            padding-left: 0pt;
            padding-bottom: 0pt;
            line-height: 1.15;
            orphans: 2;
            widows: 2;
            text-align: left
        }
​
        .c6 {
            margin-left: 36pt;
            padding-top: 0pt;
            padding-left: 0pt;
            padding-bottom: 0pt;
            line-height: 1.15;
            orphans: 2;
            widows: 2;
            text-align: left
        }
​
        .c5 {
            margin-left: 36pt;
            padding-top: 0pt;
            padding-left: 0pt;
            padding-bottom: 0pt;
            line-height: 1.15;
            orphans: 2;
            widows: 2;
            text-align: justify
        }
​
        .c14 {
            color: #666666;
            font-weight: 400;
            text-decoration: none;
            vertical-align: baseline;
            font-size: 15pt;
            font-family: "Arial";
            font-style: normal
        }
​
        .c18 {
            color: #000000;
            font-weight: 400;
            text-decoration: none;
            vertical-align: baseline;
            font-size: 26pt;
            font-family: "Arial";
            font-style: normal
        }
​
        .c7 {
            margin-left: 34.5pt;
            padding-top: 0pt;
            padding-bottom: 0pt;
            line-height: 1.15;
            orphans: 2;
            widows: 2;
            text-align: justify
        }
​
        .c0 {
            padding-top: 0pt;
            padding-bottom: 0pt;
            line-height: 1.15;
            orphans: 2;
            widows: 2;
            text-align: left;
            height: 11pt
        }
​
        .c2 {
            color: #000000;
            font-weight: 400;
            text-decoration: none;
            vertical-align: baseline;
            font-size: 11pt;
            font-family: "Arial";
            font-style: normal
        }
​
        .c13 {
            color: #000000;
            text-decoration: none;
            vertical-align: baseline;
            font-size: 11pt;
            font-family: "Arial";
            font-style: normal
        }
​
        .c11 {
            padding-top: 0pt;
            padding-bottom: 3pt;
            line-height: 1.15;
            page-break-after: avoid;
            text-align: center
        }
​
        .c16 {
            padding-top: 0pt;
            padding-bottom: 16pt;
            line-height: 1.15;
            page-break-after: avoid;
            text-align: center
        }
​
        .c8 {
            background-color: #ffffff;
            max-width: 451.4pt;
            padding: 72pt 72pt 72pt 72pt
        }
​
        .c9 {
            -webkit-text-decoration-skip: none;
            text-decoration: underline
        }
​
        .c1 {
            padding: 0;
            margin: 0
        }
​
        .c15 {
            color: inherit;
            text-decoration: inherit
        }
​
        .c10 {
            color: #1155cc
        }
​
        .c12 {
            font-size: 9pt
        }
​
        .c4 {
            font-weight: 700
        }
​
        .c17 {
            margin-left: 36pt
        }
​
        .title {
            padding-top: 0pt;
            color: #000000;
            font-size: 26pt;
            padding-bottom: 3pt;
            font-family: "Arial";
            line-height: 1.15;
            page-break-after: avoid;
            orphans: 2;
            widows: 2;
            text-align: left
        }
​
        .subtitle {
            padding-top: 0pt;
            color: #666666;
            font-size: 15pt;
            padding-bottom: 16pt;
            font-family: "Arial";
            line-height: 1.15;
            page-break-after: avoid;
            orphans: 2;
            widows: 2;
            text-align: left
        }
​
        li {
            color: #000000;
            font-size: 11pt;
            font-family: "Arial"
        }
​
        p {
            margin: 0;
            color: #000000;
            font-size: 11pt;
            font-family: "Arial"
        }
​
        h1 {
            padding-top: 20pt;
            color: #000000;
            font-size: 20pt;
            padding-bottom: 6pt;
            font-family: "Arial";
            line-height: 1.15;
            page-break-after: avoid;
            orphans: 2;
            widows: 2;
            text-align: left
        }
​
        h2 {
            padding-top: 18pt;
            color: #000000;
            font-size: 16pt;
            padding-bottom: 6pt;
            font-family: "Arial";
            line-height: 1.15;
            page-break-after: avoid;
            orphans: 2;
            widows: 2;
            text-align: left
        }
​
        h3 {
            padding-top: 16pt;
            color: #434343;
            font-size: 14pt;
            padding-bottom: 4pt;
            font-family: "Arial";
            line-height: 1.15;
            page-break-after: avoid;
            orphans: 2;
            widows: 2;
            text-align: left
        }
​
        h4 {
            padding-top: 14pt;
            color: #666666;
            font-size: 12pt;
            padding-bottom: 4pt;
            font-family: "Arial";
            line-height: 1.15;
            page-break-after: avoid;
            orphans: 2;
            widows: 2;
            text-align: left
        }
​
        h5 {
            padding-top: 12pt;
            color: #666666;
            font-size: 11pt;
            padding-bottom: 4pt;
            font-family: "Arial";
            line-height: 1.15;
            page-break-after: avoid;
            orphans: 2;
            widows: 2;
            text-align: left
        }
​
        h6 {
            padding-top: 12pt;
            color: #666666;
            font-size: 11pt;
            padding-bottom: 4pt;
            font-family: "Arial";
            line-height: 1.15;
            page-break-after: avoid;
            font-style: italic;
            orphans: 2;
            widows: 2;
            text-align: left
        }
Output

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

Dismiss x
public
Bin info
micbuffapro
0viewers