javascript - Inconsistent audio playback from audio tag in Safari on laptop

Question

Using React, I'm using JavaScript (play()) to make two audio tags play 2 different .mp3 files (at completely separate times). The .mp3 files are short (less than a second).

import sound1 from 'sound1.mp3';
import sound2 from 'sound2.mp3';

<audio controls muted>
  <source src={sound1}></source>
</audio>

<audio controls muted>
  <source src={sound2}></source>
</audio>

audio {
  display: none;
}

1. In Safari 13.1.2, on my 13-inch MacBook Catalina, often, one of the sounds plays imperfectly - it's as if the start of the sound isn't heard. Here's a video of me demonstrating what the sound's really like against what it should be like. When the black piece moves, you'll need to turn your volume all the way up to hear a quiet, echoey noise. Then I play you how that file's supposed to sound.

2. When on my iPhoneX, in Chrome & Safari, the same sound (seemingly) fails to play at all. This may be explained by this SO answer which says that sound won't play unless from a callback from an event handler that involves the user's physical participation e.g. click. This theory fits my case.

My question is similar to this post and this post which got no response. If you think it'd be useful for me to recreate this problem with a Sandbox I could try.

---

Personal note:

On my 13-inch MacBook Catalina:

• on Chrome both sounds work fine.
• in Safari, sound2 works imperfectly.

on my IPhoneX:

• on Chrome & Safari sound2 is sometimes audible later on.

---

EDIT:

In this video you can hear me playing back the problematic audio file in Finder. I play it the first time - fine; but the second+ time it makes the same incorrect sound heard in the browser!

Replacing the problematic audio file with a different audio-file brings success - and suggests the problem lies with the audio-file and not my implementation of it in the website. I'm willing to reframe this problem as a poorly performing audio-file but I really don't know. If this were the problem, my only recourse to avoid it would be replaying the audio-file in Finder and making sure it plays a consistent sound.

question from:https://stackoverflow.com/questions/66052832/inconsistent-audio-playback-from-audio-tag-in-safari-on-laptop

Answer 1

Waitting for answers