Merge pull request zz85#10 from earboxer/fixAudioContextStartPerm

Fix AudioContext start permission for Chrome autoplay policy
14725 · Nov 23, 2020 · 1800e92 · 1800e92
2 parents 45e8760 + ee77c46
commit 1800e92
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 12 deletions.
diff --git a/README.md b/README.md
@@ -19,6 +19,7 @@ node make
 ```
 
 Updates
+- 22 October 2020 - Fix AudioContext creation for autoplay policy in Chrome >= 71
 - 31 July 2015 - Allow seeking in streaming web audio mode, improved player controls, added reverb and resampling
 - 21 July 2015 - Implementation of Circular Buffer Queue fixes clicks/pops/static with custom Web Audio Rendering
 - 19 July 2015 - switch to 44.1K rendering

diff --git a/index.html b/index.html
@@ -402,6 +402,7 @@ <h2>Wild Web Midi</h2>
       }
 
       function runConversion() {
+        if(!audioIsInitted){initAudio();}
         convertionJob = {
           sourceMidi: 'freepats/' + midiName,
           targetWav: midiName.replace(/\.midi?$/i, '.wav'),

diff --git a/web_audio_player.js b/web_audio_player.js
@@ -1,7 +1,7 @@
 /*
  * Circular Web Audio Buffer Queue
  */
-function CircularAudioBuffer(slots) {
+function CircularAudioBuffer(slots, audioCtx) {
 	slots = slots || 24; // number of buffers
 	this.slots = slots;
 	this.buffers = new Array(slots);
@@ -61,17 +61,26 @@ var BUFFER = 4096; // buffer sample
 var channels = 2;
 
 // Create AudioContext and buffer source
-var audioCtx = new AudioContext();
-var source = audioCtx.createBufferSource();
-var scriptNode = audioCtx.createScriptProcessor(BUFFER, 0, channels);
-
-var circularBuffer = new CircularAudioBuffer(4);
-
-var emptyBuffer = audioCtx.createBuffer(channels, BUFFER, SAMPLE_RATE);
+var audioCtx;
+var source;
+var scriptNode;
+var circularBuffer;
+var emptyBuffer;
+var audioIsInitted = false;
+
+function initAudio() {
+    audioCtx = new window.AudioContext();
+    scriptNode = audioCtx.createScriptProcessor(BUFFER, 0, channels);
+    scriptNode.onaudioprocess = onAudioProcess;
+
+    source = audioCtx.createBufferSource();
+    circularBuffer = new CircularAudioBuffer(4, audioCtx);
+    emptyBuffer = audioCtx.createBuffer(channels, BUFFER, SAMPLE_RATE);
+
+    source.connect(scriptNode);
+    source.start(0);
+}
 
-scriptNode.onaudioprocess = onAudioProcess;
-source.connect(scriptNode);
-source.start();
 
 function startAudio() {
 	scriptNode.connect(audioCtx.destination);
@@ -110,4 +119,4 @@ function onAudioProcess(audioProcessingEvent) {
 setInterval(function() {
 	console.log('audio queue', circularBuffer.filledBuffers());
 }, 5000);
-*/
+*/