app.js

/*global Reveal*/

window.AUDIO_TIMER = 0;

Reveal.addEventListener('slidechanged', (event) => {
  if (window.location.search.match(/(controls=false|postMessageEvents=true)/i))
    return null;

  const slide = event.currentSlide;
  const options = slide.dataset;

  if (!options.soundMethod)
    return debug('no trigger for this slide');

  const method = soundMethods[options.soundMethod];

  if (!method)
    return window.alert("no method with that name");

  return method(options);
});


// pulled from http://gsgd.co.uk/sandbox/jquery/easing/
// t: current time, b: beginning value, c: change In value, d: duration
function easeInCubic(t, b, c, d) {
  return c*(t/=d)*t*t + b;
}

function easeOutCubic(t, b, c, d) {
  return c*((t=t/d-1)*t*t + 1) + b;
}

function debug() {
  if (!window.DEBUG) return;
  console.log.apply(console, arguments);
}

const soundMethods = {
  fadeInAndOut: (options) => {
    const element = document.getElementById(options.trackId);
    fadeIn({
      startAt: options.startAt,
      element: element,
      seconds: options.fadeIn,
      easing: window[options.fadeInEasing],
    })
      .then(() => wait(options.duration))
      .then(() => fadeOut({
        element: element,
        seconds: options.fadeOut,
        volume: options.endVolume || 0,
        updateFn: window[options.fadeOutUpdate],
      }))
      .then(() => debug('done'));
  },
  fadeOut: (options) => {
    const element = document.getElementById(options.trackId);
    fadeOut({
      element: element,
      seconds: options.fadeOut,
      volume: options.endVolume || 0,
      updateFn: window[options.fadeOutUpdate],
    });
  },
};


function play(element) {
  element.dataset.playing = true;
  element.play();
}

function pause(element) {
  element.dataset.playing = false;
  element.pause();
}

function wait(seconds) {
  const ms = seconds * 1000;
  debug('waiting for', seconds, 'seconds');
  return new Promise((resolve) => {
    setTimeout(() => {
      debug('done waiting');
      resolve();
    }, ms);
  });
}

function fadeIn(options) {
  debug('fading in');
  var {element, seconds, volume, easing, startAt} = options;

  easing = easing || easeOutCubic;
  volume = parseFloat(volume) || 1;
  seconds = parseFloat(seconds) || 5;
  startAt = parseFloat(startAt) || 0;

  const duration = seconds*1000;
  const frameSize = 33;

  element.volume = 0;
  element.fastSeek(startAt);
  play(element);

  if (element.volume >= volume)
    return new Promise(() => {});

  var ticks = 0;
  var newVolume = element.volume;

  return new Promise((resolve, reject) => {
    const fade = () => {
      window.AUDIO_TIMER = setTimeout(() => {
        ticks += 1;
        newVolume = easing(ticks * frameSize, 0, volume, duration);

        element.volume = Math.min(newVolume, volume);

        debug(element.volume);
        if (element.volume < volume)
          return fade();
        else
          return resolve(element);
      }, frameSize);
    };
    fade();
  });
}


function fadeOut(options) {
  debug('fading out...');
  var {element, seconds, volume, callback, easing, updateFn} = options;

  easing = easing || easeOutCubic;
  volume = parseFloat(volume) || 0;
  seconds = parseFloat(seconds) || 5;

  const duration = seconds*1000;
  const frameSize = 33;

  if (element.volume <= volume)
    return new Promise(() => {});

  var ticks = 0;
  var startingVolume = element.volume;
  var volumeChange = volume - startingVolume;
  var currentTime;
  var newVolume;

  return new Promise((resolve, reject) => {
    const fade = () => {
      window.AUDIO_TIMER = setTimeout(() => {
        ticks += 1;
        currentTime = ticks * frameSize;
        newVolume = easing(currentTime, startingVolume, volumeChange, duration);

        element.volume = Math.max(newVolume, volume);

        debug(element.volume);
        if (element.volume > volume) {
          if (updateFn)
            updateFn(element.volume);
          return fade();
        } else {
          if (element.volume === 0)
            pause(element);
          return resolve();
        }
      }, frameSize);
    };
    fade();
  });
}

