文本到语音音频不能在浏览器中同步工作

Question

我正在使用 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>');
        });
    }
});

语音结束前各功能加载

Answer 1

JavaScript 不是一种同步编程语言，因此您可以使用回调方法来实现此目的，这样您必须运行在某些内容完成时执行某些操作。

使用官方Google的文字转语音API。

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

Remember that the Speech APIs cannot be called automatically by our script without the user interaction such as clicking the button by user or trigger by some functions which started by user.

示例：

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>

文本到语音音频不能在浏览器中同步工作

Text to Speech Audio not working synchronously in browser

javascript

ajax

jquery

html5-audio