Tags: 140

98

sparkline

Friday, January 8th, 2021

Reading Humankind: A Hopeful History by Rutger Bregman, translated by Elizabeth Manton and Erica Moore.

Buy this book

Monday, December 21st, 2020

Web Audio API weirdness on iOS

I told you about how I’m using the Web Audio API on The Session to generate synthesised audio of each tune setting. I also said:

Except for some weirdness on iOS that I had to fix.

Here’s that weirdness…

Let me start by saying that this isn’t anything to do with requiring a user interaction (the Web Audio API insists on some kind of user interaction to prevent developers from having auto-playing sound on websites). All of my code related to the Web Audio API is inside a click event handler. This is a different kind of weirdness.

First of all, I noticed that if you pressed play on the audio player when your iOS device is on mute, then you don’t hear any audio. Seems logical, right? Except if using the same device, still set to mute, you press play on a video or audio element, the sound plays just fine. You can confirm this by going to Huffduffer and pressing play on any of the audio elements there, even when your iOS device is set on mute.

So it seems that iOS has different criteria for the Web Audio API than it does for audio or video. Except it isn’t quite that straightforward.

On some pages of The Session, as well as the audio player for tunes (using the Web Audio API) there are also embedded YouTube videos (using the video element). Press play on the audio player; no sound. Press play on the YouTube video; you get sound. Now go back to the audio player and suddenly you do get sound!

It’s almost like playing a video or audio element “kicks” the browser into realising it should be playing the sound from the Web Audio API too.

This was happening on iOS devices set to mute, but I was also getting reports of it happening on devices with the sound on. But it’s that annoyingly intermittent kind of bug that’s really hard to reproduce consistently. Sometimes the sound doesn’t play. Sometimes it does.

Following my theory that the browser needs a “kick” to get into the right frame of mind for the Web Audio API, I resorted to a messy little hack.

In the event handler for the audio player, I generate the “kick” by playing a second of silence using the JavaScript equivalent of the audio element:

var audio = new Audio('1-second-of-silence.mp3');
audio.play();

I’m not proud of that. It’s so hacky that I’ve even wrapped the code in some user-agent sniffing on the server, and I never do user-agent sniffing!

Still, if you ever find yourself getting weird but inconsistent behaviour on iOS using the Web Audio API, this nasty little hack could help.

Sunday, August 2nd, 2020

Replying to

But all off the border- properties are specified in long hand. Neither Firefox nor Chrome shows their computed values in dev tools.

Wednesday, June 17th, 2020

Replying to

All browsers: contaaaaaainer queeeeerieeees!!!

Safari specifically: ambient badging (add to home screen) for progressive web apps.

Sunday, June 7th, 2020

Tuesday, May 19th, 2020

Replying to

It is supported in Safari (although I think I may have uncovered a bug in Safari with my particular use case).

Tuesday, April 28th, 2020

Replying to

There’s a fine line between “adoption in one engine” and “one engine making shit up”.

Friday, April 3rd, 2020

Brighton and Hove mobility data from Google for the past six weeks compared to baseline: * Retail and recreation: -89% * Grocery and pharmacy: -48% * Parks: -59% * Transit stations: -77% * Workplace: -64% * Residential: +30%

Brighton and Hove mobility data from Google for the past six weeks compared to baseline:

  • Retail and recreation: -89%
  • Grocery and pharmacy: -48%
  • Parks: -59%
  • Transit stations: -77%
  • Workplace: -64%
  • Residential: +30%

Monday, March 30th, 2020

Replying to

❤️

Sunday, March 29th, 2020

Reading The Fabric Of Reality by David Deutsch.

Buy this book

Saturday, March 21st, 2020

Cheers!

Cheers!

Thursday, March 19th, 2020

Replying to

Knock knock.

Who’s there?

Control freak—now you say “Control freak who?”

Saturday, January 11th, 2020

Replying to

Thursday, December 12th, 2019

Picture 1 Picture 2
map

Checked in at La Taqueria

Monday, November 25th, 2019

Hanging out with Ramón and @Eva_trostlos in Vienna for the @WeAreWebClerks conference.

Hanging out with Ramón and @Eva_trostlos in Vienna for the @WeAreWebClerks conference.

Wednesday, November 13th, 2019

Replying to

Franzbrötchen?

Ich komme gleich. Bis bald!

Monday, November 4th, 2019

Replying to

Excellent—your technique is very similar to @wordridden’s. We should compare sometime (hint, hint).

Saturday, October 26th, 2019

Checked in at Brussels Central Station (Station Brussel-Centraal). with Jessica map

Checked in at Brussels Central Station (Station Brussel-Centraal). with Jessica

Friday, October 4th, 2019

Fact-checking @SlightlyLate: it’s true that desktop-first responsive design didn’t work—that never worked—mobile-first responsive design has always been the smart move. Don’t tar all responsive design with a desktop brush.

Tuesday, October 1st, 2019

Replying to

Is that Do Androids Dream Of Electric Sheep? I think in Ubik he also invented 80% of the Internet Of Things with a door that demands payment before opening.