index.html

<!doctype html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <title>Ladies and gentlemen we are floating in cyberspace</title>
    <link rel="stylesheet" href="css/reveal.css">
    <link rel="stylesheet" href="css/theme/custom.css" id="theme">

    <!-- Code syntax highlighting -->
    <link rel="stylesheet" href="lib/css/zenburn.css">

    <script src="lib/js/head.min.js"></script>
    <script src="js/reveal.js"></script>

  </head>

  <body>
    <audio preload
      id="i-think-im-in-love"
      src="sounds/i-think-im-in-love.ogg"
      data-artist="Spiritualized"
      data-album="Ladies And Gentlemen We Are Floating In Space"
      data-title="I Think I'm In Love"></audio>
    <audio preload
      id="rise-above"
      src="sounds/rise-above.ogg"
      data-artist="Black Flag"
      data-album="Damaged"
      data-title="Rise Above"></audio>
    <audio preload
      id="needle-in-the-camels-eye"
      src="sounds/needle-in-the-camels-eye.ogg"
      data-artist="Brian Eno"
      data-album="Here Come The Warm Jets"
      data-title="Needle In The Camel's Eye"></audio>
    <audio preload
      id="discreet-music"
      src="sounds/discreet-music.ogg"
      data-artist="Brian Eno"
      data-album="Discreet Music"
      data-title="Discreet Music"></audio>
    <audio preload
      id="sonata-4"
      src="sounds/sonata-4.ogg"
      data-artist="John Cage"
      data-album="Sonatas & Interludes for Prepared Piano"
      data-title="Sonata #4"></audio>
    <audio preload
      id="all-tomorrows-parties"
      src="sounds/all-tomorrows-parties.ogg"
      data-artist="The Velvet Underground & Nico"
      data-album="The Velvet Underground & Nico"
      data-title="All Tomorrow's Parties"></audio>
    <audio preload
      id="concrete-dreams"
      src="sounds/concrete-dreams.ogg"
      data-artist="Noveller"
      data-album="Fantastic Planet"
      data-title="Concrete Dreams"></audio>
    <audio preload
      id="gospel-last-time"
      src="sounds/gospel-last-time.ogg"
      data-artist="Choir?"
      data-album="N/A"
      data-title="This May Be The Last Time"></audio>
    <audio preload
      id="staple-singers-last-time"
      src="sounds/staple-singers-last-time.ogg"
      data-artist="The Staple Singers"
      data-album="?"
      data-title="This May Be The Last Time"></audio>
    <audio preload
      id="rolling-stones-last-time"
      src="sounds/stones-the-last-time.ogg"
      data-artist="The Rolling Stones"
      data-album="Out Of My Head"
      data-title="The Last Time"></audio>
    <audio preload
      id="oldham-the-last-time"
      src="sounds/oldham-the-last-time.ogg"
      data-artist="Andrew Oldham"
      data-album="The Rolling Stones Songbook"
      data-title="The Last Time"></audio>
    <audio preload
      id="verve-bittersweet-symphony"
      src="sounds/verve-bittersweet-symphony.ogg"
      data-artist="The Verve"
      data-album="Urban Hymns"
      data-title="Bitter Sweet Symphony"></audio>
    <audio preload
      id="when-you-sleep"
      src="sounds/when-you-sleep.ogg"
      data-artist="My Bloody Valentine"
      data-album="Loveless"
      data-title="When You Sleep"></audio>
    <audio preload
      id="smooth"
      src="sounds/smooth.ogg"
      data-artist="Santana featuring Rob Thomas of Matchbox 20"
      data-album="Supernatural"
      data-title="Smooth"></audio>

    <div class="reveal">

      <!-- Any section element inside of this container is displayed as a slide -->
      <div class="slides">

        <section>
          <!-- this is left blank on purpose -->
        </section>

        <section
          data-background="#fff"
          data-sound-method="fadeInAndOut"
          data-track-id="i-think-im-in-love"
          data-fade-in="2"
          data-duration="5"
          data-fade-out="23">

          <img class="full" src="images/floating-in-cyberspace.png">

          <div class="fragment overlay"></div>

          <div class="fragment current-visible overlay"
               style="background: none;
                      padding-top:150px;
                      text-shadow: 1px 1px 5px #fff">
            How music taught me to be a better developer
          </div>
          <div class="fragment current-visible overlay"
               style="background: none;
                      padding-top:150px;
                      text-shadow: 1px 1px 5px #fff">
            How development taught me to be a better musician
          </div>

        </section>

        <section>
          <!-- this is left blank on purpose -->
          <aside class="notes" data-markdown>
            - This slide is left blank on purpose
          </aside>
        </section>

        <section>
          <h1>2007</h1>
        </section>

        <section>
          <img class="full" src="images/me-first-show.jpg">
        </section>

        <section data-background="#0ab192">
          <img class="full" src="images/whus.png">
        </section>

        <section>
          <h1>2014</h1>
        </section>

        <section data-background="images/eastern-hollows.jpg">
        </section>

        <section data-background="images/me-bass-playing.jpg">
        </section>

        <section data-background="images/me-woods.jpg">
        </section>

        <section data-background="images/me-rooftop-band.jpg"
                 data-background-position="top left">
        </section>

        <section>
          <h1>Computers</h1>
        </section>

        <section data-background="images/me-programming.jpg">
        </section>

        <section data-background="#fff">
          <img class="full" src="images/bocoup-bob.png">
        </section>

        <section data-background="#fff">
          <img class="full" src="images/mozilla-dino.png">
        </section>

        <section data-background="#fff">
          <h1>Open Source</h1>
          <h2>Contributors are everything</h2>
        </section>

        <section
          data-background="#fff"
          data-sound-method="fadeInAndOut"
          data-track-id="rise-above"
          data-fade-in="0.1"
          data-duration="13"
          data-fade-out="10">
          <img class="full" src="images/black-flag-logo.jpg">
        </section>

        <section data-background="images/black-flag-band.jpg"
                 data-background-position="top left">
        </section>

        <section data-background="images/dez-black-flag.jpg">
        </section>

        <section data-background="images/henry-rollins-singing.jpg">
        </section>

        <section data-background="#fff">
          <img class="full"
               src="images/open-open-source.png"
               style="height: inherit;
                      max-width: 95%;">
        </section>

        <section data-background="#fff">
          <h1>Honor your contributors</h1>
        </section>


        <section>
          <p class="fancy-text">
            Innovation through limitation
          </p>
        </section>

        <section
          data-sound-method="fadeInAndOut"
          data-track-id="needle-in-the-camels-eye"
          data-fade-in="3"
          data-duration="8"
          data-fade-out="10"
          data-fade-out-update="fadeOutBrianEno">
          <p class="fancy-text">
            Brian Eno <br>
            Here Come the Warm Jets <br>
            1974
          </p>
        </section>

        <section
          data-sound-method="fadeInAndOut"
          data-track-id="discreet-music"
          data-start-at="60"
          data-fade-in="10"
          data-fade-in-easing="easeInCubic"
          data-duration="15"
          data-fade-out="10"
          data-end-volume="0.1">
          <img id="brian-eno-picture"
               class="full"
               style="margin-top: -1em;"
               src="images/eno.jpg">
          <script>
           function fadeOutBrianEno(opacity) {
             document.getElementById('brian-eno-picture').style.opacity = opacity;
           }
          </script>
        </section>

        <section>
          <p class="fancy-text">
            Brian Eno<br>
            Discreet Music<br>
            1975
          </p>
        </section>

        <section>
          <p class="fancy-text">
            Dave Shea<br>
            CSS Zen Garden<br>
            2003
          </p>
        </section>

        <section>
          <img class="full" src="images/css-zen-garden.png">
        </section>
        <section>
          <img class="full" src="images/css-zen-garden2.png">
        </section>
        <section>
          <img class="full" src="images/css-zen-garden3.png">
        </section>
        <section>
          <img class="full" src="images/css-zen-garden4.png">
        </section>
        <section>
          <img class="full" src="images/css-zen-garden5.png">
        </section>
        <section>
          <img class="full" src="images/css-zen-garden6.png">
        </section>

        <section
          data-sound-method="fadeOut"
          data-track-id="discreet-music"
          data-fade-out="5">
          <h1>Experiment</h1>
        </section>

        <section data-background="#fff">
          <p class="fancy-text">
            John Cage
          </p>
        </section>

        <section data-background="images/nic-cage.jpg">
        </section>

        <section data-background="images/john-cage.jpg">
        </section>

        <section data-background-video="movies/normal-nic-cage.mp4">
        </section>

        <section data-background-video="movies/feedback-nic-cage.mp4">
        </section>

        <section>
          <p class="fancy-text"">Be careful with recursion</p>
        </section>

        <section data-background="images/john-cage2.jpg">
        </section>

        <section data-background="#fff">
          <p class="fancy-text"">4′33″</p>
        </section>

        <section
          data-background="images/prepared-piano.jpg"
          data-sound-method="fadeInAndOut"
          data-track-id="sonata-4"
          data-fade-in="5"
          data-duration="10"
          data-fade-out="10">
        </section>

        <section>
          <p class="fancy-text" style="font-style:normal">Piano: The Good Parts</p>
          <h2> Chapter 1:</h2>
          <p>Don't stick a bunch of garbage in your piano</p>
        </section>

        <section
          data-background="images/velvet-underground.jpg"
          data-sound-method="fadeInAndOut"
          data-track-id="all-tomorrows-parties"
          data-start-at="11"
          data-fade-in="5"
          data-duration="15"
          data-fade-out="10">
        </section>

        <section data-background="#fff">
          <img class="full" src="images/the-weird-parts.png">
        </section>

        <section>
          <h1>Related pandering</h1>
        </section>

        <section data-background="images/bjorn-fongaard.jpg">
        </section>

        <section>
          <h1>Bjørn Fongaard</h1>
          <h2>
            født 2. mars 1919 i Oslo<br>
            død 26. oktober 1980
          </h2>
        </section>

        <section data-background="images/bjorn-fongaard-guitar.jpg">
        </section>

        <section data-background="images/sarah-lipstate-bow-guitar.jpg"
          data-sound-method="fadeInAndOut"
          data-track-id="concrete-dreams"
          data-start-at="0"
          data-fade-in="5"
          data-duration="15"
          data-fade-out="10">
        </section>

        <section>
          <p class="fancy-text">
            Explore what inspires you
            &<br>
            look for primary sources
          </p>
        </section>

        <section data-background="#f8f5ec">
          <h1>JSX</h1>
          <img src="images/react.png">
        </section>

        <section>
          <h1>vjeux</h1>
          <p class="fancy-text">
            “E4X The Good Parts”
          </p>
        </section>

        <section data-background="#fff">
          <img class="full" src="images/papers-we-love.png">
        </section>

        <section
          data-sound-method="fadeInAndOut"
          data-track-id="gospel-last-time"
          data-start-at="5"
          data-fade-in="1"
          data-duration="20"
          data-fade-out="5">
          <p class="fancy-text">Old Gospel Standard</p>
          <h2>This May Be The Last Time</h2>
        </section>

        <section data-background="images/staple-singers.jpg"
                 data-background-position="top left"
          data-sound-method="fadeInAndOut"
          data-track-id="staple-singers-last-time"
          data-fade-in="1"
          data-duration="20"
          data-fade-out="5">
        </section>

        <section>
          <p class="fancy-text">The Staple Singers</p>
          <h2>This May Be The Last Time</h2>
          <h3>1955</h3>
        </section>

        <section data-background="images/rolling-stones.jpg"
          data-sound-method="fadeInAndOut"
          data-track-id="rolling-stones-last-time"
          data-start-at="15"
          data-fade-in="5"
          data-duration="20"
          data-fade-out="5">
        </section>

        <section>
          <p class="fancy-text">The Rolling Stones</p>
          <h2>The Last Time</h2>
          <h3>1965</h3>
        </section>

        <section data-background="images/andrew-oldham-album.png"
                 data-background-position="bottom left"
          data-sound-method="fadeInAndOut"
          data-track-id="oldham-the-last-time"
          data-start-at="5"
          data-fade-in="5"
          data-duration="20"
          data-fade-out="5">
        </section>

        <section>
          <p class="fancy-text">The Andrew Oldham Orchestra</p>
          <h2>The Last Time</h2>
          <h3>1966</h3>
        </section>

        <section data-background="images/verve.jpg"
                 data-background-position="top left"
          data-sound-method="fadeInAndOut"
          data-track-id="verve-bittersweet-symphony"
          data-start-at="29"
          data-fade-in="5"
          data-duration="20"
          data-fade-out="5">
        </section>

        <section>
          <p class="fancy-text">The Verve</p>
          <h2>Bitter Sweet Symphony</h2>
          <h3>1997</h3>
        </section>

        <section data-markdown>
          - 392nd "The 500 Greatest Songs of All Time", Rolling Stone
          - \#9, "150 Best Tracks of the Past 15 Years", NME
          - Nominated, Grammy Award for Best Rock Song (1999)
        </section>

        <section>
          <p class="fancy-text"
             style="font-style:normal">$0 earned by The Verve</p>
        </section>

        <section>
          <p class="fancy-text">
            Recognize the risk of not respecting licenses
          </p>
        </section>

        <section data-background="#fff">
          <h1>Divya Manian</h1>
          <p class="fancy-text">
            “Burn Your Idols”
          </p>
        </section>

        <section
          data-background="images/loveless-cover.jpg"
          data-sound-method="fadeInAndOut"
          data-track-id="when-you-sleep"
          data-fade-in="4"
          data-duration="13"
          data-fade-out="10">
        </section>

        <section>
          <h1>Boz</h1>
          <p class="fancy-text">
            “Be Kind”
          </p>
        </section>

        <section data-background="#fff"
          data-sound-method="fadeInAndOut"
          data-track-id="smooth"
          data-fade-in="3"
          data-duration="17"
          data-fade-out="10">
          <p class="fancy-text">Thank you!</p>
        </section>

        <section>
          <ul>
            <script>
             (function(){
               const audioElements = document.getElementsByTagName('audio');
               [].forEach.call(audioElements, (el) => {
                 document.write(
                 '<li>' +
                 el.dataset.artist +
                 ' - ' +
                 el.dataset.title +
                 '</li>');
                 })
             })()
            </script>
          </ul>
        </section>

      </div>

    </div>

    <script>

     // Full list of configuration options available at:
     // https://github.com/hakimel/reveal.js#configuration
     Reveal.initialize({
       controls: false,
       progress: true,
       history: true,
       center: true,
       width: 1280,
       transition: 'fade', // none/fade/slide/convex/concave/zoom

       // Optional reveal.js plugins
       dependencies: [
         { src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
         { src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
         { src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
         { src: 'plugin/highlight/highlight.js', async: true, condition: function() { return !!document.querySelector( 'pre code' ); }, callback: function() { hljs.initHighlightingOnLoad(); } },
         { src: 'plugin/zoom-js/zoom.js', async: true },
         { src: 'plugin/notes/notes.js', async: true }
       ]
     });

    window.DEBUG = true;
    </script>
    <script src="js/app.js"></script>
  </body>
</html>