Почему не проигрывается аудио в мобильных браузерах?

Question

[Stanislav_Bykov]

Добрый день!

Делаю сайт, на котором при нажатии кнопки должно проигрываться аудио. Создаю новое аудио (let audio = new Audio(src)), далее при нажатии на кнопку запускаю его (audio.play()). На компьютере все работает отлично (в том числе на эмуляторе мобильного устройства), а в мобильном браузере (Chrome) звук не идет (хотя кнопка точно нажимается, т.к. при нажатии она меняет цвет). Думал, что возможная проблема в том, что не хватает кодеков, но если разместить с элементами управления, то при нажатии на плей звук идет. Не подскажите, как решить данную проблему?

Answer 1

[Stanislav_Bykov]

Оказывается <аудио> слабо поддерживается мобильными браузерами, но Web Audio API поддерживается "на ура". С его помощью все получилось сделать.

Comments

[Alexander]

Много дней убил ?

[Stanislav_Bykov]

Нет. В тот же день нашел примерное решение и еще за день адаптировал под свою задачу.

Answer 2

[Alexander]

Comments

[Stanislav_Bykov]

Т.е. функция .play() не поддерживается в Chrome mobile? Каким образом тогда можно сделать так, что бы по нажатию кнопки звук воспроизводился?

[Alexander]

Stanislav_Bykov, А это, уже совсем другая история.

[Stanislav_Bykov]

Alexander, ну хотя бы в какую сторону посмотреть?

[Alexander]

Stanislav_Bykov, можно попробовать как тут https://stackoverflow.com/questions/40433011/how-t...

[Stanislav_Bykov]

Alexander, как там тоже не работает. Я гуглил данную проблему, везде один и тот же ответ - запускать аудио кликом на какую-нибудь кнопку, которая запускает функцию .play(). Но сама эта функция почему-то не запускает файл, но если запустить вручную на кнопку плей (в controls), то останавливать звук и запускать заново функцией .play() получается.

[Alexander]

Stanislav_Bykov, У меня была та же проблема, я как и вы не нашел решения. Сказал заказчику что данная технология не поддерживается на мобильных устройствах пока.

[Stanislav_Bykov]

Рано вы сдались. У меня с помощью Web Audio API все получилось.

Answer 3

[monochromer]

Попробуйте сохранить аудио в нескольких форматах и сам элемент audio разместить в DOM:

<audio>
  <source src="file.mp3" type="audio/mpeg">
  <source src="file.ogg" type="audio/ogg">
</audio>

Comments

[Stanislav_Bykov]

К сожалению, не помогает. Как я уже писал в вопросе, если размещать данный тег с кнопками управления, то нажав на плей, звук идет. Т.е. проблем с форматом нет.
Кстати, если сначала запустить звук с кнопки плей, а потом поставить на паузу, то далее можно продолжить функцией .play(), но с самого начала запустить с ее помощью не получается.