$(window).load(
  function() {
    var slides = [];
    var audio = $("audio#main").get(0);

    $("#slides .slide").each(
      function() {
        var rawTimestamp = $(this).attr("data-at");
        var timestamp = parseFloat(rawTimestamp);
        if (isNaN(timestamp))
          throw new Error("bad 'data-at' attribute: " + rawTimestamp);
        slides.push({timestamp: timestamp, element: this});
      });

    function findSlideElementForTime(timestamp) {
      var bestElement;

      for (var i = 0; i < slides.length; i++) {
        var slide = slides[i];
        if (slide.timestamp < timestamp)
          bestElement = slide.element;
      }

      return bestElement;
    }

    function maybeChangeSlide() {
      var element = findSlideElementForTime(audio.currentTime);
      if (element && !$(element).hasClass("visible")) {
        $("#slides .visible").removeClass("visible");
        $(element).addClass("visible");
      }
    }

    audio.addEventListener("timeupdate", maybeChangeSlide, false);
  });