Website luyện nói tiếng Anh online chuẩn nhất hiện nay | ELSA Speak (2024)

`,data() {return {audioContext: false,canTest: false,sendData: '',loading: false,resultTest: {},}},mounted() {if (this.supported()) {this.canTest = true;}this.$options.sockets.onmessage = (data) => {data = JSON.parse(data.data);console.log(data);this.processResponseWebSocket(data);};},props: ['input', 'isActive'],methods: {supported() {return (window.AudioContext !== undefined || window.webkitAudioContext !== undefined) &&navigator.mediaDevices &&navigator.mediaDevices.getUserMedia;},processResponseWebSocket(data) {if (data.type === 'ELSA:decoding_result') {this.severStopRecording();this.resultTest = data.data;this.emitResult();} else if (data.type === 'ELSA:server_closing') {this.resultTest = {error: 'server_closing'};this.emitResult();}//data.type === 'ELSA:error'?},initRecording() {this.$SOCKET.initWebsocket(this.input);this.canTest = true;},recordStreaming() {const vm = this;rec && rec.exportWAV(function(blob) {currentRecordBlob.push(blob);if (vm.$SOCKET.isOpen()) {vm.$SOCKET.sendAudio(blob);rec.clear();} else {console.log('socket close!')vm.severStopRecording();vm.resultTest = {error: 'server_closing'};vm.emitResult();}});},startRecording() {console.log('startRecording');if (this.canTest) {const constraints = {audio: true,video: false};const that = this;navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {that.audioContext = new AudioContext();gumStream = stream;input = that.audioContext.createMediaStreamSource(stream);rec = new Recorder(input, {numChannels: 1})rec.record();that.initRecording();}).catch(function(err) {console.log(err);// check for microphone allows!checkDeviceSupport(function() {if(!isMicrophoneAlreadyCaptured) {alert('Microphone not allowed. Make sure your browser allows micro in its setting and you accept this page to access your micro!')location.reload()} else {// slog('error', err.message, `startRecording -> navigator.mediaDevices.getUserMedia -> isMicrophoneAlreadyCaptured: ${isMicrophoneAlreadyCaptured}`);alert(`Something wrong! (${err?.message || ''}). The page will be reload`)location.reload()}});});this.sendData = setInterval(this.recordStreaming, 2000);} else {alert('Microphone not supported. Make sure you are using a browser that allows microphone recording. (Safari for iPhone/IPad, Chrome/Firefox for Android)')}},userStopRecord() {this.$SOCKET.finishRecord();rec && rec.stop();gumStream && gumStream.getAudioTracks()[0].stop();this.recordStreaming();this.loading = true;rec.clear();clearInterval(this.sendData);},severStopRecording() {this.$SOCKET.disconnectSocket();clearInterval(this.sendData);rec && rec.stop();gumStream && gumStream.getAudioTracks()[0].stop();this.loading = false;rec.clear();},recording: function() {if (this.isActive) {this.$emit('start', {});this.startRecording();}},submit: function() {this.userStopRecord();},emitResult: function() {this.$emit('result', {score: this.resultTest});this.resultTest = {};}}});/////////////////////////////////////////// data ///////////////////////////////////////// var instruction = new Vue({// el: '#instruction',// data: {// message: 'https://d1t11jpd823i7r.cloudfront.net/favicon/favicon.ico'// }// });var postId, matches = document.body.className.match(/(^|\s)postid-(\d+)(\s|$)/);if (matches) {// found the idpostId = matches[2];}if(postId == "1020"){var sentences = [{text: 'I noticed some unusual charges yesterday.',hash: '93d62441154adb0462a21148bc28e2cc5c1719d8c2c36ebfd9e9b54910fca5d2',audio_url: 'https://d2hga9ilh6x7l5.cloudfront.net/ELSA/m65/l1632/e8080/0n3mnh2rxolac8gvuemk59yba.mp3',audio: null,}, {text: 'People returns to their hometowns, clean their homes, decorate and cook traditional food.',hash: '490ea75959b74778991cd416e41daaa1147afaf076204c4ace836fa3be268e46',audio_url: 'https://content-media.elsanow.co/_extras_/dnhkc0nw4vg6fahj0ivjpgc69.mp3',audio: null,}, {text: 'Parents give children lucky money in red envelopes on the first day of Lunar New Year.',hash: 'b163537e4f0aacc02b2afc00fa4e268738ffe02847cb9bf4bb89296148cadee2',audio_url: 'https://content-media.elsanow.co/ELSA/m76/l6955/e30982/1ihnqwctnznb5o0t81urkdrc9.mp3',audio: null,},]} else if(postId == "4245"){var sentences = [{text: 'People returns to their hometowns, clean their homes, decorate and cook traditional food.',hash: '490ea75959b74778991cd416e41daaa1147afaf076204c4ace836fa3be268e46',audio_url: 'https://content-media.elsanow.co/_extras_/dnhkc0nw4vg6fahj0ivjpgc69.mp3',audio: null,}, {text: "I'm going to the conference this year.",hash: '8679c3596e09973d9024d50298f9f0ee76a06fe25c9c8e164ccdb9bc46c3dd6b',audio_url: 'https://content-media.elsanow.co/_extras_/w32xucijsggu6whs0jok41vyc.mp3',audio: null,},{text: 'My objective is to learn a lot there.',hash: '471e9bab4c0067dd58769927cb774d06005c965c8800e973ed57aa7b1601d65f',audio_url: 'https://content-media.elsanow.co/_extras_/km8dmpvn8a8vogv0pypc17vxc.mp3',audio: null,},]} else if(postId == "1005"){var sentences = [{text: 'I used to play squash but I had to give it up. I hurt my shoulder pretty bad last year',hash: '4d9eab3421f86a8b07f2e25f54ac258ce0def5a3912fd402f2de3969f91835f3',audio_url: 'https://content-media.elsanow.co/ELSA/m516/l8637/e40464/2uwlpt9mwbvvgvl0jqq8oj214.mp3',audio: null,},{text: 'We figured out a solution to the problem',hash: 'e1f5c7388a662e2a13b81c885985af88859d193373b852101e6452ef6fc7cd3b',audio_url: 'https://content-media.elsanow.co/ELSA/m516/l8643/e40496/mt9fnwig2sdcjtvo4k60xwkn3.mp3',audio: null,},{text: 'We will, yes! As I pointed out earlier, we want everyone to be involved',hash: 'afb884f6db918faf158011b89b57d0431f805cd05b045711ef7a5b64359982c1',audio_url: 'https://content-media.elsanow.co/ELSA/m516/l8646/e40512/qwq92516ifmovolo2200my164.mp3',audio: null,},]} else if(postId == "3680"){var sentences = [{text: 'I used to play squash but I had to give it up. I hurt my shoulder pretty bad last year',hash: '4d9eab3421f86a8b07f2e25f54ac258ce0def5a3912fd402f2de3969f91835f3',audio_url: 'https://content-media.elsanow.co/ELSA/m516/l8637/e40464/2uwlpt9mwbvvgvl0jqq8oj214.mp3',audio: null,},{text: 'We figured out a solution to the problem',hash: 'e1f5c7388a662e2a13b81c885985af88859d193373b852101e6452ef6fc7cd3b',audio_url: 'https://content-media.elsanow.co/ELSA/m516/l8643/e40496/mt9fnwig2sdcjtvo4k60xwkn3.mp3',audio: null,},{text: 'We will, yes! As I pointed out earlier, we want everyone to be involved',hash: 'afb884f6db918faf158011b89b57d0431f805cd05b045711ef7a5b64359982c1',audio_url: 'https://content-media.elsanow.co/ELSA/m516/l8646/e40512/qwq92516ifmovolo2200my164.mp3',audio: null,},]}else if(postId == "8343"){var sentences = [{text: 'Are we going out? I should probably change into a dress then',hash: 'e7b4fd8dad2dd964e0cd154c544fd3594cffc1357aa7720d350ab98123c6faac',audio_url: 'https://content-media.elsanow.co/ELSA/m516/l8642/e40491/evlbjwk09mfbmfg6chzo3cd44.mp3',audio: null,},{text: "For sure! I'll need to visit several branches every week",hash: '0c1f6f2c16b52ca34d6a77c99fd62a9a3b0e5824a7c8e3c047800be70a0a270a',audio_url: 'https://content-media.elsanow.co/ELSA/m516/l8648/e40522/q0qbuwo7vm3v6j3rcek3f6g54.mp3',audio: null,},{text: 'Well, it turned out that Charles was also in town',hash: 'a75b35532832e4aa63a33994cc98bbfba45b124dde1162b06b0f6518e1f1f2c2',audio_url: 'https://content-media.elsanow.co/ELSA/m516/l8655/e40557/iac1mj826m8j7l8608ab57dv3.mp3',audio: null,},]} else {var sentences = [{text: 'This summer I will visit a new country with two of my best friends',hash: '9d04f4a4bc5b420616c5b0df180b8b4219c87a07e8348fad093c0ddabed8d48b',audio_url: 'https://d1t11jpd823i7r.cloudfront.net/assessment/audio/general_01.mp3',audio: null,}, {text: 'We will go sightseeing and stay at a resort by the ocean',hash: '0136951c3017585dd152790a772682b53749830474ca8d33fb4d0de406b155df',audio_url: 'https://d1t11jpd823i7r.cloudfront.net/assessment/audio/general_02.mp3',audio: null,}, {text: 'We will get to enjoy a nice room with a beautiful view of the ocean',hash: 'a65afb8118966d627e6f4e354ebc17a0d74c0e941a76323ff68815a73ebc2003',audio_url: 'https://d1t11jpd823i7r.cloudfront.net/assessment/audio/3-We_will_get.mp3',audio: null,}, ]// shuffle sentences}/////////////////////////////////////////// tracking ///////////////////////////////////////function setCookie(cname, cvalue, exdays) {var d = new Date();d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));var expires = "expires=" + d.toUTCString();document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";}function getCookie(cname) {var name = cname + "=";var decodedCookie = decodeURIComponent(document.cookie);var ca = decodedCookie.split(';');for (var i = 0; i < ca.length; i++) {var c = ca[i];while (c.charAt(0) == ' ') {c = c.substring(1);}if (c.indexOf(name) == 0) {return c.substring(name.length, c.length);}}return "";}var client_id = '';var cookie_id = getCookie('assessment_session');var cookieExdays = 365;var saveAction = function(sentence, sentence_id, score, score_detail, user_info, action) {var url = '/api/assessment/action'var json_data = {client_id: client_id,cookie_id: cookie_id,test_id: '1',sentence_id: sentence_id,sentence: sentence,score: score,score_detail: JSON.stringify(score_detail),user_info: user_info,action: action}var xhr = $.ajax({async: false,type: "POST",url: url,data: json_data,success: function(data, status) {console.log(data);if (status == 'success') {if (client_id == '') {client_id = client_id || data.client_id || '';if (client_id) setCookie('assessment_id', client_id, cookieExdays);}if (cookie_id == '') {cookie_id = cookie_id || data.client_id || '';if (cookie_id) setCookie('assessment_session', cookie_id, cookieExdays);}}}}).done(function() {console.log('Request done!');}).fail(function(jqxhr, settings, ex) {console.log('fail' + ex);});}/////////////////////////////////////////// app ///////////////////////////////////////var landing_page = document.referrer || '/vn';function getParam(p) {var match = RegExp('[?&]' + p + '=([^&]*)').exec(window.location.search);return match && decodeURIComponent(match[1].replace(/\+/g, ' '));}function removeParam(p) {var match = RegExp('[?&]' + p + '=([^&]*)').exec(window.location.search);return match ? window.location.search.replace(match[0], '') : window.location.search;}var _lang = getParam('lang');var lang = document.referrer.split('/').slice(-2)[0] == 'vi' ? 'vi' : _lang ? _lang : '';var _search = removeParam('next');if (_search && _search[0] == '&') _search = _search.replace(/^\&/g, "?");const after_test_link = decodeURIComponent(getParam('next') || (lang ? `/${lang}/elsa-pro` : '/elsa-pro')) + _search;var lead_source = getParam('lead_source');lead_source = lead_source ? lead_source : 'LP24';var vw = Math.min(document.documentElement.clientWidth || 1000, window.innerWidth || 1000);if( vw > 768 ){var circle_diameter = vw > 768 ? 120: 80;}else{var circle_diameter = vw < 768 ? 90: 85;}var score_to_level = function(score) {if (score < 56) return 'Beginner';if (56 <= score && score < 67) return 'Lower intermediate';if (67 <= score && score < 78) return 'Intermediate';if (78 <= score && score < 90) return 'Advanced';if (90 <= score) return 'Native';}userResponses = Array(sentences.length).fill(null);userResults = Array(sentences.length).fill(null);currentAudio = null;play = function() {console.log(currentAudio);var url = URL.createObjectURL(currentAudio);var audio = new Audio(url)audio.onended = function() {app.speechActive = true;app.activeButton = '';};audio.play();}//states = ['viewing', 'playing', 'finish', 'result'];// waiting timewaiting = 0;waitingInterval = null;var app = new Vue({el: '#app',components: {RadialProgressBar: RadialProgressBar,ElsaSpeech: Vue.component('ElsaSpeech'),},data: {state: 'viewing',speechActive: true,activeButton: '',sentences: sentences,sIndex: 0,currentQuestion: 1,userResponses: userResponses,userResults: userResults,isActive: false,level: 'Advanced',native_score: 80,// circle configcompletedSteps: 80,totalSteps: 100,strokeWidth: 16,innerStrokeWidth: 16,strokeLinecap: 'round',startColor: '#16ABFF',stopColor: '#1CF0DB',innerStrokeColor: '#DAD8EB',timingFunc: 'linear',isClockwise: true,circle_diameter: circle_diameter,animateSpeed: 2000,isQuit: false,testResult: [],avg: 0},filters: {charIndex: function(i) {return String.fromCharCode(97 + i);}},methods: {hearback: function() {if (this.activeButton != '') return;if (!this.userResponses[this.sIndex]) return;if (!currentAudio) {ConcatenateBlobs(this.userResponses[this.sIndex], 'audio/wav', function(resultingBlob) {currentAudio = resultingBlob;app.speechActive = false;app.activeButton = 'hearback';play();});} else {this.speechActive = false;this.activeButton = 'hearback';play();}},playback: function() {if (this.activeButton != '') return;this.speechActive = false;if (!this.sentences[this.sIndex].audio) this.sentences[this.sIndex].audio = new Audio(this.sentences[this.sIndex].audio_url);this.sentences[this.sIndex].audio.currentTime = 0;this.sentences[this.sIndex].audio.onended = function() {app.speechActive = true;app.activeButton = '';};this.activeButton = 'playback';this.sentences[this.sIndex].audio.play();},startRecording: function() {currentRecordBlob = [];if (!mic_start_sound) mic_start_sound = new Audio('https://d1t11jpd823i7r.cloudfront.net/assessment/audio/mic_start_sound.mp3');mic_start_sound.currentTime = 0;mic_start_sound.play();this.state = 'playing';},stopRecording: function() {if (!mic_stop_sound) mic_stop_sound = new Audio('https://d1t11jpd823i7r.cloudfront.net/assessment/audio/mic_stop_sound.mp3');mic_stop_sound.currentTime = 0;mic_stop_sound.play();this.state = 'finish';this.$refs.speech.submit();waiting = 0;console.log('Start waiting ' + waiting);waitingInterval && clearInterval(waitingInterval);waitingInterval = setInterval(this.waitForResult, 1000);},force_try_again: function() {alert('Did you read the whole sentence? Please try again!');this.retry();},waitForResult: function() {console.log('waitting ... ')console.log(waiting);waiting += 1;if (this.state != 'finish') {console.log(this.state);clearInterval(waitingInterval);} else {if (waiting > 10) {console.log('wait too long')clearInterval(waitingInterval);this.force_try_again();}}},restart: function() {this.sIndex = 0;this.userResponses = Array(this.sentences.length).fill(null);},next: function() {if (this.currentQuestion < this.sentences.length) {this.currentQuestion++;}if (this.activeButton != '') return;if (this.sIndex < this.sentences.length - 1) {this.sIndex++;this.retry();} else {var self = this;self.testResult = self.userResults.map(({nativeness_score_percentage,nativeness_score_percentage_partial,nativeness_score_percentage_user,sentence,phonemes}, index) => {const avg = self.userResults.reduce((prev, cur) => prev + cur.nativeness_score_percentage_user, 0);self.avg = Math.round(avg / self.userResults.length);var phonemesNew = phonemes.map(({ start_index, end_index, text, score_type }) => ({start_index,end_index,text,score_type}));return {nativeness_score_percentage,nativeness_score_percentage_partial,nativeness_score_percentage_user,phonemes: phonemesNew,sentence,audio_url: self.sentences[index].audio_url}});document.getElementById('native-score').value = self.avg;if (self.testResult.length) {localStorage.setItem('userResult', JSON.stringify(self.testResult));window.location.href = redirectURL;}}},register: function() {window.location.href = "https://vn.elsaspeak.com/tieng-anh-speaking-full-payment/?lead_source=" + lead_source + "&utm_medium=Blog&utm_content=luyen-noi-tieng-anh-online&utm_term=phat-am-tieng-anh&utm_source=SEO&placement=trial_section&utm_campaign=trial_section";},prev: function() {if (this.sIndex > 0) {this.sIndex--;this.retry();}},retry: function() {if (this.activeButton != '') return;this.state = 'viewing';this.userResults[this.sIndex] = null;},scored: function(e) {if (e.score) {waitingInterval && clearInterval(waitingInterval);if (e.score.error === 'server_closing') {if (this.state == 'playing' || this.state == 'finish') this.force_try_again();return;}this.userResponses[this.sIndex] = currentRecordBlob;currentAudio = null;this.userResults[this.sIndex] = e.scorethis.native_score = this.userResults[this.sIndex].nativeness_score_percentage_user;this.level = score_to_level(this.native_score);this.completedSteps = Math.round(this.native_score);this.state = 'result';do_tracking(this.native_score);} else {alert('Server error! Sorry for this inconvinient, please try again');this.state = 'viewing';}},phonemeHighlighter() {let output = '';const strings = this.sentences[this.sIndex].text.trim();if (!this.userResults[this.sIndex]) return strings;phonemes = this.userResults[this.sIndex].phonemes;var whiteSpace = [];for (var i = 0; i < strings.length; i++) {if (strings[i] === " ") whiteSpace.push(i - 1); // position of the character before space}strings.split();for (const score of phonemes) {for (let index = score.start_index; index <= score.end_index; index++) {output += '' + strings[index] + '';if (whiteSpace.includes(index)) {output += '';}}}return output ? '' + output + '.' : strings;},},watch: {state(newState) {if (this.sIndex === this.sentences.length - 1 && newState == 'result') {this.next();}}}})$(window).resize(function() {vw = Math.min(document.documentElement.clientWidth || 1000, window.innerWidth || 1000);circle_diameter = vw > 768 ? 120 : 90;app.circle_diameter = circle_diameter;});var do_tracking = function(score) {console.log('Tracking: score ' + score);}$(window).on("unload", app.close);// load audiofor (let index = 0; index < sentences.length; index++) {sentences[index].audio = new Audio(sentences[index].audio_url);}var mic_start_sound = new Audio('https://d1t11jpd823i7r.cloudfront.net/assessment/audio/mic_start_sound.mp3');var mic_stop_sound = new Audio('https://d1t11jpd823i7r.cloudfront.net/assessment/audio/mic_stop_sound.mp3');