Text to Speech Audio not working synchronously in browser

问题: I'm using https://responsivevoice.org for queue management system. my problem is audio is overlapping. how to fix this problem. $.ajax({ url: 'DisplayDataRead',...

问题:

I'm using https://responsivevoice.org for queue management system. my problem is audio is overlapping. how to fix this problem.

$.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>');
        });
    }
});

the each function load before ending voice.


回答1:

The JavaScript is not a synchronize programming language so you can achieve this using callback methods such you have to run something when some stuffs completed.

Use the official Google's Text-To-Speech 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.

Example:

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>

Advanced:
You can play your own audio once then play the text-to-speech api then audio sync so on...

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>

  • 发表于 2019-03-07 05:10
  • 阅读 ( 184 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除