CODEWITHSUNDEEP
androidgoogle-chromeaudio
Rodrigo
Rodrigo

Reputation: 5129

Why music won't play on Chrome for Android?

My website plays a background song and some audio effects at the same time. Although the song loads fine (I can see its duration via Audio.duration property), it doesn't play, while the audio effects play (I have already clicked on the screen to activate audio playing). On Firefox in my PC it plays without problem. The audio file is a 10 MB mp3 (but my Android is at home wi-fi). Below is part of my code.

var music,clicked=false,downloaded=false;

function play() {
    music.play();
}

function canPlay() {
    downloaded = true;
    if (clicked) {
        play();
    }
}

function touchStart(e) {
    if (!clicked) {
        clicked = true;
        if (downloaded) {
            play();
        }
    }
}

function load() {
    music = new Audio('mp3/music.mp3');
    music.addEventListener('canplaythrough',canPlay,false);
    window.addEventListener('touchstart',touchStart,false);
}

The load function is called in the onload of body. The clicked and downloaded variables are required because I never know what happens first: the user click or the audio finish downloading.

On Google mobile-friendly test, it says the audio file couldn’t be loaded (Status: Other error). I've read this test doesn't wait for more than 3 seconds. However, reading the time of the song in seconds doesn't prove it has downloaded?

Why won't the song play on mobile?

EDIT

I created a timer interval that tells me the position (music.currentTime) of the song once every minute. On desktop, it gives the right time. On mobile, it always gives 0, meaning that the song, although loaded (?), isn't really being played.

EDIT 2

I investigated the promise returned by music.play(), and noticed it was giving the error: "(NotAllowedError: play() failed because the user didn't interact with the document first)". It seems that touchStart doesn't count as a "user interaction" the way that mouseDown does...

Upvotes: 0

Views: 204

Answers (1)

Rodrigo
Rodrigo

Reputation: 5129

In the end, I removed both touchStart and touchEnd (each with his own preventDefault), leaving the song to be played after the resulting mouseDown. I've kept the touchMove, however, because it's different from the mouseMove, and required for my site.

Upvotes: 1

Related Questions