1

Есть вот такая функция, при её выполнении сначала выводится модальное окно, и только потом воспроизводиться аудио. Нужно, чтоб сначала воспроизводилось аудио, а потом выводилось модальное окно. Как это осуществить? И почему порядок выполнения не сходится с последовательностью в коде?

function result(){
	if(total>0){
	$('#audio').get(0).play();
	alert('Новых заказов:'+total);
    }
 }   

2 ответа 2

4

Вероятно, play() не является атомарной функцией: внутри происходит асинхронная предзагрузка необходимого для старта файла фрагмента, а затем уже происходит запуск. Вызывая alert() вы останавливаете поток выполнения, тем самым не давая запуститься аудио.

Выход: отслеживать события audio, например, playing, и уже в обработчике события показывать alert().

$(function() {
  $('#audio').on('playing', function() {
    alert('test');
  });
  $('#audio').get(0).play();
});
<audio id="audio">
  <source src="https://www.sample-videos.com/audio/mp3/crowd-cheering.mp3" type="audio/mpeg">
</audio>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

3
  • Принцип вашего решения понял, оно натолкнуло меня на верное решение. С собитием playing не работает, а вот с событием ended получилось! Не могли бы вы дать краткое толкование понятию "атомарная функция" ? (лишь примерно догадываюсь, что это)
    – orel-22
    8 авг 2018 в 4:59
  • А вы определяете обработчик события playing как у меня в примере — перед вызовом play() или как у вас в примере, после? Если после, то не работает скорее всего по этой причине. Не атомарная — имеется в виду, что состоит из нескольких подфункций, поэтому так себя ведёт. 8 авг 2018 в 5:40
  • @ArtemKorsunov ставлю плюс .я не знал про атомарных функций
    – Randall
    8 авг 2018 в 6:24
1

Отслеживать события audio. Показать alert() в обработчике события ended.

$(function() {
$('#audio').get(0).play();
  $('#audio').on('ended', function() {
    alert('test');
  });
});

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.