Динамически создаваемый аудиообъект не воспроизводится в браузере Android Chrome

Я пытаюсь написать RIA, которую можно использовать как в мобильных, так и в настольных браузерах. Одной из основных целей этого приложения является воспроизведение звуков. Там может быть Х много (на данный момент их 150+)

При определенных действиях пользователя я хочу создать новый аудиообъект, загрузить определенный клип и воспроизвести его. В идеале я бы создал новый объект 'Audio', установил бы ожидание загрузки src, а затем проиграл. Это работает в различных браузерах для настольных компьютеров, однако, похоже, не работает на Android 4.2, Chrome и стандартных браузерах.

Я пробовал 4 разных способа включения звука:

  1. Включая (в html) только аудиоблок, загружайте его во время выполнения и вызывайте.play(); Это работает, однако, это означает, что я должен создать более 150 аудио блоков. (это работает везде)
  2. Создайте новый экземпляр 'Audio' и динамически установите атрибут.src, а затем при loadcomplete вызовите.play() (похоже, это работает только в браузерах для настольных компьютеров, а НЕ на моем мобильном)
  3. Используйте jQuery для создания нового аудио тега, добавления в dom, ожидания загрузки и воспроизведения (похоже, это работает только в браузерах для настольных компьютеров, а НЕ на моем мобильном)
  4. Добавьте звуковые теги в html, указав, что они не загружаются, дождитесь взаимодействия с пользователем, затем загрузите его, дождитесь его подготовки, затем воспроизведите (это работает везде).

Итак, большой вопрос, есть идеи, почему это не работает?

** Редактировать ** Я знаю, что одновременно можно воспроизвести только 1 файл, и это то, что я пытаюсь сделать здесь. Проект (функционально) аналогичен телефонной службе, где 1 человек записывает номера 0–9, затем "говорит" телефонный номер, поэтому "5". "5". "5". "0". "1..... и т. д. Итак, 1 аудиопоток за раз вполне приемлем... Просто проблема в том, чтобы его воспроизвести.

На данный момент у меня есть следующий код, который также можно найти здесь

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
    var $a1, $a2, $a3, $a4;
    $(document).ready( function(){
        _setupVars();
        _addListeners();
    })

    function _setupVars(){
        $a1 = $( "#audio1");
        $a2 = $( "#audio2");
        $a3 = $( "#audio3");
        $a4 = $( "#audio4");
    }

    function _addListeners(){
        $a1.click( _handleAudio1 );
        $a2.click( _handleAudio2 );
        $a3.click( _handleAudio3 );
        $a4.click( _handleAudio4 );
    }

    function _handleAudio1 (){
        $("#america")[0].play();
    }

    function _handleAudio2 (){
        var a = new Audio();

        $(a).on("canplay", function(){
            a.play();
        })

        if(a.canPlayType("audio/mp3"))
            a.src = "audio/test2.mp3";
        else if(a.canPlayType("audio/ogg"))
            a.src = "audio/test2.ogg";
    }

    function _handleAudio3 (){
        var $x = $('<audio id="says">'+
                '<source src="audio/test3.mp3">'+
                '<source src="audio/test3.ogg">'+
                '</audio>');
        $x.on("canplay", function(){
            $x[0].play();
        })
        $("#audioCont").append($x);
    }

    function _handleAudio4(){
        var $x =$("#cat");
        $x.on("canplay", function(){
            $x[0].play();
        })
        $x[0].load();
    }

</script>
</head>
<body>
    <input type="button" id="audio1" value="play Audio Tag"/><br />
    <input type="button" id="audio2" value="play audio object"/><br />
    <input type="button" id="audio3" value="play dynamic Audio Tag"/><br />
    <input type="button" id="audio4" value="play load Audio Tag, then play"/><br />
    <audio id="america">
        <source src="audio/test1.mp3">
        <source src="audio/test1.ogg">
    </audio>
    <audio id="cat">
        <source src="audio/test4.mp3">
        <source src="audio/test4.ogg">
    </audio>

</body>
</html>
Источник

2 ответа

В настоящее время в Chrome для Android существует явная необходимость для пользователя "вызывать" воспроизведение с помощью жеста для воспроизведения звука. Существовали опасения по поводу перегрузки полосы пропускания мобильных устройств или создания раздражающих всплывающих окон, которые просто воспроизводят звук - что является одной из причин, по которой он отключен по умолчанию.

Мы планируем изменить это, и если вы используете бета-версию Chrome на Android, вы можете перейти по этой ссылке chrome://flags/#disable-gesture-requirement-for-media-playback и это позволит вам переключить это поведение. Мы работаем над этой проблемой, и вы можете следить за ней на ошибке 160536

Источник

Методы 1, 2 и 3 не будут работать на iOS. К сожалению, большинство мобильных устройств ограничивают звук HTML5 одним источником, воспроизводимым одновременно. iOS требует взаимодействия с пользователем, чтобы начать воспроизведение мультимедиа (загрузка не учитывается).

Источник
Другие вопросы по тегам