JSFiddle - React, Tailwind, and code Playground

by Bryan Braun

HTML

<script src="https://unpkg.com/tone@next"></script>

<button id="tone">
  Play tone
</button>

<button id="interrupt">
  Interrupt Audio
</button>

<button id="resume">
  Tone's Context.resume()
</button>

<button id="better-resume">
  Browser's AudioContext.resume()
</button>

<hr>

<p>Steps to reproduce</p>
<ol>
<li><b>In Safari</b>, click "play tone" and confirm that it plays.</li>
  <li>Click Interrupt Audio, to put the audioContext into "interrupted".</li>
  <li>In Safari, click "play tone" and confirm that it DOESN'T play.</li>
  <li>Click "Tone's Context.resume()" followed by "Play tone" and confirm that it DOESN'T play.</li>
  <li>Click "Browser's AudioContext.resume()" followed by "Play tone" and confirm that it plays.</li>
</ol>

JavaScript

var synth = new Tone.Synth().toMaster()
Tone.start()

document.getElementById('tone').addEventListener('click', event => {
	synth.triggerAttackRelease("C4", "8n")
});

document.getElementById('interrupt').addEventListener('click', event => {
	window.confirm("I am an interruption. Other interruptions could include an incoming call or the headphones being removed.");
});

document.getElementById('resume').addEventListener('click', event => {
	Tone.getContext().resume();
});

document.getElementById('better-resume').addEventListener('click', event => {
	Tone.getContext()._context.resume();
});