Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
/*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();
});
}
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment