JS1k: The JavaScript code golfing competition

for(_=`b2$6$#),{9bzc2~at}inR/40Q00)Por(_)-50)^with(]4c464\\style[5bZsetTimeout(YpeechSynthesisX;Y"u=new(SXUtterance)('Wa kRd of magic');f_i of s.getVoices())if(i.lang.m}ch(/en/))u.voice=i;s.speak(u)",Wits cre}ei=0;i<;b36c14Z09f444$3bZ22740F,start(.value=connect(Q7Z4~::~45c0304b434t+=.1104b0z	{stop(,g.gaR.0d23e28+8m9Z0;]new AudioContext)f_;i++)]Oscill}_))d.charCodeAt(i0:e24/4/8n8#z07n&4Z49k2z7z-@g=GaR({g{g.destR}ion{frequency
s=sX14P52PW90P;b.RnerHTML="<center [=font:7em/99vh''>🕺<sup>🎵<sub>✨";d="r23Q474b-3r55434s.4Q4s;9f3Z1<c531;~7i54)6q2\\x7#:34;<c)b4Fcab	o4<cc4#9~;j)\\Fc5#9:@)3b4Deb	m4>e4#<d2;i)34He7=b5@$Fk->5=d4z+7j941Ic)34:e2431>54c17n3=030Z6Be+J:;$25/4/4r85~<07n/656460B"f=880,t=604)>96?*()-97):(
f*=M}h.pow(1.06,++^05t*(^{Y'b.[.background="hsl('+i*9+',50%,50%)"',t*1e3))t=12,720
i<58|i%4?220:2771)`;G=/[
-W-_P-R}~z{#$]/.exec(_);)with(_.split(G))_=join(shift());eval(_)

Zm9yKF89YGIyJDYkIyksezliemMyfmF0fWluUi80MFEwMClQb3IoXyktNTApXndpdGgoXTRjNDY0XFxzdHlsZVs1YlpzZXRUaW1lb3V0KFlwZWVjaFN5bnRoZXNpc1g7WSJ1PW5ldyhTWFV0dGVyYW5jZSkoJ1dhIGtSZCBvZiBtYWdpYycpO2ZfaSBvZiBzLmdldFZvaWNlcygpKWlmKGkubGFuZy5tfWNoKC9lbi8pKXUudm9pY2U9aTtzLnNwZWFrKHUpIiwfV2l0cyAfHmNyZX1lHWk9MDtpPBw7YjM2YzEbNFowOWYaNDQZNCQYM2IXWjIWFzIVNxY0MBUVRhQsc3RhcnQoEy52YWx1ZT0SY29ubmVjdCgRURc3WhA0fg86Dzp+FzQ1DmMwMzA0YjQzNAx0Kz0uMTELMBY0YjAYehkJe3N0b3AoCwgsZy5nYVISLjAHZDIzGhllMjgrFThtOVowBjtdbmV3IEF1ZGlvQ29udGV4dClmXwU7aSsrKV0dT3NjaWxsfV8pKQRkLmNoYXJDb2RlQXQoaQMwOmUyDzQvFhU0LzhuOCMZejA3biYXNFo0FjlrMhV6N3otQAJnPR1HYVIoexFne2cuEWRlc3RSfWlvbntmcmVxdWVuY3kSAXM9c1geMTRQHjUyUFcfOTBQO2IuUm5lckhUTUw9IjxjZW50ZXIgWz1mb250OjdlbS85OXZoJyc+8J+VujxzdXA+8J+OtTxzdWI+4pyoIjtkPSJyMhUzUTQ3NGItMxlyNRUXEDU0MzRzLjQQUTRzOxY5ZjNaMTxjNQ8zMTt+GDdpNRY0KRYVNnEyXFwXeDcjOgYzNDsMPGMpFxliNBhGYw5hAmIJbzQbPGMUYzQjOX47ailcXBVGYzUjOQYZOgxAKTMZYjQYRGUOYgIJbTQVGz4UZTQjPGQyO2kpMxk0SGU3Fj1iNRZAJEZrLRY+NRY9ZDQPeisVN2o5GBgYNDFJYykzNBg6ZTI0MxcxPjUPNGMxFQ83bjMZFT0wMzBaNkJlKxlKOhU7JBcaMg81Lw8VNC80cjg1fhk8MDduLzY1NjQ2MEIiBWY9ODgwLHQ9HDYwNAQDKT45Nj8LKigDKS05Nyk6KAFmKj1NfWgucG93KDEuMDYsAysrXgcwNRN0CCooA157WSdiLlsuYmFja2dyb3VuZD0iaHNsKCcraSo5KycsNTAlLDUwJSkiJyx0KjFlMykpBXQ9MTIsHDcyMAQBaTw1OHxpJTQ/MjIwOjI3NwcxEwsIKWA7Rz0vWwEtH1ctX1AtUn1+ensjJF0vLmV4ZWMoXyk7KXdpdGgoXy5zcGxpdChHKSlfPWpvaW4oc2hpZnQoKSk7ZXZhbChfKQ==

//  DATA
// ------

// The melody was extracted from a MIDI file with this tool:
// https://onlinesequencer.net/import2/4824755c9c24632b1ebbcff30f4016dd?title=magic1%281%29.mid
// I then typed by hand all the notes I wanted to play in this array:
// Each line represents a note:
// - The first number of the line represents the frequency offset (how may notes upper or lower).
// - If the first number of the line is "40", it means "silence".
// - The second number of the line represents the note duration. (with 1 = 0.11 second)
// The melody starts with a ~2s silence (to give the speech synthetizer the time to start properly).
D = [
40,17,
0,1,
40,1,
0,1,
-3,2,
-2,2,
5,2,
40,1,
-5,1,
2,2,
40,17,
3,1,
40,1,
0,1,
40,1,
-3,2,
-2,1,
40,1,
5,3,
40,1,
3,2,
1,2,
40,18,
-4,2,
-3,2,
-2,1,
40,1,
5,3,
40,1,
-3,2,
-2,2,
40,18,
9,3,
40,1,
0,7,
40,5,
1,3,
40,1,
-1,10,
40,2,
3,2,
40,2,
0,1,
-1,9,
40,2,
0,2,
40,1,
0,5,
40,8,
3,3,
40,1,
0,2,
-9,3,
40,1,
0,1,
40,1,
0,4,
40,16,
0,2,
40,2,
2,4,
2,1,
40,1,
40,23,
5,4,
40,1,
0,8,
40,3,
0,1,
2,3,
40,1,
-2,7,
40,5,
2,2,
40,4,
0,6,
-7,1,
40,1,
0,6,
40,12,
7,3,
40,1,
-2,1,
2,9,
40,2,
-2,1,
-2,2,
40,1,
2,1,
2,10,
40,2,
-9,1,
40,1,
2,2,
40,1,
2,2,
40,1,
0,20,
40,2,
8,2,
40,2,
0,8,
40,2,
0,1,
40,1,
2,3,
40,0,
-2,8,
40,4,
0,2,
40,2,
0,2,
-3,3,
40,1,
0,1,
40,1,
0,2,
-3,6,
40,13,
6,4,
40,1,
0,2,
2,7,
40,1,
-2,5,
40,13,
-12,1,
40,1,
2,3,
40,1,
2,3,
40,1,
0,7,
40,10,
0,1,
40,1,
0,7,
40,1,
5,7,
40,1,
-5,14,
40,1,
-2,3,
40,1,
0,2,
40,1,
-2,2,
40,1,
0,7,
40,1,
2,2,
40,14,
2,9,
40,1,
1,4,
40,2,
-1,10,
40,2,
5,3,
40,1,
0,2,
-2,1,
40,1,
0,1,
40,1,
0,20,
40,2,
2,4,
40,1,
0,7,
40,2,
0,9,
40,9,
-9,2,
40,2,
2,4,
2,1,
40,1,
0,20,
40,2,
3,4,
40,1,
0,7,
40,3,
0,1,
2,3,
40,1,
-2,7,
40,5,
2,2,
40,4,
0,6,
-7,1,
40,1,
0,6,
40,12,
7,3,
40,1,
-2,2,
2,8,
40,2,
-2,1,
-2,2,
40,1,
2,1,
2,14,
-9,1,
2,2,
40,1,
2,2,
40,1,
0,18,
40,4,
8,2,
40,2,
0,8,
40,2,
0,1,
40,1,
2,3,
40,1,
-2,8,
40,4,
0,2,
40,2,
0,2,
-3,3,
40,1,
0,1,
40,1,
0,2,
-3,6,
40,13,
6,4,
40,1,
0,2,
2,7,
40,1,
-2,5,
40,13,
-12,1,
40,1,
2,3,
40,1,
2,3,
40,1,
0,7,
40,10,
0,1,
40,1,
0,7,
40,1,
5,7,
40,1,
-5,14,
-2,3,
40,1,
0,2,
40,1,
-2,2,
40,1,
0,7,
40,1,
2,2,
40,12,
2,1,
40,1,
0,9,
40,1,
1,4,
40,2,
-1,12,
5,3,
40,1,
0,2,
-2,1,
40,1,
0,1,
40,1,
0,20,
40,4,
2,4,
40,1,
0,10,
40,3,
0,9,
40,8,
-9,1,
2,2,
2,22,
40,4,
5,3,
40,1,
0,11,
40,1,
3,3,
40,1,
0,14,
40,1,
0,20,
40,10,
-5,3,
40,1,
0,12,
3,3,
40,1,
0,11,
40,3,
2,2,
40,2,
0,7,
40,1,
-7,1,
40,1,
0,5,
40,9,
7,2,
40,1,
0,2,
40,1,
0,2,
40,1,
0,2,
-1,23,
40,2,
-9,1,
2,2,
40,1,
0,8,
40,4,
0,2,
1,1,
40,1,
-1,12,
3,2,
40,2,
0,2,
40,2,
-1,1,
40,1,
0,2,
40,2,
0,5,
40,13,
1,2,
2,1,
40,1,
0,11,
-2,1,
-2,3,
40,1,
4,16,
40,4,
-7,2,
2,24,
8,1,
40,1,
0,9,
40,1,
0,1,
40,1,
2,3,
40,1,
-2,7,
40,5,
0,2,
40,2,
0,3,
-3,2,
40,2,
0,1,
40,1,
0,2,
-3,2,
40,17,
6,3,
40,2,
0,2,
2,10,
-2,5,
40,13,
-3,4,
3,4,
2,4,
-2,16,
];

// Data encoder:
// - Each silence is encoded on 1 ASCII char (code point = 97 + silence duration).
// - Each note is encoded on 2 ASCII chars (code points = 50 + frequency offset, 50 + duration).
// These ASCII ranges were chosen to avoid the ASCII control chars (used by RegPack),
// and to avoid the characters ", ', ` and \ (they would have to be escaped).
d="";
for(i=0;i<D.length;i++){
  if(D[i]==40){
    d+=String.fromCharCode(D[i+1]+97);
    i++;
  }
  else{
    d+=String.fromCharCode(D[i]+50);
  }
}

// The resulting string is copied in the code below.
console.log(d);


//  CODE
// ------

// All the following code is sent to RegPack, with the params "do not rename b", "2/1/0" and "longest strings first".
// The result weighs 1024b and is submitted to JS1k.

// Initialize Speech synthesis "s". (it takes a couple seconds to be fully operational on some browsers).
s=speechSynthesis;

// Use it to say the first 3 lyrics of the song, at 1.4s, 5.2s and 9s:
// - create a new SpeechSynthesisUtterance called "u" with the lyrics.
// - loop on s.getVoices to keep an english voice. (with the test: "lang.match(/en/)").
// - Make s speak with u.
setTimeout("u=new(SpeechSynthesisUtterance)('its a kind of magic');for(i of s.getVoices())if(i.lang.match(/en/))u.voice=i;s.speak(u)",1400);
setTimeout("u=new(SpeechSynthesisUtterance)('its a kind of magic');for(i of s.getVoices())if(i.lang.match(/en/))u.voice=i;s.speak(u)",5200);
setTimeout("u=new(SpeechSynthesisUtterance)('a kind of magic');for(i of s.getVoices())if(i.lang.match(/en/))u.voice=i;s.speak(u)",9000);

// Fill the body "b" with 3 emoji.
// "<center>" centers the content horizontally.
// "font:7em/99vh''" sets the font size to 7em and the line-height to 99vh (to center vertically).
// "<sup>" and "<sub>" make the 2nd and 3rd emoji a little higher and a little lower than the previous one. 
b.innerHTML="<center style=font:7em/99vh''>🕺<sup>🎵<sub>✨";

// The notes, encoded as a string.
d="r23b23/40474b-344r53b23b/403b75b5434s.4/403b75b/404s;5b29f35b1<c54c231;c24b27i55b24)5b23b26q24c4643bx76b2:d2345b09f44e28+3b28m95b034;c0304b434<c)3b44b44b2Fc:4c2:c23b45a0:e24c24/5b23b24/8n86b2449b07n&3b45b45b29k23b29b79b-@b05b24b04b29b44o4;b36c1<c75b2403b23b2Fc46b29c2;j)4c4643b2Fc56b29d2345b09f44e28+3b28m95b044:c0304b434@)344b44b2De:4c2:c23b45b0:e24c24/5b23b24/8n86b2449b07n&3b45b45b29k23b29b79b-@05b24b04b29b44m43b2;b36c1>75b2403b23b2Fe46b2<d2;i)3444He75b2=b55b2@b2Fk-5b2>55b2=d44c29b+3b27j94b24b24b241Ic)344b2:e2433b1>54c24c13b24c27n3443b2=0305b6Be+44J:3b2;b23b45b09f24c25/4c23b24/4r85c244<07n/656460B";

// Melody:
// Create an AudioContext and put it in the scope.
with(new AudioContext)

  // Start at frequency 880Hz, time=0, and loop on all the chars.
  for(f=880,t=i=0;i<604;i++)
    
    // Create an Oscillator and add it in the scope too.
    with(createOscillator())
    
      // If a charCode is 97 or more, increment t to create a silence.
      d.charCodeAt(i)>96
      ?
        t+=.11*(d.charCodeAt(i)-97)
      :
      
      // Else:
      (
        
        // Create a gainNode
        g=createGain(),
        
        // Connect the oscllator to the gain
        connect(g),
        
        // Connect the gain to the audioContext's destination
        g.connect(destination),
        
        // Change the frequency according to the first charCode - 50.
        // On a piano, all the notes frequencies are equal to the previous note times the twelveth square of 2.
        // i.e. f*=Math.pow(2,1/12)
        // Here, Math.pow(2,1/12) is rounded to 1.06.
        // To go N notes upper or lower, just repeat the operation N times,
        // i.e. f*=Math.pow(1.06,N)
        // (N can be positive or negative).
        frequency.value=f*=Math.pow(1.06,d.charCodeAt(i++)-50),
        
        // Set a super small gain to reduce the oscillator's volume (otherwise we wouldn't hear the speech synth)
        g.gain.value=.005,
        
        // Start the note at time t
        start(t),
        
        // Stop the note at time t + the next charCode - 50.
        stop(t+=.11*(d.charCodeAt(i)-50)),
        
        // Change the body's background (increment HSL's hue by 9 when a note is played).
        setTimeout('b.style.background="hsl('+i*9+',50%,50%)"',t*1e3)
      );
      
// Drums:
// Same as the melody except:
// - it starts at 12s
// - it loops 720 times
// - each note is 1 unit long (0.11s) and followed by a silence of 0.11s.
// - the frequency is 220Hz for the first 58 beats, then loops like: 277, 220, 220, 220, 277, 220, 220, 220, ...
with(new AudioContext)
for(t=12,i=0;i<720;i++)
  with(createOscillator())
    g=createGain(),
    connect(g),
    g.connect(destination),
    frequency.value=i<58|i%4?220:277,
    g.gain.value=.01,
    start(t+=.11),
    stop(t+=.11)