Cannot get HTML audio element to play on Chrome Android (no progress unless muted)

Question

I'm posting this in case others have a similar problem.

I have a web app that uses the <audio> element. When the user clicks a button, I set the src attribute on the <audio> element to a URL of a mp3 file, then I call .load() and then .play(). The play() method's Promise resolves properly.

On the web, this works, I hear the music. On Android Chrome, the audio did not play:

• The Play/Pause control showed the Pause icon (indicating the audio element thinks it's playing).
• The progress on the track stayed frozen at the beginning 0:00.
• If I muted the element, the track started playing.
• If I just browsed to the URL of the mp3 file in Chrome, the audio loaded and I could play the song.

Anybody out there know why?

Answer 1

After a bunch of playing around and debugging, on a whim I finally removed some code I had planned to experiment with around audio context / graph:

const audioCtx = new AudioContext();
const sourceNode = audioCtx.createMediaElementSource(this.audioElem);

After remove these lines - the <audio> element played properly!