music/demos/ddsp_tone_transfer.html

<!-- Copyright 2020 Google Inc. All Rights Reserved.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
    http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
==============================================================================-->
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta
      name="viewport"
      content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes"
    />
    <link rel="stylesheet" href="./style.css" />
    <title>DDSP Tone Transfer</title>
  </head>
  <body>
    <h1>DDSP Tone Transfer</h1>
    <p>
      <code><a href="https://g.co/magenta/ddsp">DDSP</a></code>
      lets you combine the interpretable structure of classical DSP elements
      (such as filters, oscillators, reverberation, etc.) with the expressivity
      of deep learning
    </p>
    <section>
      <h2>
        To start, you first have to initialize
        <a href="https://tfhub.dev/google/tfjs-model/spice/2/default/1">SPICE</a> so that you can use
        SPICE to extract pitches from your audio.
      </h2>
      <code
        >const spice = new mm.SPICE(); <br />await spice.initialize();
      </code>

      <p><button id="initialize">Initialize</button></p>

      <p><code id="spice_initialized"></code></p>
    </section>

    <section id="extract_features" style="display: none">
      <h2>Extract Audio Features</h2>
      <code>spice.getAudioFeatures(audioBuffer)</code>
      <p>
        Upload an audio file and call the `getAudioFeatures` method to get audio
        features from your input audio.
      </p>
      <p>
        <input
          accept=".wav,.mp3,.oga,.aac"
          className="recorder__input"
          type="file"
          id="upload"
        />
      </p>
      <p>
        <code id="audio_features"></code>
      </p>
    </section>

    <section id="buttons" style="display: none">
      <h2>Synthesize</h2>
      <p>
        To start synthesizing your audio, initialize mm.DDSP making sure to pass
        in the URL of your own model or use one of our
        <a
          href="https://github.com/magenta/magenta-js/tree/master/music/checkpoints#table"
          >4 models</a
        >
        (look for DDSP models).
      </p>
      <code
        >const ddsp = new mm.DDSP(checkpointUrl); <br />
        ddsp.synthesize(audioFeatures)</code
      >
      <p>
        <button id="button_violin">Violin</button>
        <button id="button_trumpet">Trumpet</button>
        <button id="button_tenor_saxophone">Tenor Saxophone</button>
        <button id="button_flute">Flute</button>
      </p>
      <audio id="player" controls style="display: none"></audio>
    </section>

    <script src="./ddsp_tone_transfer_bundle.js"></script>
  </body>
</html>