问题:
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>