Почему HTML5 audio не всегда работает на Android?

Question

[froosty]

Доброго времени суток. Возникла проблема с тегом audio на андроиде. Есть вот такой код:

function Sounds(){
    this.sounds =  {
        chat: {
            ogg: '/sounds/mail.ogg',
            mp3: '/sounds/mail.mp3',
        },
        like: {
            ogg: '/sounds/like.ogg',
            mp3: '/sounds/like.mp3',
        },
        mail: {
            ogg: '/sounds/mail.ogg',
            mp3: '/sounds/mail.mp3',
        },
        view: {
            ogg: '/sounds/view.ogg',
            mp3: '/sounds/view.mp3',
        },
        charms: {
            ogg: '/sounds/visibilitybar_female.ogg',
            mp3: '/sounds/visibilitybar_female.mp3',
        }
    };

    this.Init();

    return this;
};

function CreatePlayer(sounds){
    $('body').append('<audio id="notificationPlayer2"></audio>');
    sounds.$player = $('#notificationPlayer2');
    sounds.player = sounds.$player.get(0);
}

Sounds.prototype.Init = function(){
    this.isPlaying = false;
};

Sounds.prototype.play = function(sound){
    if (this.isPlaying){
        return;
    }
    if (typeof(this.$player) != 'undefined'){
        this.$player.remove();
    }
    if (typeof(this.sounds[sound]) == 'undefined'){
        return;
    }

    CreatePlayer(this);
    this.isPlaying = true;

    var source = '';
    for (var k in this.sounds[sound]){
        source += '<source src="' + this.sounds[sound][k] + '" type="audio/' + k + '">';
    }
    this.$player.html(source);
    this.player.play();

    var _this = this;

    this.$player.unbind('ended');
    this.$player.bind('ended', function(e){
        _this.$player.html('');
        _this.isPlaying = false;
    });
};

var sounds = new Sounds();

socket.on('action_likes', function(){
    sounds.play('like');
});
socket.on('received_mail', function(){
    sounds.play('mail');
});
$(document).on('mail_sended', function(){
    sounds.play('mail');
});
socket.on('chat_message', function(){
    sounds.play('chat');
});
$(document).on('chat_sended', function(){
    sounds.play('chat');
});
socket.on('action_charms', function(){
    sounds.play('charms');
});

Т.е. если приходит событие через websocket, то проигрывается определённый звук. Если работать с компьютера, то всё ок, всё работает. На мобильном звуки не проигрываются. Проверил, сообщение через сокеты приходят, не проигрывается именно звук. Самое интересное, что если добавить кнопку на страницу и повесить на неё обработчик, который запускает sounds.play (т.е. тоже самое, что в обработчике события сокета), то звук воспроизводится. А вот именно по приходу сообщения через сокет, почему-то не хочет воспроизводиться. Может кто-то подскажет, в чём может быть проблема? Заранее спасибо за ответ.

Answer 1

[Евгений Петров]

Десятки аналогичных вопросов заполонили stackoverflow, да и на Тостере появляются с завидной регулярностью.
API мобильных браузеров (iOS и Android) запрещают автозапуск для audio и video. Только физический тап пользователя на элементе, и только так.

В решениях, подобных этому, есть апдейты, в которых зафиксирована тщетность попыток преодолеть этот запрет.

Comments

[froosty]

Спасибо за ответ =)