fix: resume audio context on click to fix iOS Safari

gregjopa · Apr 1, 2023 · b79e598 · b79e598
1 parent 62cb98e
commit b79e598
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -23,7 +23,8 @@ import { Footer } from "./components/Footer";
 
 import "./App.css";
 
-const { playNote, playPowerChord, playDiminishedChord } = new AudioPlayer();
+const { playNote, playPowerChord, playDiminishedChord, resumeAudioContext } =
+ new AudioPlayer();
 
 function App() {
  const [actualNote, setActualNote] = useState<Note>(defaultNote);
@@ -180,7 +181,10 @@ function App() {
 
  return (
  <>
- <div className="mx-auto h-[900px] max-w-2xl bg-slate-50 px-8 pb-8 text-lg text-slate-600 md:border-x md:border-b md:border-solid md:border-gray-500">
+ <div
+ className="mx-auto h-[900px] max-w-2xl bg-slate-50 px-8 pb-8 text-lg text-slate-600 md:border-x md:border-b md:border-solid md:border-gray-500"
+ onClick={resumeAudioContext}
+ >
  <Header />
  <ErrorBoundary
  FallbackComponent={ErrorFallback}

diff --git a/src/audio.ts b/src/audio.ts
@@ -15,6 +15,7 @@ export class AudioPlayer {
  this.playNote = this.playNote.bind(this);
  this.playPowerChord = this.playPowerChord.bind(this);
  this.playDiminishedChord = this.playDiminishedChord.bind(this);
+ this.resumeAudioContext = this.resumeAudioContext.bind(this);
 
  this.audioContext = this.getCrossBrowserAudioContext();
  const audioExtension = this.getSupportedAudioExtension();
@@ -126,6 +127,12 @@ export class AudioPlayer {
  ];
  }
 
+ resumeAudioContext() {
+ if (this.audioContext && this.audioContext.state === "suspended") {
+ this.audioContext.resume();
+ }
+ }
+
  playNote(noteValue: NoteValue, octave: Omit<Octave, 1 | 7>) {
  if (!this.audioContext || !this.samples) {
  return;