🔊 slide-tone | xaringanExtra

class: center, middle, inverse, title-slide

.title[
# xaringan<br/>slide-change sounds<br/>using tone.js
]
.subtitle[
## 🔊
]
.author[
### <a href='https://www.garrickadenbuie.com/'>Garrick Aden-Buie<a>
]
.date[
### xaringanExtra
]

---

## tone.js demo

<iframe height="450" style="width: 100%;" scrolling="no" title="tone-js-single-note-demo" src="https://codepen.io/grrrck/embed/abogWXm?height=265&theme-id=light&default-tab=html,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href='https://codepen.io/grrrck/pen/abogWXm'>tone-js-single-note-demo</a> by garrick
  (<a href='https://codepen.io/grrrck'>@grrrck</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

---

class: center middle

## But wait...

--

This 
--
slide 
--
builds 
--
suspense...

---

class: center middle
layout: true

---

# A

---

# B

---

# C

---

# D

---

# E

---

# F

---

# G

---

# H

---

# I

---

# J

---

# K

---

# L

---

# M

---

# N

---

# O

---

# P

---

# Q

---

# R

---

# S

---

# T

---

# U

---

# V

---

# W

---

# X

---

# Y

---

# Z

---
layout: false
class: center middle

<img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" width="25%" alt="GitHub Octocat Logo" />

### [gadenbuie/xaringanExtra](https://github.com/gadenbuie/xaringanExtra)

<style type="text/css">
/* Fancy Giant Letters */
.remark-slide-content h1 {
  margin: 0;
  background: -webkit-linear-gradient(#0cbaba, #01baef);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.remark-slide-content:not(.title-slide) h1 {
  font-size: 30em;
  line-height: 1;
  text-shadow: 1px 4px 6px rgba(255,255,255,0.3);
}
a {
  color: #01baef;
}
a:hover {
  color: #0cbaba;
}
.remark-slide .title-slide h3 {
  color: #8d9597;
}
</style>