Я учитель английского языка в Японии. Я работаю в префектуре средней школы. Я хотел бы разработать веб-приложение, использующее API оценки произношения Engli sh, для обучения и проверки навыков студентов Engli sh. API оценки произношения означает, что я посылаю API предложение Engli sh и аудиоданные, которые я прочитал, а затем API отправляет мне оценку в формате JSON.
Я думаю, что есть 4 шага.
- Студент говорит с веб-браузером.
- Веб-браузер (Google Chrome) записывает голос пользователя в виде файла WAV (Recorder. js) и отправляет его на * 1043. * - flask server.
- Python API оценки произношения вызовов на сервере.
- API отправляет Python оценку сервера в формате JSON и сервер Python отправляет веб-браузер оценка.
У меня трудности на шаге 4. Я решил использовать API iFLYTEK. (https://global.xfyun.cn/products/ise) API дает мне общую оценку и оценку слов в формате JSON. Первый оценивает весь отрывок, а второй оценивает каждое слово. Я хочу поставить оценки каждого слова под каждым соответствующим словом следующим образом.

Я хотел бы реализовать это на стороне клиента. (HTML , CSS, JavaScript)
Я искал Inte rnet и D3. js, казалось, помог мне, но я не мог найти решение.
Не могли бы вы дать мне какую-либо информацию или предложение? Заранее спасибо.
С уважением, Kazuaki Suzuki
JSON данные, которые я получаю от API, выглядят так:
{
"code": "0",
"desc": "success",
"sid": "wse013089cc@dxddfb119a81826f1a00",
"data": {
"read_sentence": {
"rec_paper": {
"read_chapter": {
"total_score": "76.219740",
"word_count": "10",
"sentence": [
{
"end_pos": "790",
"index": "0",
"total_score": "68.848500",
"word_count": "4",
"word": [
{
"global_index": "0",
"index": "0",
"property": "12",
"syll": [
{
"beg_pos": "372",
"content": "t ax",
"end_pos": "531",
"syll_accent": "0",
"phone": [
{
"beg_pos": "372",
"content": "t",
"dp_message": "32",
"end_pos": "522"
},
{
"end_pos": "531",
"beg_pos": "522",
"content": "ax",
"dp_message": "32"
}
]
},
{
"beg_pos": "531",
"content": "d ey",
"end_pos": "542",
"syll_accent": "1",
"phone": [
{
"beg_pos": "531",
"content": "d",
"dp_message": "32",
"end_pos": "539"
},
{
"beg_pos": "539",
"content": "ey",
"dp_message": "32",
"end_pos": "542"
}
]
}
],
"beg_pos": "372",
"content": "today",
"dp_message": "32",
"end_pos": "542"
},
{
"beg_pos": "542",
"content": "sil",
"end_pos": "570"
},
{
"beg_pos": "570",
"content": "today",
"global_index": "0",
"property": "12",
"total_score": "75.396880",
"dp_message": "0",
"end_pos": "644",
"index": "0",
"syll": [
{
"phone": [
{
"dp_message": "0",
"end_pos": "586",
"beg_pos": "570",
"content": "t"
},
{
"end_pos": "590",
"beg_pos": "586",
"content": "ax",
"dp_message": "0"
}
],
"beg_pos": "570",
"content": "t ax",
"end_pos": "590",
"syll_accent": "0",
"syll_score": "65.940900"
},
{
"content": "d ey",
"end_pos": "644",
"syll_accent": "1",
"syll_score": "84.852860",
"phone": [
{
"beg_pos": "590",
"content": "d",
"dp_message": "0",
"end_pos": "596"
},
{
"dp_message": "0",
"end_pos": "644",
"beg_pos": "596",
"content": "ey"
}
],
"beg_pos": "590"
}
]
},
{
"beg_pos": "644",
"content": "sil",
"end_pos": "678"
},
{
"content": "it",
"global_index": "1",
"index": "1",
"syll": {
"beg_pos": "678",
"content": "ih t",
"end_pos": "696",
"syll_accent": "0",
"syll_score": "67.254300",
"phone": [
{
"beg_pos": "678",
"content": "ih",
"dp_message": "0",
"end_pos": "691"
},
{
"end_pos": "696",
"beg_pos": "691",
"content": "t",
"dp_message": "0"
}
]
},
"total_score": "67.254300",
"beg_pos": "678",
"dp_message": "0",
"end_pos": "696",
"property": "0"
},
{
"beg_pos": "696",
"global_index": "2",
"index": "2",
"property": "0",
"total_score": "95.927240",
"syll": {
"syll_score": "95.927240",
"phone": [
{
"beg_pos": "696",
"content": "ih",
"dp_message": "0",
"end_pos": "704"
},
{
"beg_pos": "704",
"content": "z",
"dp_message": "0",
"end_pos": "716"
}
],
"beg_pos": "696",
"content": "ih z",
"end_pos": "716",
"syll_accent": "0"
},
"content": "is",
"dp_message": "0",
"end_pos": "716"
},
{
"content": "rainy",
"property": "0",
"syll": [
{
"syll_accent": "1",
"syll_score": "74.471320",
"phone": [
{
"beg_pos": "716",
"content": "r",
"dp_message": "0",
"end_pos": "730"
},
],
"beg_pos": "716",
"content": "r ey",
"end_pos": "748"
},
{
"beg_pos": "748",
"content": "n ih",
"end_pos": "790",
"syll_accent": "0",
"syll_score": "94.014120",
"phone": [
{
"beg_pos": "748",
"content": "n",
"dp_message": "0",
"end_pos": "758"
},
]
}
],
"beg_pos": "716",
"dp_message": "0",
"end_pos": "790",
"global_index": "3",
"index": "3",
"total_score": "84.242720"
}
],
"beg_pos": "0",
"content": "today, it is rainy"
},
{
"word": [
{
"content": "i",
"end_pos": "898",
"index": "0",
"property": "0",
"syll": {
"beg_pos": "879",
"content": "ay",
"end_pos": "898",
"syll_accent": "0",
"syll_score": "82.819200",
"phone": {
"end_pos": "898",
"beg_pos": "879",
"content": "ay",
"dp_message": "0"
}
},
"beg_pos": "879",
"global_index": "4",
"total_score": "82.819200",
"dp_message": "0"
},
{
"global_index": "5",
"index": "1",
"beg_pos": "898",
"content": "would",
"dp_message": "0",
"syll": {
"syll_score": "58.377360",
"phone": [
{
"beg_pos": "904",
"content": "uh",
"dp_message": "0",
"end_pos": "910"
},
{
"beg_pos": "910",
"content": "d",
"dp_message": "0",
"end_pos": "915"
}
],
"beg_pos": "898",
"content": "w uh d",
"end_pos": "915",
"syll_accent": "0"
},
"end_pos": "915",
"property": "0",
"total_score": "58.377360"
},
{
"beg_pos": "915",
"content": "like",
"property": "0",
"syll": {
"beg_pos": "915",
"content": "l ay k",
"end_pos": "950",
"syll_accent": "0",
"syll_score": "67.654600",
"phone": [
{
"beg_pos": "915",
"content": "l",
"dp_message": "0",
"end_pos": "934"
},
{
"beg_pos": "934",
"content": "ay",
"dp_message": "0",
"end_pos": "940"
},
{
"beg_pos": "940",
"content": "k",
"dp_message": "0",
"end_pos": "950"
}
]
},
"dp_message": "0",
"end_pos": "950",
"global_index": "6",
"index": "2",
"total_score": "67.654600"
},
{
"dp_message": "0",
"global_index": "7",
"index": "3",
"property": "0",
"syll": {
"beg_pos": "950",
"content": "t uw",
"end_pos": "967",
"syll_accent": "0",
"syll_score": "62.255620",
"phone": [
{
"beg_pos": "950",
"content": "t",
"dp_message": "0",
"end_pos": "958"
},
{
"beg_pos": "958",
"content": "uw",
"dp_message": "0",
"end_pos": "967"
}
]
},
"beg_pos": "950",
"end_pos": "967",
"total_score": "62.255620",
"content": "to"
},
{
"beg_pos": "967",
"dp_message": "0",
"end_pos": "996",
"index": "4",
"syll": {
"content": "g ow",
"end_pos": "996",
"syll_accent": "0",
"syll_score": "36.787940",
"phone": [
{
"beg_pos": "967",
"content": "g",
"dp_message": "0",
"end_pos": "974"
},
{
"dp_message": "0",
"end_pos": "996",
"beg_pos": "974",
"content": "ow"
}
],
"beg_pos": "967"
},
"content": "go",
"global_index": "8",
"property": "0",
"total_score": "36.787940"
},
{
"dp_message": "0",
"index": "5",
"property": "0",
"syll": [
{
"content": "aw t",
"end_pos": "1024",
"syll_accent": "0",
"syll_score": "48.591520",
"phone": [
{
"beg_pos": "996",
"content": "aw",
"dp_message": "0",
"end_pos": "1015"
},
{
"beg_pos": "1015",
"content": "t",
"dp_message": "0",
"end_pos": "1024"
}
],
"beg_pos": "996"
},
{
"phone": [
{
"dp_message": "0",
"end_pos": "1040",
"beg_pos": "1024",
"content": "s"
},
{
"beg_pos": "1040",
"content": "ay",
"dp_message": "0",
"end_pos": "1062"
},
{
"beg_pos": "1062",
"content": "d",
"dp_message": "0",
"end_pos": "1076"
}
],
"beg_pos": "1024",
"content": "s ay d",
"end_pos": "1076",
"syll_accent": "1",
"syll_score": "90.000780"
}
],
"beg_pos": "996",
"content": "outside",
"end_pos": "1076",
"global_index": "9",
"total_score": "73.437080"
}
],
"beg_pos": "790",
"content": "i would like to go outside",
"end_pos": "1261",
"index": "1",
"total_score": "81.133880",
"word_count": "6"
}
],
"beg_pos": "0",
"content": "Today, it is rainy. I would like to go outside.",
"end_pos": "1261",
"except_info": "0",
"is_rejected": "false"
}
},
"lan": "en",
"type": "study",
"version": "6.5.0.1011"
}
}
}