revealjs: slide-tone plugin

Author: jjallaire

src/format/reveal/format-reveal-plugin.ts

@@ -11,7 +11,9 @@ import { kIncludeInHeader } from "../../config/constants.ts";
 
 import {
   Format,
+  FormatDependency,
   FormatExtras,
+  kDependencies,
   kTemplatePatches,
   Metadata,
 } from "../../config/types.ts";
@@ -24,6 +26,8 @@ import { revealMultiplexPlugin } from "./format-reveal-multiplex.ts";
 
 const kRevealjsPlugins = "revealjs-plugins";
 
+const kRevealSlideTone = "slide-tone";
+
 interface RevealPluginBundle {
   plugin: string;
   config?: Metadata;
@@ -52,14 +56,24 @@ export function revealPluginExtras(format: Format, revealDir: string) {
   const scripts: RevealPluginScript[] = [];
   const stylesheets: string[] = [];
   const config: Metadata = {};
+  const dependencies: FormatDependency[] = [];
 
-  // built-in plugins + user plugins
+  // built-in plugins
   const pluginBundles: Array<RevealPluginBundle | string> = [
     {
       plugin: formatResourcePath("revealjs", join("plugins", "line-highlight")),
     },
     { plugin: formatResourcePath("revealjs", join("plugins", "a11y")) },
   ];
+
+  // tone plugin (optional)
+  const tonePlugin = revealTonePlugin(format);
+  if (tonePlugin) {
+    dependencies.push(toneDependency());
+    pluginBundles.push(tonePlugin);
+  }
+
+  // multiplex plugin (optional)
   const multiplexPlugin = revealMultiplexPlugin(format);
   if (multiplexPlugin) {
     pluginBundles.push(multiplexPlugin);
@@ -127,6 +141,7 @@ export function revealPluginExtras(format: Format, revealDir: string) {
   const extras: FormatExtras = {
     [kIncludeInHeader]: [],
     html: {
+      [kDependencies]: dependencies,
       [kTemplatePatches]: [],
     },
   };
@@ -190,6 +205,25 @@ export function injectRevealConfig(
   return template;
 }
 
+function revealTonePlugin(format: Format) {
+  if (format.metadata[kRevealSlideTone]) {
+    return { plugin: formatResourcePath("revealjs", join("plugins", "tone")) };
+  } else {
+    return undefined;
+  }
+}
+
+function toneDependency() {
+  const dependency: FormatDependency = {
+    name: "tone",
+    scripts: [{
+      name: "tone.js",
+      path: formatResourcePath("revealjs", join("tone", "tone.js")),
+    }],
+  };
+  return dependency;
+}
+
 function pluginFromBundle(bundle: RevealPluginBundle): RevealPlugin {
   // confirm it's a directory
   if (!existsSync(bundle.plugin) || !Deno.statSync(bundle.plugin).isDirectory) {

src/resources/formats/revealjs/plugins/tone/plugin.js

@@ -0,0 +1,53 @@
+window.QuartoTone = function () {
+  return {
+    id: "quarto-tone",
+    init: function (deck) {
+      function slideToneScale(i) {
+        // https://www.intmath.com/trigonometric-graphs/music.php
+        const note = 15 - (deck.getTotalSlides() - i);
+        return 440 * 2 ** (note / 12);
+      }
+
+      /*
+       * Sliding tones between C3 and C5 with equal steps between tones
+       * but not aligned to musical scale
+       */
+      function slideToneBounded(i, lower = 261.63, upper = 1046.5) {
+        const step = (upper - lower) / deck.getTotalSlides();
+        return lower + step * i;
+      }
+
+      /*
+       * Choose slide tone scale automatically based on number of slides.
+       * If there are <= 32 slides, use musical scale.
+       */
+      function slideToneAuto(toneIdx) {
+        return deck.getTotalSlides() > 32
+          ? slideToneBounded(toneIdx)
+          : slideToneScale(toneIdx);
+      }
+
+      const synth = new Tone.Synth({
+        oscillator: {
+          type: "sine",
+        },
+        envelope: {
+          attack: 0.001,
+          decay: 0.2,
+          sustain: 0.2,
+          release: 1,
+        },
+      }).toMaster();
+
+      const playTone = () => {
+        synth.triggerAttackRelease(
+          slideToneAuto(deck.getSlidePastCount()),
+          "8n"
+        );
+      };
+      deck.on("slidechanged", playTone);
+      deck.on("fragmentshown", playTone);
+      deck.on("fragmenthidden", playTone);
+    },
+  };
+};

src/resources/formats/revealjs/plugins/tone/plugin.yml

@@ -0,0 +1,3 @@
+# adapted from https://github.com/gadenbuie/xaringanExtra/blob/master/docs/slide-tone/libs/slide-tone/slide-tone.js
+name: QuartoTone
+script: plugin.js