Audio to Speech Audio не работает синхронно в браузере - PullRequest
Новая
       13

Audio to Speech Audio не работает синхронно в браузере

1 голос
/ 06 марта 2019

Я использую https://responsivevoice.org для системы управления очередью. Моя проблема заключается в том, что звук перекрывается. как решить эту проблему. 

$.ajax({
    url: 'DisplayDataRead',
    type: 'post',
    dataType: 'json',
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    async: false,
    data: {
        counter: userCounter,
        command: 'tokensCxr'
    },
    success: function(data) {

        $(data.result).each(function(key, val) {

            var tokenUpdate = $this.next().text();

            if (tokenUpdate != val.temp_token_no) {

                var audio = new Audio(path);
                audio.play();

                audio.onended = function() {
                    responsiveVoice.speak("Token Number " + val.temp_token_no + " - Please Proceed to Counter " + userCounter + "", "US English Female");
                };

            }

            $this.next().html('');
            $this.next().html('<h2 style=" font-size: 1.2em; font-weight: bold; ">' + val.temp_token_no + '</h2>');
        });
    }
});

каждая функция загружается до окончания голоса.

1 Ответ

0 голосов
/ 06 марта 2019

JavaScript не является языком программирования синхронизации, поэтому вы можете достичь этого с помощью методов обратного вызова, таких, что вам нужно что-то запускать, когда некоторые вещи завершены.

Используйте официальный API Google для преобразования текста в речь. 

const ut = new SpeechSynthesisUtterance('Hello');
speechSynthesis.speak(ut);

Помните, что API-интерфейсы Speech не могут вызываться автоматически нашим сценарием без вмешательства пользователя, такого как нажатие кнопки пользователем или запуск некоторых функций, запускаемых пользователем.

Пример: 

function callAjax() {

    $.ajax({
        url: "https://reqres.in/api/users",
        type: "GET",
        success: function(response) {

            $.each(response.data, function(index, element) {

                const ut = new SpeechSynthesisUtterance(element.first_name);
                ut.onend = function() {
                    alert(element.first_name);
                    console.log(element.first_name);
                };
                speechSynthesis.speak(ut);

            });
        }
    });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="callAjax()">Call AJAX</button>

Дополнительно:
Вы можете один раз воспроизвести свой собственный звук, затем воспроизвести API преобразования текста в речь, а затем выполнить синхронизацию звука ... 

function callAjax() {

    $.ajax({
        url: "https://reqres.in/api/users",
        type: "GET",
        success: function(response) {

            var playTimes = 0;
            var dataSize = response.data.length;

            $.each(response.data, function(index, element) {

                var audio = new Audio('https://www.w3schools.com/HTML/horse.mp3');
                if (index == 0) audio.play();

                audio.onended = function() {
                    playTimes++;

                    var cElement = response.data[playTimes - 1];
                    const ut = new SpeechSynthesisUtterance(cElement.first_name);
                    ut.onend = function() {
                        console.log(cElement);
                        if (playTimes != dataSize) audio.play();
                    };
                    speechSynthesis.speak(ut);

                };
            });
        }
    });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="callAjax()">Call AJAX</button>
...