<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/@magenta/music@1.0.0"> </script>
    <link href='https://fonts.googleapis.com/css?family=Codystar' rel='stylesheet'>
  </head>

  <body>
    <div class='content' id='wait'>Put on headphones. We'll wait.</div>
    <div class='content' id='start' onclick="start()">CLICK TO TRIO ENDLESSLY.</div>
    <div class='content' id='playing'>
      <marquee scrollamount=15>ENDLESS TRIOS</marquee>
      <marquee scrollamount=15 direction=right >ENDLESS TRIOS</marquee>
      <div class='button' id='next' onclick="sampleAndPlayForever()">Next Trios</div> 
      <marquee behavior=alternate id='count' direction=right>0 TRIOS</marquee>
      <div class='button' onclick="stop()">END TRIOS</div>
      <marquee scrollamount=15>ENDLESS TRIOS</marquee>
      <marquee scrollamount=15 direction=right>ENDLESS TRIOS</marquee>
      <div class='button' onclick="changeTempo(1)">Faster Trios</div>
      <marquee behavior=alternate id='tempo'>bpm</marquee>
      <div class='button' onclick="changeTempo(-1)">Slower Trios</div>
      <marquee scrollamount=15>ENDLESS TRIOS</marquee>
      <marquee scrollamount=15 direction=right>ENDLESS TRIOS</marquee>
    </div>
  </body>
  <footer class='footer'>
    Plays back real-time generated 3-part (melody, bass, drums) from a miniaturized <a href="https://g.co/magenta/musicvae" target="_blank">MusicVAE</a> model. Listen to samples from the full model on <a href="https://www.youtube.com/watch?v=xU1W3c9p2RU&list=PLBUMAYA6kvGVds2N7HIMQnZc0SMFk99Yl" target="_blank">YouTube</a> or sample your own in <a href="https://goo.gl/magenta/musicvae-colab" target="_blank">Colab</a>.
  </footer>
</html>

body {
  background-color:black;
  color:white;
}
.content {
  min-height: 100vh;
  font-family: 'Codystar';
  font-size: 28px;
}
.footer {
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 15px;
  height: 25px;
}

#start, marquee.button, div.button {
  cursor: pointer;
}

#start:hover, div.button:hover, marquee.button:hover {
    color: magenta
}

div.button {
  text-align: center;
}

marquee, div.button {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
// Instantiate the model by specifying the desired checkpoint.
const model = new mm.MusicVAE(
  'https://storage.googleapis.com/magentadata/js/checkpoints/music_vae/trio_4bar');

const player = new mm.Player();

let stopSignal = false;
let count = 0;
let tempo = 80;

const sampleAndPlayForever = () => {
  player.stop();
  count += 1;
  document.getElementById('count').innerHTML = `${count} trios`;
  return model.sample(1)
    .then((samples) => player.start(samples[0], tempo))
    .then(stopSignal ? undefined : sampleAndPlayForever)
};

const changeTempo = (delta) => {
  tempo = Math.max(Math.min(tempo + delta * 10, 120), 40);
  const tempoCounter = document.getElementById('tempo');
  tempoCounter.setAttribute('scrollamount', tempo / 10);
  tempoCounter.innerHTML = `${tempo} bpm`;
}

const start = () =>  {
  mm.Player.tone.context.resume();  // Required on mobile.
  document.getElementById('start').style.display = "none";
  changeTempo(0);
  stopSignal = false;
  sampleAndPlayForever();
};

const stop = () => {
  stopSignal = true;
  player.stop();
  document.getElementById('wait').style.display = "none";
  document.getElementById('start').style.display = "block";
};

model.initialize().then(stop);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.